2

Everything works fine in debug mode, but When generating the signed APK, on both emulator and real device, after the splash screen all I have is a blank white screen.

I also checked the Logcat but it does not have any errors even warnings.

Package.json

 {
  "name": "com.XXX.app",
  "displayName": "XXX",
  "version": "1.0.0",
  "description": "A sample Apache Cordova application that responds to the deviceready event.",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [
    "ecosystem:cordova"
  ],
  "author": "Apache Cordova Team",
  "license": "Apache-2.0",
  "devDependencies": {
    "cordova-android": "^9.0.0",
    "cordova-plugin-splashscreen": "^6.0.0",
    "cordova-plugin-whitelist": "^1.3.4"
  },
  "cordova": {
    "plugins": {
      "cordova-plugin-whitelist": {},
      "cordova-plugin-splashscreen": {}
    },
    "platforms": [
      "android"
    ]
  }
}

Config.xml

<?xml version='1.0' encoding='utf-8'?>
<widget id="com.XXX.app" version="1.0.0" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0">
    <name>XXX</name>
    <description>
        A sample Apache Cordova application that responds to the deviceready event.
    </description>
    <author email="dev@cordova.apache.org" href="http://cordova.io">
        Apache Cordova Team
    </author>
    <!-- this hook will point your config.xml to the DevServer on Serve -->
    <hook type="after_prepare" src="../node_modules/vue-cli-plugin-cordova/serve-config-hook.js" />
    <content src="index.html" />
    <access origin="*" />
    <allow-intent href="http://*/*" />
    <allow-intent href="https://*/*" />
    <allow-intent href="tel:*" />
    <allow-intent href="sms:*" />
    <allow-intent href="mailto:*" />
    <allow-intent href="geo:*" />
    <preference name="SplashScreenDelay" value="0"/>
    <preference name="AutoHideSplashScreen" value="true"/>
    <platform name="android">
        <allow-intent href="market:*" />
        <preference name="loadUrlTimeoutValue" value="700000" />
    </platform>
    <platform name="ios">
        <allow-intent href="itms:*" />
        <allow-intent href="itms-apps:*" />
    </platform>
</widget>

babel.config.js

module.exports = {
  presets: [
    '@vue/cli-plugin-babel/preset'
  ]
}

thanks in advance

Ata Iravani
  • 2,146
  • 7
  • 29
  • 40
  • is it a signed or an unsigned version? – ma_jafari Sep 30 '20 at 08:05
  • I used the signed Version, which is produced using jarsigner . – Ata Iravani Sep 30 '20 at 08:28
  • What's your android version on emulator and on real device? I ask this because if your target platform is Android 6.0 or lower, and you are using vuetify (as described in tags), you need to transpile vuetify library because of outdated webview version that can not be updated. It may also lead to showing a blank screen on startup – Alexander Shkirkov Sep 30 '20 at 09:15
  • Android versions I have tested were 9, 7 and 10. – Ata Iravani Sep 30 '20 at 10:46
  • Actually I know nothing about transpile. Would you please me a reference about that – Ata Iravani Sep 30 '20 at 10:47
  • @AtaIravani, transpilation is just a process of conversion ES6 code in order to make it work on old browsers. It's described for vuetify in [official docs](https://v2.vuetifyjs.com/en/introduction/frequently-asked-questions/#script-5022-expected-identifier-string-or-number). You can just add `transpileDependencies: ['vuetify']` in your **vue.config.js**. But I'm pretty sure it's **not** your problem, because ES6 support was added in Chrome 51, which is in Android 7.0 by default. – Alexander Shkirkov Sep 30 '20 at 15:48
  • 1
    @AtaIravani, I can also say that your **config.xml** is fully correct. I guess, to resolve your issue, you need to get access to your _mobile browser console_ (and I'm not sure that Logcat can show browser errors). Maybe [some of](https://stackoverflow.com/questions/36554165/cordova-white-screen-after-splash-no-exceptions-in-console) this [similar questions](https://stackoverflow.com/questions/56836961/cordova-signed-apk-produces-a-blank-screen-after-splash-screen) will help you. – Alexander Shkirkov Sep 30 '20 at 15:56
  • @dreamwalker, the transpile config was already added by default. Still no changes – Ata Iravani Oct 01 '20 at 13:47

1 Answers1

1

In my case the problem occurred when using mode:'history' and base: process.env.BASE_URL, like below:

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
})

Instead, simply remove aforementioned properties:

export default new Router({
  routes:
  routes
});
Ata Iravani
  • 2,146
  • 7
  • 29
  • 40