[FIXED] Ionic/Cordova App staying on white screen after splash screen – WebView cache file error

Issue

Recently updated android-targetSDKVersion=30 for our ionic app, in certain Android 11 & 12 phones it is giving blank screen after splash screen and it is not going away.
It works on some Android 11 & 12 devices and all versions in emulator, but some of the Samsung(S20, S21), latest Pixel 6 all are having this issue.
I have tried to disable and enable “Android System WebView” as mentioned in some forum on Android webview issues but it did not help.

Following error is in the logcat, appreciate any help with this

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

Below is the 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": []
  }
}

Solution

@JKRo here’s what worked for me:

So first I signed up for the free trial of Browserstack and uploaded and tested my app there. It wasn’t really returning any big errors but I could see there were issues with the SQLite plugin – which I haven’t seen previously. so it may be useful to test there.

  1. I updated the SQLite plugin to v6

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

  1. in the tsconfig.json file I changed the target from "es2015" => "es5"

was mentioned here: https://stackoverflow.com/a/62067281/4805298 and https://stackoverflow.com/a/68034532/4805298

other fixes I tried that may work for you:

  1. downgrade your google services to 4.0.1 – located in build.gradle

  2. I can’t find the link that helped me with this but I added an extra loading style:

in 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>

create a colors.xml file in android/app/src/main/res/values/..

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

in Android Manifest:

update the activity theme to the new loading theme

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

Another thing that was very useful was that because I couldn’t see the errors in the emulator, I would upload my app to the google console internal testing section because then a pre-launch report would be generated where they’ve tested your app on multiple devices. I could see videos of the devices/android versions that were reporting the errors. it makes life much easier when you don’t have the physical devices that are reporting the errors.

Answered By – AN11

Answer Checked By – Willingham (Easybugfix Volunteer)

Leave a Reply

(*) Required, Your email will not be published