Nous pompons Angular NGSW en utilisant une logique personnalisée dans Service Worker

Utilisation d'Angular pour créer des applications Web progressives (PWA)

Angular est un excellent choix pour développer PWA. La prise en charge des Service Workers est incluse dans la CLI angulaire depuis la version 1.7.0, pour commencer rapidement à développer des applications PWA . Service Worker peut être configuré dans une application angulaire à l'aide d'un fichier de configuration json qui fournit de nombreuses options et fonctions. Bien que cela semble génial, il y a un gros inconvénient à utiliser Angular Service Worker - sa logique ne peut pas être étendue de manière standard.

Pourquoi pourriez-vous avoir besoin d'étendre les capacités de NGSW?

Dans mon cas, je devais enregistrer un écouteur d'événement de notification de clic personnalisé qui gérerait l'action de clic d'une notification push. Je dois admettre que Angular Service Worker fait un excellent travail de réception et d'affichage des notifications push - cette partie est gérée par le fichier ngsw-worker.js sans aucun effort de la part du développeur. Et d'abord, il semblait que la seule façon de fournir la logique dont j'avais besoin était d'apporter des modifications au code du fichier ngsw-worker.js généré lors de la création de l'application. Mais j'ai réalisé que cette méthode est mauvaise - elle doit être prise en charge et vérifiée chaque fois que vous apportez des modifications au fichier de configuration ngsw. Heureusement, il s'est avéré que le problème était facilement résolu en entrant deux fichiers supplémentaires.

Solution

Commençons par créer deux fichiers js supplémentaires dans le dossier / src .

sw-custom.js - fichier contenant l'écouteur d'événement:

(function () { 'use strict'; self.addEventListener('notificationclick', (event) => { event.notification.close(); console.log('notification details: ', event.notification); }); }()); 

sw-master.js est un fichier qui combine NGSW avec notre propre logique:

 importScripts('./ngsw-worker.js'); importScripts('./sw-custom.js'); 

Enregistrement des actifs

En créant de nouveaux fichiers de script, nous devons nous assurer qu'Angular les prend en compte lors de la construction. D'un point de vue technique, ce sont des actifs similaires au fichier favicon.ico créé par la CLI angulaire lors de la création d'un projet. Nous pouvons enregistrer nos ressources supplémentaires dans le fichier angular.json (.angular-cli.json pour les anciennes versions d'Angular):

 { ..., "assets": [ "src/favicon.ico", "src/assets", "src/manifest.json", "src/sw-master.js", "src/sw-reminders.js" ], ... } 

Réenregistrer le script Service Worker

La dernière étape consiste à changer le point d'entrée en Service Worker enregistré par Angular lors du démarrage de l'application. Pour ce faire, nous devons modifier l'entrée ServiceWorkerModule.register dans app.module.ts comme suit:

 ServiceWorkerModule.register('/sw-master.js', { enabled: environment.production }) 

Résumer

C'est tout, après l'assemblage de production de l'application, nos nouveaux fichiers de script seront copiés dans le dossier / dist et utilisés par l'application lors de l'enregistrement de ServiceWorker. Si vous voulez en voir plus, vous pouvez également consulter mon profil GitHub, où j'ai publié un exemple d'application angulaire avec ServiceWorker complété par une logique personnalisée.