Angular PWA update is too slow

Question

I have an Angular 8 PWA app in production. I make a lot of updates regularly, so I need to find a way for users to get those updates when they open the app.

Without special action, the app won't update. If you open the app on your browser, it will show the version from when you last opened the app, even if I have pushed a new bundle to production. It seems this is an unfortunate result of PWA-functionality.

I am hosting with AWS Amplify.

To solve this (I had asked a question about it here), I have tried using swUpdate.

The problem is it works way too slow. It will reload the browser if there is an update--but it takes a while to do that. It regularly takes several seconds after a user opens the app for the reload to happen. So you open the app, and 4 to 6 seconds later the app reloads with the new version.

Is there a way to make swUpdate go faster? Or an alternative way to load the new app version?

Here's my code, which I think is a straightforward implementation:

app.component.ts:

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

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

   constructor(private swUpdate: SwUpdate) {
   title = 'Great App'

   swUpdate.available.subscribe(event => {
        swUpdate.activateUpdate().then(() => {
            window.location.reload();
            console.log('there is an Update! Reloading now.')
      });
    })

   if (!this.swUpdate.isEnabled) {
      console.log('Not going to update');
    }
 }

But this is not working well, because the reload often happens several seconds after the user goes to the app (even on good internet connection).

I know that I could also show a message to people saying "Want to refresh with a new version?" But this would not address the underlying problem of how slow swUpdate currently works.

Answer 1

To anyone still having this issue, here is what I did to reduce the delay:

• Check for updates in an APP_INITIALIZER instead of the AppComponent, so that the check is done earlier
• Use the checkForUpdate method

In your app.module.ts add an initializer function:

{ provide: APP_INITIALIZER, useFactory: checkForUpdates, multi: true, deps: [SwUpdate /* Add whatever dependency is required here */] },

This function should look like this:

export const checkForUpdates = (swUpdate: SwUpdate): (() => Promise<any>) => {
  return (): Promise<void> =>
    new Promise((resolve) => {
      swUpdate.checkForUpdate();
      
      swUpdate.available.subscribe(() => {
          window.location.reload();
      });

      resolve();
    });
};

I'm not sure if both APP_INITIALIZER and checkForUpdate are required, but this way I reduced the delay to 1-2s (instead of 5-10s or even more)

Answer 2

Problem

There are 4 different registration strategies for a Service Worker in Angular, which determines when it will be registered with the browser.

1. registerWhenStable:<timeout>: Register as soon as the application stabilizes (no pending micro-/macro-tasks) but no later than milliseconds. If the app hasn't stabilized after milliseconds (for example, due to a recurrent asynchronous task), the ServiceWorker will be registered anyway. If is omitted, the ServiceWorker will only be registered once the app stabilizes.
2. registerImmediately: Register immediately.
3. registerWithDelay:<timeout>: Register with a delay of milliseconds. For example, use registerWithDelay:5000 to register the ServiceWorker after 5 seconds. If is omitted, is defaults to 0, which will register the ServiceWorker as soon as possible but still asynchronously, once all pending micro-tasks are completed.
4. An Observable factory function: A function that returns an Observable. The function will be used at runtime to obtain and subscribe to the Observable and the ServiceWorker will be registered as soon as the first value is emitted.

NOTE: Angular is using registerWhenStable:30000 as default. That means that it will first wait for application to stabilizes and then it will register a Service Worker (or it will register the Service Worker after 30sec if the application does not stabilize until then).

Solution

Instead of default registerWhenStable:30000, you can set registerImmediately strategy. Then you can for example add APP_INITIALIZER and inside it check if there is a new version and load it. In that case, user will not see the old version if a new version is available.

app.module.ts

import { APP_INITIALIZER } from '@angular/core';
import { ServiceWorkerModule, SwUpdate } from '@angular/service-worker';
...
function initializeApp(): Promise<any> {
  return new Promise(async (resolve, reject) => {
    try {
      // Check if Service Worker is supported by the Browser
      if (this.swUpdate.isEnabled) {
        const isNewVersion = await this.swUpdate.checkForUpdate();
        // Check if the new version is available
        if (isNewVersion) {
          const isNewVersionActivated = await this.swUpdate.activateUpdate();
          // Check if the new version is activated and reload the app if it is
          if (isNewVersionActivated) window.location.reload();
          resolve(true);
        }
        resolve(true);
      }
      resolve(true);
    } catch (error) {
      window.location.reload();
    }
  });
}

...

@NgModule({
  ...
  imports: [
    ...,
    ServiceWorkerModule.register('ngsw-worker.js', {
      enabled: environment.production,
      registrationStrategy: 'registerImmediately',
    }),
  ],
  providers: [
    ...,
    { provide: APP_INITIALIZER, useFactory: initializeApp, deps: [SwUpdate], multi: true },
  ],
})
export class AppModule {}

