White screen while IONIC deploy updates app

Ionic Framework ionic-v3
1

I am using the live update /deploy feature of IONIC mentioned here => https://docs.ionic.io/services/deploy/

It all works perfectly. But when the app is updating itself the user sees a white screen for 3-5 seconds. Is there a way to show a message or an image while the update is happening?

1 Like
2

When exactly do you see this white screen? What code lines are executed that are followed by this white screen?

3

To elaborate, here is my live update code. After downloading updates, the user is prompted “we have made improvements to the app. Click ok to update”. The user clicks it, the code calls the following line this.deploy.load(); This causes the app to white screen for 3 seconds and then the app comes back and the live update is complete. The bottomline is that the whole thing works great. But the 3 second white screen while the app loads is extremely unintuitive and a bad user experience.

  checkforLiveUpdates() {
      this.deploy.check().then((snapshotAvailable: boolean) => {
          //Live update is available. Download the update.
          if (snapshotAvailable) {
              console.log('Snapshot available...');
              this.deploy.getMetadata().then((metadata) => {
                  console.log('New Update Availble', metadata.message ? metadata.message : "");
              });
              var loadingPopup = this.loadingCtrl.create({
                  content: 'Downloading Updates...'
              });

              loadingPopup.present();
              this.deploy.download().then(() => {
                  return this.deploy.extract().then(() => {
                      loadingPopup.dismiss();
                      let alert = this.alertCtrl.create({
                          title: 'New update available',
                          subTitle: 'We have made improvements to our app. Please press ok to get the latest update.',
                          buttons: [{
                              text: 'Ok',
                              handler: () => {
                                  this.deploy.load();
                              }
                          }]
                      });
                      alert.present();
                  }, (error) => {
                      console.log("Error extracting: " + error);
                  });
              }, (err) => {
                  loadingPopup.dismiss();
                  console.log("Error downloading: " + err);
              });
          }
          else {
              console.log('No live updates available.');
          }
      }, (err) => {
          console.log("Error Checking for live updates: " + err);
      });
  }
4

Have you tried e.g. triggering a splash screen before and removing it after?

5

Sujan,

I tried this. The splash screen shows but when the deploy.reload is called, it white screens the app out completely.

-Thanks

6

i am also getting the white screen when the app is updating. When a white screen shows, I m getting an application error (The connection to the server was unsuccessful.(file:/data/data/com.xxx.xxx/app_jkw2kw-jnjw3/index.html)) .

Could anyone suggest me how to fix this issue? Or Is there a way to disable a white screen when the app is updating?

7

Hmm… did you put up a “native” splash screen? afaik it only reloads the content of the web view, so this shouldn’t happen (but I could be wrong).

That sounds like a different problem showing with the same symptoms as the original post. I think you should create a new forum thread for this so this one doesn’t get hijacked. Thanks.

8

Did you find a solution for this? I am experiencing the same issue.

10

Showing the splash screen did the trick. Not sure why it wasn’t working earlier. I think it was getting hidden before the ionic deploy finished loading. I now show the splash before I start the deploy and then hide it on ionViewDidEnter() of the same page.

1 Like