brendanm@ite.co.za
Posts: 26
Joined: Mon Jul 27, 2020 12:05 pm

Upgrading an Android PWA

I am trying to find a pleasant user experience to upgrade a User's PWA when we publish a new version of the App. After publication I bring up a toast message in the App saying there is a new version - just done by some infreqent polling of the backend DB to get a version number: Right now I only have these 3 methods for the get the new PWA onto the device:

1) Restart the device
2) Close (not minimize) the App, launch App, close (not minimize) the App, launch App. Then screen flickers and the PWA is the new one I just published.
3) Uninstall & reinstall the App

As a variant of (2) I did the force stop under Android App info but that made no difference.

None of the options make for a pleasant user experience. is there anyway to force the old SW to unregister so that we have a smooth & professional looking upgrade?

iOS PWA upgrades are even worse - will create a seperate topic for that

Oleg Solodiuk
Posts: 36
Joined: Fri Jan 10, 2020 6:49 am

Re: Upgrading an Android PWA

Hello,

What framework are you using? Ionic 1, Ionic 4, or JQM?

brendanm@ite.co.za
Posts: 26
Joined: Mon Jul 27, 2020 12:05 pm

Re: Upgrading an Android PWA

Ionic 4

Oleg Solodiuk
Posts: 36
Joined: Fri Jan 10, 2020 6:49 am

Re: Upgrading an Android PWA

Hello,

I recommend you to check this information: https://www.bluehorse.in/blog/pwa-auto-update-ionic-4/

brendanm@ite.co.za
Posts: 26
Joined: Mon Jul 27, 2020 12:05 pm

Re: Upgrading an Android PWA

So referring to the link you gave - where do I find the app.module.ts file in my Ionic 4 application? Surely the Appery framework should be automatically doing this when an App is published?

Serhii Kulibaba
Posts: 150
Joined: Tue Aug 27, 2013 1:47 pm

Re: Upgrading an Android PWA

Hello,

Please see the following screenshot how to find that file.

Screenshot_6.png
Screenshot_6.png (11.79 KiB) Viewed 4696 times

Unfortunately, any help (and/or debugging) with your custom app code or logic as well as 3rd party Apache Cordova/PhoneGap plugins are not covered by our [Support policy] (https://docs.appery.io/docs/general-support-policy).
To get such help, you will need to consider purchasing Advisory Pack: (https://appery.io/services/#Advisory_Pack).

brendanm@ite.co.za
Posts: 26
Joined: Mon Jul 27, 2020 12:05 pm

Re: Upgrading an Android PWA

Thanks. I was just mentioning in my previous post that this should be a core feature of the Appery Framework. Surely most developers would want their PWA to auto update when they publish a new version of their App.

brendanm@ite.co.za
Posts: 26
Joined: Mon Jul 27, 2020 12:05 pm

Re: Upgrading an Android PWA

I am still trying to find an easy way for our customers to upgrade their PWAs after we republish them. Surely there must ebbe some Appery developer who has worked around this issie of pWA upgrades??

I tried the soltion 2 posts back but get this error. Any help will be greatly appreciated.

ERROR in src/app/app.module.ts:60:30 - error TS2307: Cannot find module '@angular/service-worker'.

60 import { SwUpdate } from '@angular/service-worker';

Code: Select all


ERROR in Can't resolve all parameters for AppComponent in /srv/www/html/692568/temp/src/app/app.module.ts: (?).
Couldn't resolve resource ./app.component.css relative to /srv/www/html/692568/temp/src/app/app.module.ts
Serhii Kulibaba
Posts: 150
Joined: Tue Aug 27, 2013 1:47 pm

Re: Upgrading an Android PWA

What changes/dependencies exactly you have made here?

brendanm@ite.co.za
Posts: 26
Joined: Mon Jul 27, 2020 12:05 pm

Re: Upgrading an Android PWA

All i did was chnage the app.module.ts to this. Nothing else.

import {
NgModule
} from '@angular/core';
import {
BrowserModule
} from '@angular/platform-browser';
import {
FormsModule
} from '@angular/forms';
import {
HttpClientModule
} from '@angular/common/http';
import {
IonicModule
} from '@ionic/angular';
import {
IonicStorageModule
} from '@ionic/storage';
import {
ApperyioModule
} from './scripts/apperyio/apperyio.module';
import {
PipesModule
} from './scripts/pipes.module';
import {
DirectivesModule
} from './scripts/directives.module';
import {
ComponentsModule
} from './scripts/components.module';
import {
CustomComponentsModule
} from './scripts/custom-components.module';
import {
CustomModulesModule
} from './scripts/custom-modules.module';
import {
app
} from './app';
import {
AppRoutingModule
} from './app-routing.module';
import {
WebView
} from '@ionic-native/ionic-webview/ngx';
import {
Device
} from '@ionic-native/device/ngx';
import {
SplashScreen
} from '@ionic-native/splash-screen/ngx';
import {
StatusBar
} from '@ionic-native/status-bar/ngx';
import {
Keyboard
} from '@ionic-native/keyboard/ngx';

import {
Component
} from '@angular/core';
import {
SwUpdate
} from '@angular/service-worker';

@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})


export class AppComponent {

Code: Select all

  constructor(public updates:SwUpdate) {
    updates.available.subscribe(event => {
      console.log('current version is', event.current);
      console.log('available version is', event.available);
    });
    updates.activated.subscribe(event => {
      console.log('old version was', event.previous);
      console.log('new version is', event.current);
    });

    updates.available.subscribe(event => {
        updates.activateUpdate().then(() => this.updateApp());
    });
   }

   updateApp(){
    document.location.reload();
    console.log("The app is updating right now");

   }

}

@NgModule({
declarations: [
app
],
imports: [
BrowserModule,
FormsModule,
IonicModule.forRoot(),
HttpClientModule,
ApperyioModule,
PipesModule,
DirectivesModule,
ComponentsModule,
CustomComponentsModule,
CustomModulesModule,
IonicStorageModule.forRoot(),
AppRoutingModule
],
bootstrap: [
app
],
entryComponents: [
//app
],
providers: [
StatusBar,
SplashScreen,
WebView,
Device,
Keyboard,
]
})
export class AppModule {}

Return to “Issues”