search

ionic-team / ionic-framework

A powerful cross-platform UI toolkit for building native-quality iOS, Android, and Progressive Web Apps with HTML, CSS, and JavaScript.
https://ionicframework.com
MIT License
50.66k stars 13.52k forks source link

bug: back button and splash screen not working after updating from capacitor 2 to 3 #25612

Closed DeepakSuryaKB closed 1 year ago

DeepakSuryaKB commented 1 year ago

Prerequisites

Ionic Framework Version

Current Behavior

Splash screen goes white after few seconds on opening the android App. Hardware back button not working in Android App. Both were working fine in capacitor version 2

My package.json BEFORE upgrading to capacitor 3 

{
  "name": "mobileapp",
  "version": "0.0.1",
  "author": "Ionic Framework",
  "homepage": "https://ionicframework.com/",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e",
    "sonar": "sonar-scanner",
    "resources": "cordova-res ios && cordova-res android && node scripts/resources.js"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "~13.2.6",
    "@angular/cdk": "~11.2.13",
    "@angular/common": "~13.2.6",
    "@angular/core": "~13.2.6",
    "@angular/forms": "~13.2.6",
    "@angular/google-maps": "^13.2.6",
    "@angular/localize": "~13.2.6",
    "@angular/material": "~11.2.13",
    "@angular/platform-browser": "~13.2.6",
    "@angular/platform-browser-dynamic": "~13.2.6",
    "@angular/router": "~13.2.6",
    "@awesome-cordova-plugins/in-app-browser": "^5.39.1",
    "@capacitor-community/native-market": "^0.1.4",
    "@capacitor/android": "^2.4.7",
    "@capacitor/core": "^2.5.0",
    "@capacitor/ios": "^2.4.7",
    "@fortawesome/angular-fontawesome": "^0.9.0",
    "@fortawesome/fontawesome-svg-core": "^1.2.36",
    "@fortawesome/free-solid-svg-icons": "^5.15.4",
    "@ionic-native/app-minimize": "^5.36.0",
    "@ionic-native/app-version": "^5.36.0",
    "@ionic-native/background-mode": "^5.36.0",
    "@ionic-native/clipboard": "^5.36.0",
    "@ionic-native/core": "^5.36.0",
    "@ionic-native/device": "^5.36.0",
    "@ionic-native/downloader": "^5.36.0",
    "@ionic-native/file": "^5.36.0",
    "@ionic-native/file-opener": "^5.36.0",
    "@ionic-native/file-transfer": "^5.36.0",
    "@ionic-native/in-app-browser": "^5.36.0",
    "@ionic-native/network": "^5.36.0",
    "@ionic-native/social-sharing": "^5.36.0",
    "@ionic-native/unique-device-id": "^5.36.0",
    "@ionic/angular": "^5.6.8",
    "@ionic/pwa-elements": "^3.0.2",
    "@ionic/storage": "^3.0.6",
    "@ionic/storage-angular": "^3.0.6",
    "@ng-bootstrap/ng-bootstrap": "^9.1.3",
    "@ngrx/effects": "^11.0.2",
    "@ngrx/entity": "^11.0.2",
    "@ngrx/schematics": "^11.0.2",
    "@ngrx/store": "^11.0.2",
    "@ngrx/store-devtools": "^11.0.2",
    "@rdlabo/capacitor-facebook-login": "^2.0.3",
    "@tapfiliate/tapfiliate-js": "^1.0.2",
    "@teamhive/lottie-player": "^1.0.0",
    "@types/crypto-js": "^4.0.2",
    "angular-code-input": "^1.6.0",
    "angular-cropperjs": "^1.0.2",
    "bootstrap": "^4.5.0",
    "capacitor-razorpay": "github:razorpay/razorpay-capacitor#596df6b7088b31b9f272b9d904fc90bea8815702",
    "capacitor-sqlite": "^2.2.1-3",
    "cordova-plugin-app-version": "^0.1.12",
    "cordova-plugin-appminimize": "^1.0.1",
    "cordova-plugin-device": "^2.0.3",
    "cordova-plugin-file": "^6.0.2",
    "cordova-plugin-file-opener2": "^3.0.5",
    "cordova-plugin-file-transfer": "^1.7.1",
    "cordova-plugin-inappbrowser": "^5.0.0",
    "cordova-plugin-network-information": "^3.0.0",
    "cordova-plugin-uniquedeviceid": "^1.3.2",
    "cordova-plugin-x-socialsharing": "^6.0.3",
    "cropperjs": "^1.5.12",
    "crypto-js": "^4.1.1",
    "es6-promise-plugin": "^4.2.2",
    "integrator-cordova-plugin-downloader": "^1.1.0",
    "ionic-selectable": "^4.8.0",
    "libphonenumber-js": "^1.9.44",
    "material-icons": "^1.10.6",
    "ng-bootstrap": "^1.6.3",
    "ngx-clipboard": "^14.0.1",
    "ngx-device-detector": "^2.1.1",
    "ngx-drag-scroll": "^12.0.0-beta.1",
    "ngx-google-places-autocomplete": "^2.0.5",
    "ngx-image-cropper": "^5.0.1",
    "ngx-segment-analytics": "^1.8.1",
    "ngx-star-rating": "^2.0.2",
    "ngx-stars": "^1.5.1",
    "pdfmake": "^0.2.5",
    "rxjs": "~6.6.0",
    "slider-carousel": "^1.1.1",
    "tslib": "^2.0.0",
    "zone.js": "~0.11.4"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "^13.2.6",
    "@angular-eslint/builder": "4.3.1",
    "@angular-eslint/eslint-plugin": "4.3.1",
    "@angular-eslint/eslint-plugin-template": "4.3.1",
    "@angular-eslint/schematics": "4.3.1",
    "@angular-eslint/template-parser": "4.3.1",
    "@angular/cli": "~13.2.6",
    "@angular/compiler": "~13.2.6",
    "@angular/compiler-cli": "~13.2.6",
    "@angular/language-service": "~13.2.6",
    "@capacitor/cli": "2.4.7",
    "@ionic/angular-toolkit": "^4.0.0",
    "@ionic/lab": "3.2.10",
    "@types/jasmine": "~3.6.0",
    "@types/jasminewd2": "~2.0.3",
    "@types/node": "^12.11.1",
    "@typescript-eslint/eslint-plugin": "4.16.1",
    "@typescript-eslint/parser": "4.16.1",
    "cordova-plugin-background-mode": "^0.7.3",
    "cordova-res": "^0.15.4",
    "eslint": "^7.6.0",
    "eslint-config-prettier": "^8.3.0",
    "eslint-plugin-import": "2.22.1",
    "eslint-plugin-jsdoc": "30.7.6",
    "eslint-plugin-prefer-arrow": "1.2.2",
    "eslint-plugin-prettier": "^4.0.0",
    "jasmine-core": "~3.6.0",
    "jasmine-spec-reporter": "~5.0.0",
    "karma": "^6.3.2",
    "karma-chrome-launcher": "~3.1.0",
    "karma-coverage": "~2.0.3",
    "karma-coverage-istanbul-reporter": "~3.0.2",
    "karma-jasmine": "~4.0.0",
    "karma-jasmine-html-reporter": "^1.5.0",
    "prettier": "^2.5.1",
    "protractor": "~7.0.0",
    "ts-node": "~8.3.0",
    "typescript": "~4.5.5"
  },
  "description": "An Ionic project",
  "cordova": {
    "plugins": {
      "cordova-plugin-background-mode": {}
    }
  }
}

