IONIC Angular PWA standalone is not refreshing

coreelements · August 23, 2019, 11:34am

I’m trying to create a PWA with IONIC Angular (web).

The application is running on: https://todo-ionic.thehangrycoder.now.sh

When I open the url on an iphone via Safari, it does asks me to add to homescreen. The icons and splashscreens are also working. So far so good.

Now, when I make a change and deploy again. The standalone version doesn’t notify me to refresh it. But when I open the url on the same iphone device in safari, it does asks me to refresh the application.

Also, when the application starts in the mobile browser, it will perform an api request to get data (https://todo.thehangrycoder.now.sh/todo/). But when I open the standalone application, it looks like it doesn’t do the api request.

This is my nsgw config: https://github.com/fransyozef/todo-challenge/blob/master/frontend/ionic4/todo-app/src/ngsw-config.json

and my manifest: https://github.com/fransyozef/todo-challenge/blob/master/frontend/ionic4/todo-app/src/manifest.json

The application is deployed on NOW: https://github.com/fransyozef/todo-challenge/blob/master/frontend/ionic4/todo-app/now.json

Any suggestions I can try? Or is here something I’m missing?

gokujy · August 23, 2019, 1:59pm

I have same error: PWA

coreelements · August 23, 2019, 2:38pm

have a 404 on your link?

coreelements · August 23, 2019, 2:39pm

so I got a workaround (at least for the checking the version number).

I do an interval of 20 seconds to invoke the servic worker checkForUpdate() method.

github.com

fransyozef/todo-challenge/blob/25047e2add4ae1c570316a7c51ee6811d8b85bbf/frontend/ionic4/todo-app/src/app/app.component.ts#L42


  private swUpdate: SwUpdate,
  private alertController: AlertController,
) { }


initializeApp() {
  this.platform.ready().then(() => {
    this.todoService.fetch().subscribe();
    this.showIosInstallBanner();
    this.checkUpdate();


    setInterval(() => {
      this.swUpdate.checkForUpdate();
    } , 21600);
  });
}


async showIosInstallBanner() {
  // Detects if device is on iOS
  const isIos = () => {
    const userAgent = window.navigator.userAgent.toLowerCase();
    return /iphone|ipad|ipod/.test(userAgent);

This wil also reload the whole application (and get new api data). But when there is no new update, it will still not get new api data. Just found out that ios just saves the state of the standalone pwa application as is.

gokujy · August 23, 2019, 3:04pm

you have add conditions like set something like version, and in interval we check is version change? and if version is change it will call api to get new data, i change link you can check

coreelements · August 24, 2019, 8:11am

yes … in the interval I call the angular service worker. It will check if there’s a change and will fire an event wich I’m already subcribed on.

This workaround is for ios because in standalone, after the 1st time you start and close the application, ios safari just saves the current application state. so the check will never be called by safari.

coreelements · August 24, 2019, 8:13am

actually it will not “call new api data” … it will refresh the whole application and then the application will refetch the api data. a slight difference. because when there is no new change and you will open the application, the application won’t refetch the api data