App Stuck on Splashscreen after Enabling Appflow Live Updates

Appflow
#1

Our app was working fine until we enabled live updates with Appflow. Ever since we did that we are stuck on the splash screen. I have seen a number of posts regarding this, but I have tried all things that solved their issues with no luck myself.

Here is my ionic info

Ionic:

Ionic CLI : 5.4.16 (/usr/local/lib/node_modules/ionic)
Ionic Framework : @ionic/angular 5.5.2
@angular-devkit/build-angular : 0.1000.8
@angular-devkit/schematics : 10.0.8
@angular/cli : 10.0.8
@ionic/angular-toolkit : 2.3.3

Cordova:

Cordova CLI : not installed
Cordova Platforms : not available
Cordova Plugins : not available

Utility:

cordova-res (update available: 0.15.3) : 0.15.2
native-run (update available: 1.3.0) : 1.0.0

System:

ios-deploy : 1.10.0
ios-sim : 8.0.2
NodeJS : v12.14.0 (/usr/local/bin/node)
npm : 6.13.4
OS : macOS Big Sur
Xcode : Xcode 12.4 Build version 12D4e

Any help would be appreciated very much!

Bob

#2

Hi lifequest,

This may or may not be related to the live update configuration that you set. The best way to figure out what’s going on is to install the app on a device and call the following methods from the chrome/safari inspector. Call these methods from a fresh install of your Appflow native build.

IonicCordova.deploy.getConfiguration()
This will display the plugin config including the configured channel for this install.

IonicCordova.deploy.checkForUpdate()
This will tell us if an update is available.

IonicCordova.deploy.getCurrentVersion()
This will return all the details of the currently running deploy update including the job id of the web build deployed. This really helps to zero in on the specific update that’s causing a problem.

If you are not sure how to enable the chrome inspector refer to the docs on the same here.

If you need further assistance with this issue I would encourage you to contact the Appflow support with the above results and we can take a closer look.

Thanks,

1 Like
#3

The issue I am currently facing is that since the issue is happening early on and freezing on the splash screen, I am unable to connect to the inspector anymore. It just hits the splash and then inspector goes away. I will add, I also created a new vanilla ionic application without any other plugins, and I only updated the title for “Hello World”, then attempted to hook that up to Appflow. It has the exact same symptom. It freezes on the splash and I cannot use the inspector. So I am assuming this has got to be some sort of the configuration issue perhaps with a dependency that is a bad version? The main application is not on the latest bits, but the new test application I tried is on latest, and it still failed in the same way. Does that at all ring any bells of what could be causing this?

Thanks for the help!
Bob

#4

Hey Bob - are you using Capacitor or Cordova by chance? Which version?

#5

Cordova unfortunately. Version 6.13.1, here is my package.json details

“dependencies”: {
“@angular/common”: “~11.2.0”,
“@angular/core”: “~11.2.0”,
“@angular/forms”: “~11.2.0”,
“@angular/platform-browser”: “~11.2.0”,
“@angular/platform-browser-dynamic”: “~11.2.0”,
“@angular/router”: “~11.2.0”,
“@ionic/angular”: “^5.5.2”,
“rxjs”: “~6.6.0”,
“tslib”: “^2.0.0”,
“zone.js”: “~0.10.2”
},
“devDependencies”: {
“@angular-devkit/build-angular”: “~0.1102.4”,
“@angular/cli”: “~11.2.4”,
“@angular/compiler”: “~11.2.0”,
“@angular/compiler-cli”: “~11.2.0”,
“@angular/language-service”: “~11.2.0”,
“@ionic/angular-toolkit”: “^3.1.1”,
“@types/jasmine”: “~3.6.0”,
“@types/jasminewd2”: “~2.0.3”,
“@types/node”: “^12.11.1”,
“codelyzer”: “^6.0.0”,
“cordova-ios”: “^6.2.0”,
“cordova-plugin-device”: “^2.0.2”,
“cordova-plugin-ionic”: “^5.4.7”,
“cordova-plugin-ionic-keyboard”: “^2.2.0”,
“cordova-plugin-ionic-webview”: “^4.2.1”,
“cordova-plugin-splashscreen”: “^5.0.2”,
“cordova-plugin-statusbar”: “^2.4.2”,
“cordova-plugin-whitelist”: “^1.3.3”,
“jasmine-core”: “~3.6.0”,
“jasmine-spec-reporter”: “~5.0.0”,
“karma”: “~5.2.0”,
“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”,
“protractor”: “~7.0.0”,
“ts-node”: “~8.3.0”,
“tslint”: “~6.1.0”,
“typescript”: “~4.0.2”
},

#6

The plugin adds <preference name="AutoHideSplashScreen" value="false"/>, which prevents the Splash from automatically hiding.

Depending on your app logic and the selected appflow update method you might want to overwrite the preference to <preference name="AutoHideSplashScreen" value="true"/>. Or call the hide method of splash screen plugin.

#7

@jcesarmobile Thank you very much. It sounds like this is not the ideal solution however, but instead it we should have the HideAutoSplashScreen turned off and then we manually close the splash screen with platform.ready(). However, I tried to implement this in the constructor of our first page and it didn’t seem to do the trick. Is there a preferred way on HOW and WHEN we are supposed to hide the splash screen?

#8

Hello, dit you get this done?

You could try calling initializeApp() on your constructor and in the inicialize app call platform ready.

constructor() {
this.initializeApp();
}

async initializeApp() {

this.platform.ready().then(async () => {
  this.statusBar.styleDefault();
  this.splashScreen.hide();
});

}

#9

We have not, but I will definitely try this. We tried putting it a few other places and but couldn’t get the splash screen to actually hide. I didn’t try to create a method outside the constructor though, so I will give that a try.

Thanks!

#10

Hi there just if you’re still having issue with splash screen. I found the solution in one forum here. Replace your cordova script for splash screen to capacitor:

import { Plugins } from ‘@capacitor/core’;
const { SplashScreen } = Plugins;

// Hide the splash (you should do this on app launch)
SplashScreen.hide();

// Show the splash for an indefinite amount of time:
SplashScreen.show({
autoHide: false
});

// Show the splash for two seconds and then auto hide:
SplashScreen.show({
showDuration: 2000,
autoHide: true
});

That resolve my issue.

Regards