Progressive Web-Apps: Service Worker-Includes

1. Willkommen

In diesem Lab fügen Sie einer vorhandenen Webanwendung eine Streaming-Routenantwort hinzu, um die Leistung zu verbessern. Dies ist das siebte in einer Reihe von Codelabs für den Progressive Web App-Workshop. Das vorherige Codelab war Empowering your PWA. Es gibt noch ein weiteres Codelab in dieser Reihe.

Lerninhalte

• Streamingantwort zu einem Service Worker hinzufügen

Wichtige Informationen

• JavaScript

Voraussetzungen

• Ein Browser, der Service Worker und Streams unterstützt

2. Einrichtung

Klonen oder laden Sie zuerst den Starter-Code herunter, der für dieses Codelab benötigt wird:

Repository klonen

Zip-Datei herunterladen

Wenn Sie das Repository klonen, achten Sie darauf, dass Sie sich im pwa06--service-worker-includes-Branch befinden. Die ZIP-Datei enthält auch den Code für diesen Zweig.

Für diese Codebasis ist Node.js 14 oder höher erforderlich. Sobald Sie den Code haben, führen Sie npm ci über die Befehlszeile im Ordner des Codes aus, um alle erforderlichen Abhängigkeiten zu installieren. Führen Sie dann npm start aus, um den Entwicklungsserver für das Codelab zu starten.

Die README.md-Datei des Quellcodes enthält eine Erklärung für alle verteilten Dateien. Außerdem sind die folgenden Dateien wichtig, mit denen Sie in diesem Codelab arbeiten werden:

Schlüsseldateien

• js/preview.js – Vorschau der JavaScript-Datei der Seite
• service-worker.js: Die Service Worker-Datei der PWA

3. Streaming-Vorschau

Die Vorschauseite lässt sich in drei klare Bereiche unterteilen: den Kopf, den kompilierten Textkörper und den Fuß. Derzeit wird der kompilierte Text clientseitig gerendert, aber es gibt keinen Grund dafür. Verschieben wir es in den Service Worker.

Um den Text zu erstellen, wird eine asynchrone Inhaltssuche durchgeführt. Da asynchrone Vorgänge in einer Navigationsantwort aufwendig sind, bietet es sich an, den bekannten Inhalt zuerst an den Browser zu streamen.

Leeren Sie dazu zuerst den Inhalt in js/preview.js, damit die Kompilierung nicht mehr erfolgt. Führen Sie dann in service-worker.js folgende Schritte aus:

• Benannten Export strategy aus workbox-streams als streamsStrategy importieren
• Importieren Sie den benannten Export openDB aus idb und den benannten Export marked aus marked.
• Fügen Sie vor der Routenregistrierung für Navigationen eine neue Routenregistrierung hinzu.
  • Es sollte geprüft werden, ob pathname der URL /preview ist.
  • Es sollte eine Streamingstrategie verwendet werden, die
    1. Antworte mit dem Inhalt von preview/index.html über den Inhaltsbereich des main-Tags.
    2. Antworte mit einer Funktion, die die IndexedDB settings-store öffnet, den Inhalt aus dem settings-Objektspeicher abruft und die gerenderte Markdown-Version dieses Inhalts zurückgibt.
    3. Antworte mit den schließenden Tags main, body und html.

Die Registrierung der Streamingroute muss vor der regulären Navigationsregistrierung erfolgen. Routenregistrierungen werden in der Reihenfolge ausgeführt, in der sie im Service Worker enthalten sind. Wenn Sie es also andersherum machen, wird die Streaming-Registrierung nie ausgeführt, da die Anfrage bereits verarbeitet wurde.

Nachdem Sie die Streaming-Antwort eingerichtet haben, kehren Sie zurück und öffnen Sie die Website-Vorschau in Ihrem Browser. Der Seiteninhalt wird jetzt direkt vom Service Worker gerendert. Es ist kein clientseitiger Code erforderlich.

Wenn die Änderungen nicht angezeigt werden, prüfen Sie, ob Ihr neuer Service Worker von Ihrer Seite verwendet wird. Sehen Sie dazu in den Chrome-Entwicklertools im Bereich Applications auf dem Tab Service Workers nach, welcher Service Worker aktiv ist.

4. Glückwunsch!

Sie haben gelernt, wie Sie Ihre Web-App mithilfe von Service Workern und der Cache Storage API offline verfügbar machen.

Das nächste Codelab in der Reihe ist Mit Workern arbeiten.