Ionic/Cordova 應用程序在啟動畫面后停留在白屏上 - WebView 緩存文件錯誤

Question

最近為我們的離子應用程序更新了 android-targetSDKVersion=30，在某些 Android 11 和 12 手機中，它在閃屏后出現空白屏幕，並且不會消失。 它適用於某些 Android 11 和 12 設備以及模擬器中的所有版本，但某些三星（S20、S21）、最新的 Pixel 6 都存在此問題。 我曾嘗試禁用和啟用“Android System WebView”，如某些關於 Android webview 問題的論壇中所述，但它沒有幫助。

以下錯誤在 logcat 中，感謝任何幫助

2022-07-01 19:54:12.424 17025-17940/? E/chromium: [ERROR:simple_file_enumerator.cc(21)] opendir /data/user/0/com.xy/cache/WebView/Default/HTTP Cache/Code Cache/wasm: No such file or directory (2)

下面是 package.json

  "name": "**",
  "version": "0.0.1",
  "author": "***",
  "homepage": "***",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "^10.0.8",
    "@angular/common": "^10.0.8",
    "@angular/core": "^10.0.8",
    "@angular/forms": "^10.0.8",
    "@angular/platform-browser": "^10.0.8",
    "@angular/platform-browser-dynamic": "^10.0.8",
    "@angular/router": "^10.0.8",
    "@fortawesome/angular-fontawesome": "0.7.0",
    "@fortawesome/fontawesome-svg-core": "1.2.30",
    "@fortawesome/free-solid-svg-icons": "5.14.0",
    "@ionic-native/camera": "^5.27.0",
    "@ionic-native/core": "^5.27.0",
    "@ionic-native/in-app-browser": "^5.27.0",
    "@ionic-native/keyboard": "^5.27.0",
    "@ionic-native/open-native-settings": "^5.27.0",
    "@ionic-native/screen-orientation": "^5.27.0",
    "@ionic-native/sim": "^5.27.0",
    "@ionic-native/splash-screen": "^5.27.0",
    "@ionic-native/status-bar": "^5.27.0",
    "@ionic/angular": "^5.3.1",
    "@ionic/cli": "^6.11.0",
    "@ionic/storage": "^2.3.0",
    "@ngx-translate/core": "^11.0.1",
    "@ngx-translate/http-loader": "^4.0.0",
    "angular2-signaturepad": "^3.0.4",
    "cordova-android": "9.1.0",
    "cordova-background-geolocation-lt": "^3.9.2",
    "cordova-ios": "^5.1.1",
    "cordova-open-native-settings": "1.5.2",
    "cordova-plugin-androidx-adapter": "^1.1.3",
    "cordova-plugin-background-fetch": "^6.1.1",
    "cordova-plugin-camera": "^4.1.0",
    "cordova-plugin-device": "^2.0.3",
    "cordova-plugin-inappbrowser": "^3.2.0",
    "cordova-plugin-ionic-keyboard": "^2.2.0",
    "cordova-plugin-ionic-webview": "^4.2.1",
    "cordova-plugin-screen-orientation": "^3.0.2",
    "cordova-plugin-sim": "^1.3.3",
    "cordova-plugin-splashscreen": "^5.0.4",
    "cordova-plugin-statusbar": "^2.4.3",
    "cordova-plugin-whitelist": "^1.3.4",
    "cordova-sqlite-storage": "^3.4.0",
    "core-js": "^3.6.5",
    "es6-promise-plugin": "^4.2.2",
    "hammerjs": "^2.0.8",
    "rxjs": "^6.6.2",
    "tslib": "^2.0.0",
    "zone.js": "~0.10.3"
  },
  "devDependencies": {
    "@angular-devkit/architect": "^0.803.29",
    "@angular-devkit/build-angular": "~0.1000.5",
    "@angular-devkit/core": "^10.0.5",
    "@angular-devkit/schematics": "^10.0.5",
    "@angular/cli": "^10.0.5",
    "@angular/compiler": "^10.0.8",
    "@angular/compiler-cli": "^10.0.8",
    "@angular/language-service": "^10.0.8",
    "@ionic/angular-toolkit": "^2.3.0",
    "@types/jasmine": "^2.8.17",
    "@types/jasminewd2": "^2.0.8",
    "@types/node": "^12.11.1",
    "codelyzer": "^6.0.0",
    "cordova-plugin-geolocation": "^4.0.1",
    "jasmine-core": "~3.5.0",
    "jasmine-spec-reporter": "~5.0.0",
    "karma": "~5.0.0",
    "karma-chrome-launcher": "~3.1.0",
    "karma-coverage-istanbul-reporter": "~3.0.2",
    "karma-jasmine": "~3.3.0",
    "karma-jasmine-html-reporter": "^1.5.0",
    "protractor": "~7.0.0",
    "ts-node": "~7.0.0",
    "tslint": "~6.1.0",
    "typescript": "~3.9.7"
  },
  "description": "An Ionic project",
  "cordova": {
    "plugins": {
      "cordova-sqlite-storage": {},
      "cordova-plugin-sim": {},
      "cordova-plugin-whitelist": {},
      "cordova-plugin-statusbar": {},
      "cordova-plugin-device": {},
      "cordova-plugin-splashscreen": {},
      "cordova-plugin-ionic-keyboard": {},
      "cordova-plugin-camera": {},
      "cordova-plugin-geolocation": {
        "GEOLOCATION_USAGE_DESCRIPTION": "This app has a feature that uses your phone’s Location Services to track you"
      },
      "cordova-open-native-settings": {},
      "cordova-plugin-ionic-webview": {},
      "cordova-plugin-inappbrowser": {},
      "cordova-plugin-screen-orientation": {},
      "cordova-background-geolocation-lt": {
        "BACKGROUND_MODE_LOCATION": "<string>location</string>"
      },
      "cordova-plugin-androidx-adapter": {}
    },
    "platforms": [
      "android",
      "ios"
    ],
    "browserslist": []
  }
}