My package.json AFTER upgrading to capacitor 3

{
  "name": "mobileapp",
  "version": "0.0.1",
  "author": "Ionic Framework",
  "homepage": "https://ionicframework.com/",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e",
    "sonar": "sonar-scanner",
    "resources": "cordova-res ios && cordova-res android && node scripts/resources.js"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "~13.2.6",
    "@angular/cdk": "~11.2.13",
    "@angular/common": "~13.2.6",
    "@angular/core": "~13.2.6",
    "@angular/forms": "~13.2.6",
    "@angular/google-maps": "^13.2.6",
    "@angular/localize": "~13.2.6",
    "@angular/material": "~11.2.13",
    "@angular/platform-browser": "~13.2.6",
    "@angular/platform-browser-dynamic": "~13.2.6",
    "@angular/router": "~13.2.6",
    "@awesome-cordova-plugins/in-app-browser": "^5.39.1",
    "@capacitor-community/native-market": "^0.1.4",
    "@capacitor/android": "^3.6.0",
    "@capacitor/camera": "^1.3.1",
    "@capacitor/core": "^3.6.0",
    "@capacitor/filesystem": "^1.1.0",
    "@capacitor/ios": "^2.4.7",
    "@capacitor/push-notifications": "^1.0.9",
    "@capacitor/share": "^1.1.2",
    "@capacitor/splash-screen": "^1.2.2",
    "@fortawesome/angular-fontawesome": "^0.9.0",
    "@fortawesome/fontawesome-svg-core": "^1.2.36",
    "@fortawesome/free-solid-svg-icons": "^5.15.4",
    "@ionic-native/app-minimize": "^5.36.0",
    "@ionic-native/app-version": "^5.36.0",
    "@ionic-native/background-mode": "^5.36.0",
    "@ionic-native/clipboard": "^5.36.0",
    "@ionic-native/core": "^5.36.0",
    "@ionic-native/device": "^5.36.0",
    "@ionic-native/downloader": "^5.36.0",
    "@ionic-native/file": "^5.36.0",
    "@ionic-native/file-opener": "^5.36.0",
    "@ionic-native/file-transfer": "^5.36.0",
    "@ionic-native/in-app-browser": "^5.36.0",
    "@ionic-native/network": "^5.36.0",
    "@ionic-native/social-sharing": "^5.36.0",
    "@ionic-native/unique-device-id": "^5.36.0",
    "@ionic/angular": "^5.6.8",
    "@ionic/pwa-elements": "^3.0.2",
    "@ionic/storage": "^3.0.6",
    "@ionic/storage-angular": "^3.0.6",
    "@ng-bootstrap/ng-bootstrap": "^9.1.3",
    "@ngrx/effects": "^11.0.2",
    "@ngrx/entity": "^11.0.2",
    "@ngrx/schematics": "^11.0.2",
    "@ngrx/store": "^11.0.2",
    "@ngrx/store-devtools": "^11.0.2",
    "@rdlabo/capacitor-facebook-login": "^2.0.3",
    "@tapfiliate/tapfiliate-js": "^1.0.2",
    "@teamhive/lottie-player": "^1.0.0",
    "@types/crypto-js": "^4.0.2",
    "angular-code-input": "^1.6.0",
    "angular-cropperjs": "^1.0.2",
    "bootstrap": "^4.5.0",
    "capacitor-razorpay": "github:razorpay/razorpay-capacitor#596df6b7088b31b9f272b9d904fc90bea8815702",
    "capacitor-sqlite": "^2.2.1-3",
    "cli": "^1.0.1",
    "cordova-plugin-app-version": "^0.1.12",
    "cordova-plugin-appminimize": "^1.0.1",
    "cordova-plugin-device": "^2.0.3",
    "cordova-plugin-file": "^6.0.2",
    "cordova-plugin-file-opener2": "^3.0.5",
    "cordova-plugin-file-transfer": "^1.7.1",
    "cordova-plugin-inappbrowser": "^5.0.0",
    "cordova-plugin-network-information": "^3.0.0",
    "cordova-plugin-uniquedeviceid": "^1.3.2",
    "cordova-plugin-x-socialsharing": "^6.0.3",
    "cropperjs": "^1.5.12",
    "crypto-js": "^4.1.1",
    "es6-promise-plugin": "^4.2.2",
    "integrator-cordova-plugin-downloader": "^1.1.0",
    "ionic-selectable": "^4.8.0",
    "libphonenumber-js": "^1.9.44",
    "material-icons": "^1.10.6",
    "ng-bootstrap": "^1.6.3",
    "ngx-clipboard": "^14.0.1",
    "ngx-device-detector": "^2.1.1",
    "ngx-drag-scroll": "^12.0.0-beta.1",
    "ngx-google-places-autocomplete": "^2.0.5",
    "ngx-image-cropper": "^5.0.1",
    "ngx-segment-analytics": "^1.8.1",
    "ngx-star-rating": "^2.0.2",
    "ngx-stars": "^1.5.1",
    "pdfmake": "^0.2.5",
    "rxjs": "~6.6.0",
    "slider-carousel": "^1.1.1",
    "tslib": "^2.0.0",
    "zone.js": "~0.11.4"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "^13.2.6",
    "@angular-eslint/builder": "4.3.1",
    "@angular-eslint/eslint-plugin": "4.3.1",
    "@angular-eslint/eslint-plugin-template": "4.3.1",
    "@angular-eslint/schematics": "4.3.1",
    "@angular-eslint/template-parser": "4.3.1",
    "@angular/cli": "~13.2.6",
    "@angular/compiler": "~13.2.6",
    "@angular/compiler-cli": "~13.2.6",
    "@angular/language-service": "~13.2.6",
    "@capacitor/cli": "^3.6.0",
    "@ionic/angular-toolkit": "^4.0.0",
    "@ionic/lab": "3.2.10",
    "@types/jasmine": "~3.6.0",
    "@types/jasminewd2": "~2.0.3",
    "@types/node": "^12.11.1",
    "@typescript-eslint/eslint-plugin": "4.16.1",
    "@typescript-eslint/parser": "4.16.1",
    "cordova-plugin-background-mode": "^0.7.3",
    "cordova-res": "^0.15.4",
    "eslint": "^7.6.0",
    "eslint-config-prettier": "^8.3.0",
    "eslint-plugin-import": "2.22.1",
    "eslint-plugin-jsdoc": "30.7.6",
    "eslint-plugin-prefer-arrow": "1.2.2",
    "eslint-plugin-prettier": "^4.0.0",
    "jasmine-core": "~3.6.0",
    "jasmine-spec-reporter": "~5.0.0",
    "karma": "^6.3.2",
    "karma-chrome-launcher": "~3.1.0",
    "karma-coverage": "~2.0.3",
    "karma-coverage-istanbul-reporter": "~3.0.2",
    "karma-jasmine": "~4.0.0",
    "karma-jasmine-html-reporter": "^1.5.0",
    "prettier": "^2.5.1",
    "protractor": "~7.0.0",
    "ts-node": "~8.3.0",
    "typescript": "~4.5.5"
  },
  "description": "An Ionic project",
  "cordova": {
    "plugins": {
      "cordova-plugin-background-mode": {}
    }
  }
}

