Date de création : 2021/02/26 09:24

Lorsque vous avez déjà créé une PWA (angular), vous avez probablement remarqué que le Service Worker effectuera une mise à jour automatique, mais en arrière-plan. Cela signifie que lorsque vous déployez une nouvelle version de votre application sur votre serveur, la prochaine fois que l'utilisateur ouvrira l'application, elle se mettra à jour automatiquement en arrière-plan. Mais dans la session en cours, l'utilisateur voit l'ancienne version de l'application .

Cela se produit parce que le nouveau Service Worker est effectivement téléchargé, mais pas encore activé. Il ne s'activera qu'à la prochaine visite. Mais cela peut être délicat car vous avez souvent non seulement une application frontale, mais aussi un serveur back-end et peut-être que vous avez des ruptures majeures dans votre API. Ainsi, l'ancienne version du front-end n'est pas compatible avec la nouvelle API. Si tel est le cas, vos utilisateurs doivent toujours utiliser la dernière version de l'application.

Et je vais vous montrer comment faire cela.

Il est très facile de convertir une application angulaire normale en PWA. Il vous suffit d'exécuter quelques commandes CLI, de créer une icône et de configurer les couleurs du thème. Mais il n'y a pas d'écran de démarrage en sortie de boîte.

Notre objectif est de montrer un écran de démarrage à l'utilisateur chaque fois qu'il ouvre l'application. Pendant que l'écran de démarrage est ouvert, nous voulons vérifier les mises à jour et si une mise à jour est trouvée, nous rechargeons l'application. Si aucune mise à jour n'est trouvée, nous supprimons l'écran de démarrage.

Angular fournit un service appelé SWUpdate qui contient toutes les informations autour de votre application et les mises à jour possibles.

class SwUpdate {
   available: Observable<UpdateAvailableEvent>
   activated: Observable<UpdateActivatedEvent>
   isEnabled: boolean
   checkForUpdate(): Promise<void>
   activateUpdate(): Promise<void>
 }

source: https://angular.io/api/service-worker/SwUpdate

À quoi servent ces propriétés et méthodes?

Cette observable émet chaque fois qu'une nouvelle version est trouvée. Il recherche une nouvelle version au démarrage ou à chaque fois que vous utilisez checkForUpdate().

Cette observable émet chaque fois qu'une nouvelle version a été activée. C'est normalement le cas lorsqu'une nouvelle version est disponible et que l'utilisateur recharge l'application. Vous pouvez l'utiliser pour afficher un didacticiel de la nouvelle version chaque fois qu'un utilisateur la voit pour la première fois.

Cette fonction est nécessaire pour être sûr que le navigateur actuel prend en charge les Services Worker et que le Wervice Worker est activé.

Cette méthode déclenche une vérification de mise à jour. Malheureusement, il ne renvoie aucune valeur. Vous devez donc l'utiliser en combinaison avec SwUpdate.available.

Cette méthode force le Service Worker à activer une nouvelle version, mais elle n'est toujours utilisée qu'au prochain chargement.

Tout d'abord, nous avons besoin d'un écran de démarrage, qui est visible par défaut.

Pour le Code on crée un service, ici PwaService

ng g s service/PwaService

ne pas oublier de faire un –dry-run avant pour contoler ce que l'on fait.

Puis on le remplit comme suit:

import { ApplicationRef, Injectable } from '@angular/core';
import { SwUpdate } from '@angular/service-worker';
// Bien mettre from as fromPromise depuis RXJS
import { Observable, of, timer, from as fromPromise } from 'rxjs';
import { mapTo, timeout, first, switchMap, catchError } from 'rxjs/operators';
 
@Injectable({
    providedIn: 'root'
})
export class PwaService {
 
