Precaching mit dem Angular-Service-Worker

Verwenden Sie den Service Worker von Angular, um Ihre App in Netzwerken mit schlechter Verbindung schneller und zuverlässiger zu machen.

Minko Gechev

Umgang mit eingeschränkter Konnektivität

Wenn Nutzer nur eingeschränkten oder gar keinen Netzwerkzugriff haben, können die Funktionen von Webanwendungen erheblich beeinträchtigt werden und häufig fehlschlagen. Wenn Sie einen Service Worker für das Precaching verwenden, können Sie Netzwerkanfragen abfangen und Antworten direkt aus einem lokalen Cache senden, anstatt sie aus dem Netzwerk abzurufen. Sobald die Assets Ihrer App im Cache gespeichert wurden, kann diese Methode eine App wirklich beschleunigen und dafür sorgen, dass sie auch dann funktioniert, wenn der Nutzer offline ist.

In diesem Beitrag erfahren Sie, wie Sie das Precaching in einer Angular-App einrichten. Dabei wird davon ausgegangen, dass Sie mit Precaching und Service Workern im Allgemeinen vertraut sind. Wenn Sie Ihr Wissen auffrischen möchten, lesen Sie den Beitrag Service Worker und die Cache Storage API.

Einführung in Angular-Service Worker

Das Angular-Team bietet ein Service Worker-Modul mit Precaching-Funktionalität an, das gut in das Framework und die Angular-Befehlszeile eingebunden ist.

Führen Sie den folgenden Befehl in der Befehlszeile aus, um den Service Worker hinzuzufügen:

ng add @angular/pwa

@angular/service-worker und @angular/pwa sollten jetzt in der App installiert sein und in package.json angezeigt werden. Durch das Schema ng-add wird dem Projekt außerdem eine Datei namens ngsw-config.json hinzugefügt, mit der Sie den Service Worker konfigurieren können. Die Datei enthält eine Standardkonfiguration, die Sie etwas später anpassen werden.

Erstellen Sie nun das Projekt für die Produktion:

ng build --prod

Im Verzeichnis dist/service-worker-web-dev befindet sich eine Datei mit dem Namen ngsw.json. Diese Datei teilt dem Angular-Service-Worker mit, wie die Assets in der App im Cache gespeichert werden sollen. Die Datei wird während des Build-Prozesses basierend auf der Konfiguration (ngsw-config.json) und den bei der Build-Erstellung erstellten Assets generiert.

Starten Sie nun einen HTTP-Server im Verzeichnis, das die Produktions-Assets Ihrer App enthält, öffnen Sie die öffentliche URL und sehen Sie sich die Netzwerkanfragen in den Chrome-Entwicklertools an:

1. Drücken Sie „Strg + Umschalttaste + J“ (oder „Befehlstaste + Option + J“ auf einem Mac), um die Entwicklertools zu öffnen.
2. Klicken Sie auf den Tab Netzwerk.

Auf dem Tab „Network“ gibt es eine Reihe statischer Assets, die direkt über das Skript ngsw-worker.js im Hintergrund heruntergeladen werden:

Dies ist der Angular-Service-Worker, der die statischen Assets, die in der generierten Manifestdatei ngsw.json angegeben sind, im Cache speichert.

Ein wichtiges Asset fehlt jedoch: nyan.png. Um dieses Bild vorab im Cache zu speichern, müssen Sie ein Muster hinzufügen, das es ngsw-config.json im Stammverzeichnis des Arbeitsbereichs enthält:

{
  "$schema": "./node_modules/@angular/service-worker/config/schema.json",
  "index": "/index.html",
  "assetGroups": [
    {
      "name": "app",
      "installMode": "prefetch",
      "resources": {
      "files": [
        "/favicon.ico",
        "/index.html",
        "/*.css",
        "/*.js",
        "/assets/*.png"
        ]
      }
    },
    ...
}

Durch diese Änderung werden alle PNG-Bilder im Ordner „/assets“ der Asset-Gruppe „app“ hinzugefügt. Da „installMode“ für diese Asset-Gruppe auf prefetch gesetzt ist, speichert der Service Worker alle angegebenen Assets vorab im Cache. Dazu gehören jetzt auch PNG-Bilder.

Genauso einfach können Sie festlegen, dass andere Assets vorab im Cache gespeichert werden sollen: Aktualisieren Sie die Muster in der Ressourcen-Asset-Gruppe app.

Fazit

Wenn Sie einen Service Worker für das Precaching verwenden, können Sie die Leistung Ihrer Anwendungen verbessern, indem Assets in einem lokalen Cache gespeichert werden. Dadurch werden sie in schlechten Netzwerken zuverlässiger. So verwenden Sie Precaching mit Angular und der Angular CLI:

1. Fügen Sie Ihrem Projekt das Paket @angular/pwa hinzu.
2. Durch Bearbeiten von ngsw-config.json können Sie steuern, was der Service Worker im Cache speichert.