Answer 1

@JKRo 這對我有用：

所以首先我注冊了 Browserstack 的免費試用版，並在那里上傳並測試了我的應用程序。 它並沒有真正返回任何大錯誤，但我可以看到 SQLite 插件存在問題——這是我以前從未見過的。 所以在那里進行測試可能很有用。

1. 我將 SQLite 插件更新到 v6

cordova-sqlite-storage v5.1.0 => v6.0.0 @ionic-native/sqlite v5.30.0 => v5.36.0

2. 在 tsconfig.json 文件中，我將目標從“es2015”=>“es5”

在這里提到： https ://stackoverflow.com/a/62067281/4805298 和https://stackoverflow.com/a/68034532/4805298

我嘗試過的其他可能對您有用的修復：

1. 將您的谷歌服務降級到 4.0.1 - 位於 build.gradle

2. 我找不到幫助我解決這個問題的鏈接，但我添加了一個額外的加載樣式：

在 android/app/src/main/res/values/styles.xml 中：

<style name="LoadingTheme" parent="@android:style/Theme.Light.NoTitleBar.Fullscreen">
    <item name="android:windowBackground">@color/myColor</item>
</style>

在 android/app/src/main/res/values/.. 中創建一個 colors.xml 文件

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="myColor">#00ff00</color>
</resources>

在 Android 清單中：

將活動主題更新為新的加載主題

<activity 
...
android:theme="@style/LoadingTheme">

另一件非常有用的事情是，因為我在模擬器中看不到錯誤，所以我會將我的應用程序上傳到谷歌控制台內部測試部分，因為然后會在他們測試你的應用程序的地方生成預發布報告多個設備。 我可以看到報告錯誤的設備/android 版本的視頻。 當您沒有報告錯誤的物理設備時，它會讓生活變得更加輕松。

Answer 2

我在 Ionic 4 上遇到了同樣的問題，在更新到 Cordova 11 后沒有任何錯誤的白色屏幕。
為了解決這個問題，我已經將所有 cordova 插件更新到最新版本。
npm outdated
ionic cordova plugin rm plugin_name.
ionic cordova plugin add plugin_name.

我將其添加到 config.xml 中：
<preference name="AndroidWindowSplashScreenAnimatedIcon" value="resources/splash.png" />