Page 1 of 2

Upgrading an Android PWA

Posted: Fri Sep 11, 2020 8:21 am
by brendanm@ite.co.za

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


Re: Upgrading an Android PWA

Posted: Fri Sep 11, 2020 10:53 am
by Oleg Solodiuk

Hello,

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


Re: Upgrading an Android PWA

Posted: Fri Sep 11, 2020 11:40 am
by brendanm@ite.co.za

Ionic 4


Re: Upgrading an Android PWA

Posted: Fri Sep 11, 2020 1:10 pm
by Oleg Solodiuk

Hello,

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


Re: Upgrading an Android PWA

Posted: Fri Sep 11, 2020 3:40 pm
by brendanm@ite.co.za

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?


Re: Upgrading an Android PWA

Posted: Sat Sep 12, 2020 4:46 pm
by Serhii Kulibaba

Hello,

Please see the following screenshot how to find that file.

Screenshot_6.png
Screenshot_6.png (11.79 KiB) Viewed 4893 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).


Re: Upgrading an Android PWA

Posted: Sun Sep 13, 2020 8:31 am
by brendanm@ite.co.za

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.


Re: Upgrading an Android PWA

Posted: Wed Dec 09, 2020 6:30 pm
by brendanm@ite.co.za

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

Re: Upgrading an Android PWA

Posted: Thu Dec 10, 2020 9:50 am
by Serhii Kulibaba

What changes/dependencies exactly you have made here?


Re: Upgrading an Android PWA

Posted: Fri Dec 11, 2020 5:13 am
by brendanm@ite.co.za

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 {}