Verwenden von Angular zum Erstellen progressiver Webanwendungen (PWA)
Angular ist eine gute Wahl für die Entwicklung von PWA. Die Angular CLI bietet seit Version 1.7.0 Unterstützung für Servicemitarbeiter,
um schnell mit der Entwicklung von PWA-Anwendungen zu beginnen . Service Worker kann in einer Angular-Anwendung mithilfe einer JSON-Konfigurationsdatei konfiguriert werden, die viele Optionen und Funktionen bietet. Obwohl dies großartig klingt, hat die Verwendung von Angular Service Worker einen großen Nachteil: Die Logik kann nicht auf standardmäßige Weise erweitert werden.
Warum müssen Sie möglicherweise die Funktionen von NGSW erweitern?
In meinem Fall musste ich einen benutzerdefinierten Listener für Klickbenachrichtigungsereignisse registrieren, der die Klickaktion einer Push-Benachrichtigung ausführen würde. Ich muss zugeben, dass Angular Service Worker Push-Benachrichtigungen hervorragend empfängt und anzeigt - dieser Teil wird von der Datei ngsw-worker.js ohne Aufwand seitens des Entwicklers verarbeitet. Zunächst schien die einzige Möglichkeit, die von mir benötigte Logik bereitzustellen, darin zu bestehen, beim Erstellen der Anwendung Änderungen am Code der generierten Datei ngsw-worker.js vorzunehmen. Ich habe jedoch verstanden, dass diese Methode schlecht ist - sie muss jedes Mal unterstützt und überprüft werden, wenn Sie Änderungen an der ngsw-Konfigurationsdatei vornehmen. Glücklicherweise stellte sich heraus, dass das Problem leicht durch Eingabe von zwei zusätzlichen Dateien gelöst werden konnte.
Lösung
Beginnen wir mit der Erstellung von zwei zusätzlichen js-Dateien im Ordner
/ src .
sw-custom.js - Datei mit dem Ereignis-Listener:(function () { 'use strict'; self.addEventListener('notificationclick', (event) => { event.notification.close(); console.log('notification details: ', event.notification); }); }());
sw-master.js ist eine Datei, die NGSW mit unserer eigenen Logik kombiniert: importScripts('./ngsw-worker.js'); importScripts('./sw-custom.js');
Registrierung von Vermögenswerten
Durch das Erstellen neuer Skriptdateien müssen wir sicherstellen, dass Angular diese beim Erstellen berücksichtigt. Aus technischer Sicht handelt es sich hierbei um Assets, die der Datei favicon.ico ähneln, die von der Angular CLI beim Erstellen eines Projekts erstellt wurde. Wir können unsere zusätzlichen Ressourcen in der Datei angle.json (.angular-cli.json für ältere Versionen von Angular) registrieren:
{ ..., "assets": [ "src/favicon.ico", "src/assets", "src/manifest.json", "src/sw-master.js", "src/sw-reminders.js" ], ... }
Registrieren Sie das Service Worker-Skript erneut
Der letzte Schritt besteht darin, den Einstiegspunkt in den von Angular beim Start der Anwendung registrierten Service Worker zu ändern. Dazu müssen wir den Eintrag ServiceWorkerModule.register in app.module.ts wie folgt ändern:
ServiceWorkerModule.register('/sw-master.js', { enabled: environment.production })
Fassen Sie zusammen
Das ist alles, nach der Produktionsassemblierung der Anwendung werden unsere neuen Skriptdateien in den Ordner
/ dist kopiert und von der Anwendung bei der Registrierung von ServiceWorker verwendet. Wenn Sie mehr sehen möchten, können Sie auch in mein GitHub-Profil schauen, in dem ich
eine Angular-Beispielanwendung mit ServiceWorker veröffentlicht habe, die durch benutzerdefinierte Logik ergänzt wird.