Question 5056 in Facebook API Question posted in
The official documentation for the Facebook APIs can be found here.

Latest Ionic (6) Capacitor not working on Android 6 – Facebook API

I am building an app with Ionic Angular and Capacitor.
According to Capacitor’s documentation, they support Android from version 5.0:

Android version support for Capacitor is more complex than iOS. Currently, we are targeting API level 21 or greater, meaning Android 5.0 (Lollipop) or above. This represents over 90% of the Android market.

But when I try to launch my App in Android 6.0.1 Marshmallow on a real device, not the emulator which I know uses very old WebViews, I get this error from Logcat:

2023-02-07 20:17:30.316 1291-1291/com.my.app E/ApkAssets: Error while
loading asset assets/natives_blob_64.bin:
java.io.FileNotFoundException: assets/natives_blob_64.bin

2023-02-07 20:17:30.316 1291-1291/com.my.app E/ApkAssets: Error while
loading asset assets/snapshot_blob_64.bin:
java.io.FileNotFoundException: assets/snapshot_blob_64.bin

2023-02-07 20:17:33.179 1291-1291/com.my.app E/Capacitor: System
WebView is not supported

2023-02-07 20:17:33.300 1291-1381/com.my.app E/libEGL:
validate_display:255 error 3008 (EGL_BAD_DISPLAY)

2023-02-07 20:17:33.546 1291-1291/com.my.app E/Capacitor/Console:
File: http://localhost/ – Line 80 – Msg: Uncaught SyntaxError:
Unexpected token (

I already tried with several browserslistrc configs and setting the target in tsconfig.ts to es2015, but nothing works.

This is my package.json:

{
  "name": "my-app",
  "version": "0.0.3",
  "author": "John Smith",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e",
    "android": "ionic capacitor sync && ionic capacitor open android",
    "ios": "ionic capacitor sync && ionic capacitor open ios",
    "androidProd": "ionic capacitor sync && ionic capacitor build android --prod",
    "iosProd": "ionic capacitor sync && ionic capacitor build ios --prod",
    "buildProd": "ionic capacitor sync && ionic build --prod"
  },
  "browserslist": [
    "defaults and supports es6-module",
    "maintained node versions"
  ],
  "private": true,
  "dependencies": {
    "@angular/common": "^15.0.2",
    "@angular/core": "^15.0.2",
    "@angular/forms": "^15.0.2",
    "@angular/material": "^15.0.1",
    "@angular/platform-browser": "^15.0.2",
    "@angular/platform-browser-dynamic": "^15.0.2",
    "@angular/router": "^15.0.2",
    "@auth0/angular-jwt": "^5.1.0",
    "@awesome-cordova-plugins/camera": "^6.3.0",
    "@awesome-cordova-plugins/core": "^6.3.0",
    "@awesome-cordova-plugins/device": "^6.3.0",
    "@awesome-cordova-plugins/diagnostic": "^6.3.0",
    "@awesome-cordova-plugins/geolocation": "^6.3.0",
    "@awesome-cordova-plugins/local-notifications": "^6.3.0",
    "@awesome-cordova-plugins/power-optimization": "^6.3.0",
    "@awesome-cordova-plugins/screen-orientation": "^6.3.0",
    "@awesome-cordova-plugins/social-sharing": "^6.3.0",
    "@capacitor-community/facebook-login": "^4.0.0",
    "@capacitor/android": "^4.6.1",
    "@capacitor/app": "^4.1.1",
    "@capacitor/browser": "^4.1.0",
    "@capacitor/core": "^4.6.1",
    "@capacitor/ios": "4.6.1",
    "@capacitor/keyboard": "^4.1.0",
    "@capacitor/push-notifications": "^4.1.2",
    "@capacitor/status-bar": "^4.1.1",
    "@ionic/angular": "^6.3.9",
    "@ionic/pwa-elements": "^3.1.1",
    "@ngx-translate/core": "^14.0.0",
    "@ngx-translate/http-loader": "^7.0.0",
    "cordova-plugin-badge": "^0.8.8",
    "cordova-plugin-camera": "^6.0.0",
    "cordova-plugin-device": "^2.1.0",
    "cordova-plugin-geolocation": "^4.1.0",
    "cordova-plugin-local-notification": "^0.9.0-beta.2",
    "cordova-plugin-power-optimization": "^0.0.4",
    "cordova-plugin-screen-orientation": "^3.0.2",
    "cordova-plugin-x-socialsharing": "^6.0.4",
    "cordova-support-android-plugin": "^2.0.4",
    "cordova.plugins.diagnostic": "^7.1.1",
    "crypto-js": "^4.1.1",
    "es6-promise-plugin": "^4.2.2",
    "jetifier": "^2.0.0",
    "luxon": "^3.1.1",
    "net": "^1.0.2",
    "rxjs": "~7.6.0",
    "sockjs-client": "^1.6.1",
    "stompjs": "^2.3.3",
    "swiper": "^8.4.5",
    "tslib": "^2.4.1",
    "uuid": "^9.0.0",
    "zone.js": "~0.12.0"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "^15.0.2",
    "@angular-eslint/builder": "~15.1.0",
    "@angular-eslint/eslint-plugin": "~15.1.0",
    "@angular-eslint/eslint-plugin-template": "~15.1.0",
    "@angular-eslint/template-parser": "~15.1.0",
    "@angular/cli": "^15.0.2",
    "@angular/compiler": "^15.0.2",
    "@angular/compiler-cli": "^15.0.2",
    "@angular/language-service": "^15.0.2",
    "@capacitor/cli": "^4.6.1",
    "@ionic/angular-toolkit": "^7.0.0",
    "@types/jasmine": "~4.3.1",
    "@types/jasminewd2": "~2.0.10",
    "@types/node": "^18.11.11",
    "@typescript-eslint/eslint-plugin": "5.45.1",
    "@typescript-eslint/parser": "5.45.1",
    "eslint": "^8.29.0",
    "eslint-plugin-import": "2.26.0",
    "eslint-plugin-jsdoc": "39.6.4",
    "eslint-plugin-prefer-arrow": "1.2.3",
    "jasmine-core": "~4.5.0",
    "jasmine-spec-reporter": "~7.0.0",
    "karma": "~6.4.1",
    "karma-chrome-launcher": "~3.1.1",
    "karma-coverage": "~2.2.0",
    "karma-coverage-istanbul-reporter": "~3.0.3",
    "karma-jasmine": "~5.1.0",
    "karma-jasmine-html-reporter": "^2.0.0",
    "protractor": "~7.0.0",
    "ts-node": "~10.9.1",
    "typescript": "~4.8.2"
  },
  "description": "An absolute awesome app"
}