Expected Behavior

According to Official capacitor 3 upgrade guide

MainActivity.java Should be like this 

import com.getcapacitor.BridgeActivity;
import com.getcapacitor.Plugin;

import java.util.ArrayList;
//import com.getcapacitor.community.nativemarket.NativeMarket;

public class MainActivity extends BridgeActivity {

}

This Builds the app Successfully but the when opened in virtual or real device fails and stops working 

import android.os.Bundle;

import com.getcapacitor.BridgeActivity;
import com.getcapacitor.Plugin;

import java.util.ArrayList;
//import com.getcapacitor.community.nativemarket.NativeMarket;

public class MainActivity extends BridgeActivity {
  @Override
  public void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    // registerPlugin(PluginInMyApp.class);

    // Initializes the Bridge
     this.init(savedInstanceState, new ArrayList<Class<? extends Plugin>>() {{
    // Additional plugins you've installed go here
    // Ex: add(TotallyAwesomePlugin.class);
    //add(NativeMarket.class);
     }});
    //super.onCreate(savedInstanceState);
    //registerPlugin(PluginInMyApp.class);
  }
}

I currently use the above approach to Successfully build and run the application

Steps to Reproduce

CapacitorConfig.json

{
    "appId": "******",
    "appName": "****",
    "bundledWebRuntime": false,
    "webDir": "www",
    "plugins": {
        "SplashScreen": {
            "launchShowDuration": 5000,
            "launchAutoHide": false,
            "androidScaleType": "CENTER_CROP",
            "androidSplashResourceName": "splash",
            "splashFullScreen": false,
            "splashImmersive": false
        },
        "android": {
            "allowMixedContent": true
        },
        "GoogleAuth": {
            "scopes": [
                "profile",
                "email"
            ],
            "androidClientId": "*********",
            "forceCodeForRefreshToken": true
        },
        "PushNotifications": {
            "presentationOptions": [
                "badge",
                "sound",
                "alert"
            ]
        }
    },
    "server": {
        "cleartext": true
    },
    "cordova": {}
}

