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 häufig fehlerhaft sein. Wenn Sie ein Service Worker zum Vorab-Caching verwenden, können Sie Netzwerkanfragen abfangen und Antworten direkt aus einem lokalen Cache liefern, anstatt sie aus dem Netzwerk abzurufen. Sobald die Assets Ihrer App im Cache gespeichert sind, kann dieser Ansatz eine App erheblich beschleunigen und dafür sorgen, dass sie auch dann funktioniert, wenn der Nutzer offline ist.

In diesem Beitrag wird beschrieben, wie Sie das Precaching in einer Angular-Anwendung einrichten. Es wird davon ausgegangen, dass Sie mit Precaching und Service Workers im Allgemeinen vertraut sind. Wenn Sie noch einmal nachlesen möchten, lesen Sie den Artikel Service Worker und Cache Storage API.

Einführung in den Angular-Dienst-Worker

Das Angular-Team bietet ein Service Worker-Modul mit Pre-Caching-Funktionen, das gut in das Framework und die Angular-Befehlszeile (CLI) integriert ist.

Führen Sie den folgenden Befehl in der Befehlszeile aus, um den Dienst-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. Das ng-add-Schema fügt dem Projekt außerdem eine Datei namens ngsw-config.json hinzu, mit der Sie den Dienst-Worker konfigurieren können. Die Datei enthält eine Standardkonfiguration, die Sie etwas später anpassen.

Erstellen Sie nun das Projekt für die Produktion:

ng build --prod

Im Verzeichnis dist/service-worker-web-dev finden Sie eine Datei namens ngsw.json. In dieser Datei wird dem Angular-Dienstworker mitgeteilt, wie die Assets in der App im Cache gespeichert werden sollen. Die Datei wird während des Build-Prozesses anhand der Konfiguration (ngsw-config.json) und der zur Buildzeit erstellten Assets generiert.

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

Auf dem Tab „Netzwerk“ werden eine Reihe von statischen Assets direkt im Hintergrund über das ngsw-worker.js-Script heruntergeladen:

Dies ist der Angular-Dienstworker, der die in der generierten ngsw.json-Manifestdatei angegebenen statischen Assets vorab im Cache speichert.

Ein wichtiges Asset fehlt jedoch: nyan.png. Wenn Sie dieses Bild im Voraus im Cache speichern möchten, müssen Sie ngsw-config.json, das sich im Stammverzeichnis des Arbeitsbereichs befindet, ein Muster hinzufügen, das es 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 der Ressource app hinzugefügt. Da der installMode für diese Asset-Gruppe auf prefetch festgelegt ist, werden alle angegebenen Assets vom Service Worker vorab im Cache gespeichert, einschließlich PNG-Bildern.

Das Festlegen anderer Assets, die vorab im Cache gespeichert werden sollen, ist genauso einfach: Aktualisieren Sie die Muster in der Asset-Gruppe „app“.

Fazit

Wenn Sie einen Service Worker für das Vorab-Caching verwenden, können Sie die Leistung Ihrer Apps verbessern, indem Sie Assets in einem lokalen Cache speichern. Dadurch sind sie in schlechten Netzwerken zuverlässiger. So verwenden Sie das Pre-Caching mit Angular und der Angular-Befehlszeile:

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