Vérifier et mettre à jour une application PWA en Angular

Une application PWA c’est génial mais on ne maitrise pas toujours bien quand elle se met à jour, si elle a détecté une mise à jour, etc. Aujourd’hui je vais vous montrer comment créer un service d’update qui vous donnera le squelette de base pour des gestion plus fine. Angular a tout ce qu’il faut pour ne pas s’embêter avec la gestion fine des workers.

Création d’un service de mise à jour

Nous allons créer un service avec la commande

ng generate

puis sélectionner service et nommer le services/update.
J’aime bien mettre tous mes services dans un répertoire services…

Programmation du service de mise à jour

Le fichier update.service.ts va ressembler au code fourni ci-dessous.

Plusieurs points sur ce code :

• Le composant central d’Angular est SwUpdate (sw pour Service Worker). C’est lui qui va faire le lien avec le Service Worker et vérifier s’il y a des fichiers mise à jour, etc.
• Il propose une property isEnabled si vous souhaitez logger si le service est disponible ou pas, en fonction des plate-formes.
• On peut déclarer tout le code de subscribeUpdate dans le constructeur de UpdateService mais je préfère l’appeler à la main.
• J’utilise Ionic comme framework graphique et donc un ToastController pour afficher les messages.
• Je ne donne pas le choix à la mise à jour. Ça peut poser problème en cas de mise à jour loupée… Il est très simple de rajouter sur le Toast des boutons pour continuer ou annuler ou une temporisation pour que le toast s’enlève au bout de quelques secondes.
• J’utilise window.location.reload(); pour recharger la page et donc l’application. Vous pouvez également utiliser un Router, etc. Pour des comportements plus fins, il faudra passer par la configuration du Service Worker.

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

import { ToastController } from '@ionic/angular';

@Injectable({
  providedIn: 'root'
})
export class UpdateService {

  // Ref: https://angular.io/api/service-worker/SwUpdate
  // Ref: https://alligator.io/angular/service-worker-updates/
  constructor(
    private swUpdate: SwUpdate,
    private toastController: ToastController
  ) { }

  subscribeUpdate() {
    this.swUpdate.available.subscribe(evt => {
      this.showUpdateToast();
    });
  }

  private async showUpdateToast() {
    const toast = await this.toastController.create({
      message: 'Nouvelle version disponible. L\'application va se recharger.',
      position: 'middle',
      color: 'warning',
      buttons: [
        {
          text: 'OK',
          handler: () => {
            window.location.reload();
          }
        }
      ]
    });
    toast.present();
  }
}

Appel du service

Pour utiliser ce service, il vous suffit de le déclarer dans le fichier désiré. Je vous conseille le app.component.ts pour le vérifier au lancement de l’application.

import { UpdateService } from './services/update.service';

puis de l’injecter (de faire injecter une instance…) dans le constructeur :

  constructor(
    private platform: Platform,
    private updateService: UpdateService
  ) {
    this.initializeApp();
  }

Et enfin de l’appeler au « lancement » de l’application :

  ngOnInit() {
    this.updateService.subscribeUpdate();
  }

Conclusion

Franchement, vous imaginiez ça plus compliqué, non ?

Amusez-vous bien avec les PWA !