Precaching mit dem Angular-Service-Worker

Mit dem Angular Service Worker können Sie Ihre App in Netzwerken mit schlechter Verbindung schneller und zuverlässiger machen.

Minko Gechev

Umgang mit eingeschränkter Konnektivität

Wenn Nutzer nur eingeschränkten oder gar keinen Netzwerkzugriff haben, kann die Funktionalität der Webanwendung erheblich beeinträchtigt werden und oft schlägt fehl. 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 die Leistung einer App erheblich steigern und dafür sorgen, dass sie auch offline funktioniert.

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

Einführung in Angular Service Worker

Das Angular-Team bietet ein Service Worker-Modul mit Precaching-Funktionen, das gut in das Framework und die Angular-Befehlszeile integriert 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 und in package.json angezeigt werden. Im Schema von 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 können.)

Erstellen Sie jetzt das Projekt für die Produktion:

ng build --prod

Im Verzeichnis dist/service-worker-web-dev finden Sie eine Datei namens 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 Assets generiert, die zum Build-Zeitpunkt erstellt wurden.

Starten Sie nun im Verzeichnis mit den Produktions-Assets Ihrer App einen HTTP-Server, ö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 dem Mac), um die Entwicklertools zu öffnen.
2. Klicken Sie auf den Tab Netzwerk.

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

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

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

{
  "$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 die installMode für diese Asset-Gruppe auf prefetch gesetzt ist, speichert der Service Worker alle angegebenen Assets vorab im Cache, die jetzt auch PNG-Bilder enthalten.

Es ist ganz einfach, andere Assets anzugeben, die 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, da Assets in einem lokalen Cache gespeichert werden. Dadurch sind sie in schlechten Netzwerken zuverlässiger. So verwenden Sie das Precaching mit Angular und der Angular CLI:

1. Fügen Sie Ihrem Projekt das Paket @angular/pwa hinzu.
2. Steuern Sie, was der Service Worker im Cache speichert, indem Sie ngsw-config.json bearbeiten.