Answer 3

I used both answers from Carrm and NeNad to create a page in my Angular app to manage updates.

I also used @saithodev/ts-appversion package to manage version.

Later, I create a script to update the app version on each build and show it on that page (appversionupdate.mjs).

Then, in package.json, I set the script to use with npm run.

This way, when I build and deploy the project the version is updated as I want.

I know that the OP has not asked for all this, but it may be useful for the community.

menu.component.html

<mat-toolbar color="accent" fxLayout="row" fxLayoutAlign="space-between center" class="top-bar">
    <div fxLayout="row" fxLayoutAlign="start center">
        <h1>Atualização do app</h1>
    </div>

</mat-toolbar>

<main>
    <div>
        <h2>Versão do app instalada: {{versao}}</h2>
    </div>

    <h3>Status da atualização</h3>
    <!-- lista sem numeração em HTML -->
    <ul>
        <li *ngFor="let mensagem of mensagens">
            {{mensagem}}
        </li>
    </ul>

    <button mat-raised-button color="accent" (click)="atualizarApp();" class="botao">Atualizar app</button>
</main>

menu.component.ts

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

import { versions } from 'src/_versions';

@Component({
  selector: 'app-menu',
  templateUrl: './menu.component.html',
  styleUrls: ['./menu.component.scss']
})
export class MenuComponent implements OnInit {

  mensagens: string[] = [];
  versao: string = 'Versão ainda não carregada pelo sistema.';

  constructor(
    private readonly swUpdate: SwUpdate,
    ) { }

  ngOnInit(): void {
    this.atualizarApp();
    this.versao = versions.version;
  }

  async atualizarApp() {
    this.mensagens?.push(`${this.getFormattedDate()} Iniciando atualização do app.`);
    try {
      // Check if Service Worker is supported by the Browser
      if (this.swUpdate.isEnabled) {
        this.mensagens?.push(`${this.getFormattedDate()} Verificado que este navegador suporta a atualização do app.`);
        const isNewVersion = await this.swUpdate.checkForUpdate();
        this.mensagens?.push(`${this.getFormattedDate()} Verificando se há nova versão a ser baixada.`);
        // Check if the new version is available
        if (isNewVersion) {
          this.mensagens?.push(`${this.getFormattedDate()} Nova versão do app encontrada. Fazendo download.`);
          const isNewVersionActivated = await this.swUpdate.activateUpdate();
          // Check if the new version is activated and reload the app if it is
          if (isNewVersionActivated) {
            this.mensagens?.push(`${this.getFormattedDate()} Nova versão baixada e instalada.`);
            window.location.reload();
          }
        } else {
          this.mensagens?.push(`${this.getFormattedDate()} O Materiale app já está atualizado.`);
        }
      } else {
        this.mensagens?.push(`${this.getFormattedDate()} Verificado que este navegador não suporta a atualização do app automática e outras funcionalidades.`);
        this.mensagens?.push(`${this.getFormattedDate()} Por favor, atualize o navegador para a versão mais recente. Baixe preferencialmente o Google Chrome.`);
      }

    } catch (error) {
      this.mensagens?.push(`${this.getFormattedDate()} Houve algum error ao tentar atualizar o app. Mensagem de erro: ${error}`);
      this.mensagens?.push(`${this.getFormattedDate()} É possível que este navegador não seja compatível. Por favor, atualize o navegador para a versão mais recente. Baixe preferencialmente o Google Chrome.`);
      this.mensagens?.push(`${this.getFormattedDate()} Mensagem de erro: ${error}`);
      //window.location.reload();
    }

  }

  getFormattedDate(): string {
    var date = new Date();
    var str = `${date.getDate()}/${(date.getMonth() + 1)}/${date.getFullYear()} ${date.getHours()}:${date.getMinutes()}:${date.getSeconds()}`;
    return str;
}

}

appversionupdate.mjs

import fs from 'fs';

//console.log("Atualizado versao do app");

var obj = JSON.parse(fs.readFileSync('package.json', 'utf8'));

var version = obj.version;
var major = version.split('.')[0];
var minor = version.split('.')[1];
var patch = version.split('.')[2];

var minor_updated = Number(minor) +1;
var version_updated = major + '.' + minor_updated + '.' + patch;

console.log("Nova versao: " + version_updated);

obj.version = version_updated;

let data = JSON.stringify(obj, null, 2);

fs.writeFileSync('package.json', data);

package.json

{
  "name": "testeapp",
  "version": "0.14.0",
  "scripts": {
    "ng": "ng",
    "prestart": "ts-appversion",
    "start": "ng serve",
    "prebuild": "ts-appversion",
    "build": "ng build",
    "watch": "ng build --watch --configuration development",
    "test": "ng test",
    "bd": "node ./appversionupdate.mjs && npm run build && firebase deploy"
  },