Variables.gradle

ext {
    minSdkVersion = 21
    compileSdkVersion = 30
    targetSdkVersion = 30
    androidxActivityVersion = '1.2.0'
    androidxAppCompatVersion = '1.2.0'
    androidxCoordinatorLayoutVersion = '1.1.0'
    androidxCoreVersion = '1.3.2'
    androidxFragmentVersion = '1.3.0'
    junitVersion = '4.13.1'
    androidxJunitVersion = '1.1.2'
    androidxEspressoCoreVersion = '3.3.0'
    cordovaAndroidVersion = '7.0.0'
}

Issue can be re produced with the following configuration settings above

Code Reproduction URL

No response

Ionic Info

Ionic:

Ionic CLI : 6.20.1 (C:\Users\Surya\AppData\Roaming\npm\node_modules\@ionic\cli) Ionic Framework : @ionic/angular 5.9.4 @angular-devkit/build-angular : 13.3.8 @angular-devkit/schematics : 12.2.17 @angular/cli : 13.2.6 @ionic/angular-toolkit : 4.0.0

Capacitor:

Capacitor CLI : 3.6.0 @capacitor/android : 3.6.0 @capacitor/core : 3.6.0 @capacitor/ios : 2.5.0

Utility:

cordova-res : 0.15.4 native-run : 1.6.0

System:

NodeJS : v16.15.1 (C:\Program Files\nodejs\node.exe) npm : 8.12.1 OS : Windows 10

Additional Information

As the Code Base is private Could not able to link my repo. Creating this issues after trying most of the solutions given online. Any suggestion from Ionic and Capacitor team will be helpful

liamdebeasi commented 1 year ago

Thanks for the issue. I am going to close this as this is not a bug in Ionic Framework. As per the Capacitor 3 Migration Guide, you need to install the @capacitor/app plugin in order for the hardware back button to work.

If you encounter any other issues, please post them on the Ionic Forums first. This repo is dedicated to bugs and features for Ionic Framework. Ionic Framework does not manage any of your app's native dependencies, so the amount of help we can provide will be limited. Thanks!

ionitron-bot[bot] commented 1 year ago

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.