This is my tsconfig.ts:

{
  "compileOnSave": false,
  "compilerOptions": {
    "baseUrl": "./",
    "outDir": "./dist/out-tsc",
    "sourceMap": true,
    "declaration": false,
    "downlevelIteration": true,
    "experimentalDecorators": true,
    "moduleResolution": "node",
    "importHelpers": true,
    "target": "es2015",
    "module": "es2020",
    "lib": [
      "es2018",
      "dom"
    ],
    "useDefineForClassFields": false,
    "allowSyntheticDefaultImports": true
  },
  "angularCompilerOptions": {
    "enableI18nLegacyMessageIdFormat": false,
    "strictInjectionParameters": true,
    "strictInputAccessModifiers": true,
    "strictTemplates": true,
    "allowSyntheticDefaultImports": true
  }
}

I really need to get this running on Android 6 as this app needs to go through a review process from Meta to use some Facebook/Instagram data, and they are testing on Android 6 Marshmallow devices, but as long as this error appears, the app will show the splash screen and then just display a white screen.

Tags:

2

Answers


  1. 0

    Try to update the WebView from the Play Store or change the capacitor.config.ts:

    const config: CapacitorConfig = {
  ...
  android: {
    minWebViewVersion: 55
  },
};

    From the documentation:

    The minimum supported cannot be lower than version 55, which is required for Capacitor.

    If the device uses a lower WebView version, an error message will be shown on Logcat.

    If server.errorPath is configured, the WebView will redirect to that file, so can be used to show a custom error.

    Login or Signup to reply.
  2. 0

    I had this problem in the emulator for different older Android versions. The solution was to update Chrome and System Webview via Google Play in order to make the app launch properly again. Project-wise I didn’t need to make any changes.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search