    constructor(
        private appRef: ApplicationRef,
        private swUpdate: SwUpdate,
    ) {
        if (this.swUpdate.isEnabled) {
            this.appRef.isStable.pipe(
                first(isStable => isStable === true),
                switchMap(() => this.swUpdate.available),
            ).subscribe(() => {
                this.swUpdate.activateUpdate().then(() => document.location.reload());
            });
        }
    }
 
    checkForUpdate(): Observable<boolean> {
        const waitFor = 1000;
 
        if (this.swUpdate.isEnabled) {
            const available$ = this.swUpdate.available.pipe(
                mapTo(true),
                timeout(waitFor),
                catchError(() => of(false)),
            );
 
            return fromPromise(this.swUpdate.checkForUpdate()).pipe(
                switchMap(() => available$),
            );
        }
 
        return timer(waitFor).pipe(mapTo(false));
    }
}

Ensuite on crée un composant:

ng g c splash-screen-component

si on veut un Camel Case on ajoute un tiret avant la lettre souhaite en majuscule.

Comme il n'y a pas beaucoup de code html ou css on le mettre directement dans le composent en changeant la balise templateUrl en template.

// rajouter ces imports
// import du service crée PwaService que l'on vient de créer.
import { PwaService } from './service/PwaService/PwaService.service';
//import Angular
import { ApplicationRef, ChangeDetectionStrategy, ChangeDetectorRef, Component, OnInit } from '@angular/core';
 
@Component({
    selector: 'app-splash-screen',
    template: `
        <div class="splash-screen" *ngIf="show" @fadeOut>
             // Your custom splash screen design
        </div>
    `,
    animations: [
        // the fade-in/fade-out animation.
        trigger('fadeOut', [
            transition(':leave', [
                query(':leave', animateChild(), {optional: true}),
                animate(300, style({opacity: 0}))
            ]),
        ]),
    ],
    styles: [`
        .splash-screen {
            position: absolute;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            z-index: 9999;
        }
    `],
    changeDetection: ChangeDetectionStrategy.OnPush
})
export class SplashScreenComponent implements OnInit {
    show = true;
 
    constructor(
        private pwaService: PwaService,
        private cdr: ChangeDetectorRef,
        private appRef: ApplicationRef,
    ) {
    }
 
    ngOnInit() {
        this.pwaService.checkForUpdate()
            .subscribe(result => {
                this.show = result;
                this.cdr.detectChanges();
            });
    }
}

Cet écran de démarrage est un simple composant angulaire qui est au position: absolute-dessus de tout le reste. Lorsque nous sommes sûrs qu'aucune mise à jour n'est disponible, nous effaçons l'écran de démarrage.

Ce composant doit être ajouté à votre racine AppComponent.

Maintenant, nous avons besoin du PwaService:

Dans le constructeur de PwaService, nous souscrivons au flux disponible et chaque fois que nous trouvons une nouvelle version, nous l'activons et effectuons un document.location.reload() après.

Ensuite, nous implémentons une méthode checkForUpdate() qui fait plusieurs choses:

1. Il vérifie si les Service Worker sont activés. Sinon, il renvoie une observable qui correspond directement à false (il y a un court temps d'attente avec waitFor = 1000, car un écran de démarrage qui se cache immédiatement pourrait provoquer un effet de scintillement).
2. Lorsque les Service Worker sont activés, ils exécutes la méthode SwUpdate.checkForUpdate() et mappe le flux available , qui doit être émis immédiatement après la résolution de la promesse SwUpdate.checkForUpdate() lorsqu'une mise à jour est trouvée. Étant donné que nous n'obtenons aucune information lorsqu'aucune mise à jour n'est trouvée, le flux disponible obtient un délai d'expiration, qui correspond au moment false où aucune mise à jour n'est trouvée.

Après cela, nous devons simplement définir le résultat show de la méthode checkForUpdate(), qui est soit true ou false.

waitFor = 1000 dure 1 seconde au minimum pour que l'écran de démarrage ne scintille pas.

Bon codage! Merci pour la lecture !

Page dans la catégorie: