Aktualisieren

Sie haben Ihre PWA veröffentlicht. Einige Nutzer verwenden sie über den Browser, andere installieren sie auf ihren Geräten. Wenn Sie die App aktualisieren, ist es wichtig, Best Practices anzuwenden, um Fallstricke zu vermeiden.

Sie können Folgendes aktualisieren:

• App-Daten.
• Assets sind bereits auf Geräten im Cache gespeichert.
• Die Service Worker-Datei oder ihre Abhängigkeiten
• Manifestmetadaten.

Schauen wir uns die Best Practices für jedes dieser Elemente an.

Daten aktualisieren

Um Daten zu aktualisieren, z. B. die in IndexedDB gespeicherten, können Sie Tools wie Fetch, WebRTC oder die WebSockets API verwenden. Wenn Ihre App Offlinefunktionen unterstützt, sollten Sie auch die Daten, die diese Funktionen unterstützen, auf dem neuesten Stand halten.

In kompatiblen Browsern gibt es die Möglichkeit, Daten nicht nur zu synchronisieren, wenn der Nutzer die PWA öffnet, sondern auch im Hintergrund. Folgende Optionen sind verfügbar:

• Hintergrundsynchronisierung: Speichert fehlgeschlagene Anfragen und wiederholt sie mithilfe der Synchronisierung des Service Workers.
• Regelmäßige Hintergrundsynchronisierung im Web: Daten werden regelmäßig zu bestimmten Zeiten im Hintergrund synchronisiert. Dadurch kann die App aktualisierte Daten bereitstellen, auch wenn der Nutzer die App noch nicht geöffnet hat.
• Hintergrundabruf: Lädt große Dateien herunter, auch wenn die PWA geschlossen ist.
• Web-Push: Sendet eine Nachricht vom Server, mit der der Service Worker aktiviert wird, und benachrichtigt den Nutzer. Dies wird allgemein als „Push-Benachrichtigung“ bezeichnet. Für diese API ist die Berechtigung des Nutzers erforderlich.

Alle diese APIs werden über den Service Worker-Kontext ausgeführt. Sie sind derzeit nur in Chromium-basierten Browsern, unter Android und auf Desktop-Betriebssystemen verfügbar. Wenn Sie eine dieser APIs verwenden, können Sie Code im Service Worker-Thread ausführen. um Daten von Ihrem Server herunterzuladen und Ihre IndexedDB-Daten zu aktualisieren.

Assets werden aktualisiert

Das Aktualisieren von Assets umfasst alle Änderungen an Dateien, die Sie zum Rendern der Benutzeroberfläche der App verwenden, z. B. HTML, CSS, JavaScript und Bilder. Zum Beispiel eine Änderung in der App-Logik, ein Bild, das Teil Ihrer Benutzeroberfläche ist, oder ein CSS-Stylesheet.

Muster aktualisieren

Im Folgenden finden Sie einige gängige Muster für die Verarbeitung von App-Updates. Sie können den Prozess jedoch jederzeit an Ihre eigenen Anforderungen anpassen:

• Vollständige Aktualisierung: Bei jeder Änderung, auch bei geringfügigen Änderungen, wird der gesamte Cache-Inhalt ersetzt. Dieses Muster ahmt nach, wie gerätespezifische Apps Updates verarbeiten. Es verbraucht mehr Bandbreite und wird mehr Zeit in Anspruch nehmen.
• Aktualisierung von geänderten Assets: Nur die Assets, die seit der letzten Aktualisierung geändert wurden, werden im Cache ersetzt. Sie wird häufig mithilfe einer Bibliothek wie Workbox implementiert. Dabei werden eine Liste der im Cache gespeicherten Dateien, eine Hash-Darstellung der Datei und Zeitstempel erstellt. Anhand dieser Informationen vergleicht der Service Worker diese Liste mit den im Cache gespeicherten Assets und entscheidet, welche Assets aktualisiert werden sollen.
• Aktualisierung einzelner Inhalte: Jedes Asset wird bei einer Änderung einzeln aktualisiert. Die im Kapitel zur Auslieferung beschrieben veraltete Strategie bei der erneuten Überprüfung ist ein Beispiel für die Aktualisierung einzelner Assets.

Aktualisierungszeitpunkt

Außerdem empfiehlt es sich, einen geeigneten Zeitpunkt zu finden, um nach Updates zu suchen und diese anzuwenden. Sie haben unter anderem folgende Möglichkeiten:

• Wenn der Service Worker aufwacht. Derzeit gibt es kein zu überwachendes Ereignis, aber der Browser führt beim Aufwachen jeglichen Code im globalen Geltungsbereich des Service Workers aus.
• Im Hauptfenster der PWA, nachdem der Browser die Seite geladen hat, damit die App nicht langsamer geladen wird.
• Wenn Hintergrundereignisse ausgelöst werden, z. B. wenn Ihre PWA eine Push-Benachrichtigung erhält oder eine Hintergrundsynchronisierung ausgelöst wird. Sie können den Cache dann aktualisieren und Ihre Nutzer erhalten die neue Version des Assets, wenn sie die App das nächste Mal öffnen.

Livemeldungen

Du kannst auch festlegen, ob ein Update angewendet werden soll, wenn die App geöffnet (live) oder geschlossen ist. Bei diesem Ansatz werden keine Änderungen vorgenommen und die neuen Versionen werden beim nächsten Laden verwendet, auch wenn neue Assets heruntergeladen wurden.

Sobald das Asset im Cache aktualisiert wurde, ersetzt Ihre PWA das Asset im aktuellen Ladevorgang. Das ist eine komplexe Aufgabe, die in diesem Kurs nicht behandelt wird. Beispiele für die Implementierung dieses Updates sind livereload-js und die CSSStyleSheet.Replace() API für CSS-Asset-Updates.

Service Worker aktualisieren

Der Browser löst einen Aktualisierungsalgorithmus aus, wenn sich Ihr Service Worker oder seine Abhängigkeiten ändern. Der Browser erkennt Updates anhand eines Byte für Byte-Vergleich zwischen den im Cache gespeicherten Dateien und den Ressourcen aus dem Netzwerk.

Anschließend versucht der Browser, die neue Version des Service Workers zu installieren, und der neue Service Worker befindet sich im Status waiting, wie im Kapitel Service Worker beschrieben. Bei der neuen Installation wird das Ereignis install für den neuen Service Worker ausgeführt. Wenn Sie in diesem Event-Handler Assets im Cache speichern, werden die Assets ebenfalls erneut im Cache gespeichert.

Service Worker-Änderungen erkennen

Um zu erkennen, ob ein neuer Service Worker bereit und installiert ist, verwenden wir das Ereignis updatefound aus der Service Worker-Registrierung. Dieses Ereignis wird ausgelöst, wenn die Installation des neuen Service Workers beginnt. Wir müssen warten, bis sich der Status mit dem statechange-Ereignis in installed ändert. sehen Sie sich Folgendes an:

async function detectSWUpdate() {
  const registration = await navigator.serviceWorker.ready;

  registration.addEventListener("updatefound", event => {
    const newSW = registration.installing;
    newSW.addEventListener("statechange", event => {
      if (newSW.state == "installed") {
         // New service worker is installed, but waiting activation
      }
    });
  })
}

Überschreiben erzwingen

Der neue Service Worker wird installiert, wartet aber standardmäßig auf seine Aktivierung. Durch das Warten wird verhindert, dass der neue Service Worker alte Clients übernimmt, die möglicherweise nicht mit der neuen Version kompatibel sind.

Auch wenn dies nicht empfohlen wird, kann der neue Service Worker diese Wartezeit überspringen und die Aktivierung sofort starten.

self.addEventListener("install", event => {
   // forces a service worker to activate immediately
   self.skipWaiting();
  });

self.addEventListener("activate", event => {
  // when this SW becomes activated, we claim all the opened clients
  // they can be standalone PWA windows or browser tabs
  event.waitUntil(clients.claim());
});

Das controllerchange-Ereignis wird ausgelöst, wenn sich der Service Worker ändert, der die aktuelle Seite steuert. Beispiel: Ein neuer Worker hat das Warten übersprungen und ist nun zum neuen aktiven Worker geworden.

navigator.serviceWorker.addEventListener("controllerchange", event => {
   // The service worker controller has changed
 });

Metadaten aktualisieren

Sie können auch die Metadaten Ihrer App aktualisieren, die hauptsächlich im Web-App-Manifest festgelegt sind. Sie können beispielsweise das Symbol, den Namen oder die Start-URL aktualisieren oder eine neue Funktion wie App-Verknüpfungen hinzufügen. Aber was geschieht mit all den Nutzern, die die App bereits installiert haben und auf ihren Geräten das alte Symbol verwenden? Wie und wann erhalten sie die aktualisierte Version?

Die Antwort hängt von der Plattform ab. Sehen wir uns die verfügbaren Optionen an.

Safari in iOS-, iPadOS- und Android-Browsern

Auf diesen Plattformen können Sie die neuen Manifest-Metadaten nur erhalten, indem Sie die App über den Browser neu installieren.

Google Chrome für Android mit WebAPK

Wenn der Nutzer Ihre PWA für die meisten Chrome PWA-Installationen über Google Chrome und aktiviertes WebAPK installiert hat, wird das Update mithilfe eines Algorithmus erkannt und angewendet. Weitere Informationen findest du in diesem Artikel zu Manifestaktualisierungen.

Hier noch einige Hinweise zum Ablauf:

Wenn der Nutzer deine PWA nicht öffnet, wird ihr WebAPK nicht aktualisiert. Wenn der Server nicht mit der Manifestdatei antwortet (ein 404-Fehler liegt vor), sucht Chrome mindestens 30 Tage lang nicht nach Updates, auch wenn der Nutzer die PWA öffnet.

Rufe about:webapks in Chrome für Android auf, um den Status „Update erforderlich“ zu sehen und fordern Sie eine Aktualisierung an. Im Kapitel Tools und Fehlerbehebung finden Sie weitere Informationen zu diesem Debugging-Tool.

Samsung Internet auf Android-Geräten mit WebAPK

Der Vorgang ist ähnlich wie bei der Chrome-Version. Wenn das PWA-Manifest aktualisiert werden muss, wird das WebAPK in diesem Fall innerhalb der nächsten 24 Stunden nach dem Mining des aktualisierten WebAPK über WLAN aktualisiert.

Google Chrome und Microsoft Edge auf dem Computer

Auf Desktop-Geräten bestimmt der Browser beim Starten der PWA, wann das lokale Manifest zuletzt auf Änderungen geprüft wurde. Wenn das Manifest seit dem letzten Browserstart nicht überprüft wurde oder in den letzten 24 Stunden nicht überprüft wurde, sendet der Browser eine Netzwerkanfrage für das Manifest und vergleicht es dann mit der lokalen Kopie.

Wenn ausgewählte Unterkünfte aktualisiert werden, wird eine Aktualisierung ausgelöst, nachdem alle Fenster geschlossen wurden.

Nutzer benachrichtigen

Einige Aktualisierungsstrategien erfordern eine Aktualisierung oder eine neue Navigation der Clients. Sie sollten den Nutzer darüber informieren, dass ein Update bereitsteht, aber ihm die Möglichkeit geben, die Seite zu aktualisieren, wenn es ihm am besten passt.

Um den Nutzer zu informieren, hast du folgende Möglichkeiten:

• Verwenden Sie die DOM- oder Canvas API, um einen Hinweis auf dem Bildschirm zu rendern.
• Verwenden Sie die Web Notifications API. Diese API ist Teil der Push-Berechtigung zum Generieren einer Benachrichtigung im Betriebssystem. Dazu müssen Sie eine Web-Push-Berechtigung anfordern, auch wenn Sie nicht das Push-Messaging-Protokoll von Ihrem Server verwenden. Das ist die einzige Option, die verfügbar ist, wenn die PWA nicht geöffnet ist.
• Verwenden Sie die Badging API, um zu zeigen, dass Updates über das installierte Symbol der PWA verfügbar sind.

.

Weitere Informationen zur Badging API

Mit der Badging API können Sie das Symbol Ihrer PWA mit einer Logonummer oder in kompatiblen Browsern mit einem Logopunkt versehen. Ein Badge-Punkt ist eine kleine Markierung innerhalb des installierten Symbols, die darauf hinweist, dass etwas in der App wartet.

Sie müssen setAppBadge(count) für das navigator-Objekt aufrufen, um eine Logonummer festzulegen. Sie können dies aus dem Fenster oder dem Kontext des Service Workers tun, wenn Sie wissen, dass es ein Update gibt, um den Nutzer zu benachrichtigen.

let unreadCount = 125;
navigator.setAppBadge(unreadCount);

Um das Logo zu entfernen, rufen Sie clearAppBadge() für dasselbe Objekt auf:

navigator.clearAppBadge();

Ressourcen

• Service Worker-Lebenszyklus
• So werden Aktualisierungen des Web-App-Manifests in Chrome verarbeitet
• PWAs im Hintergrund synchronisieren und aktualisieren
• Mehr Offline-Nutzung mit der Periodic Background Sync API
• Push API
• Push-Benachrichtigungen – Übersicht
• Kennzeichnung für App-Symbole
• Workbox 4: Ablauf „Die Aktualisierung auf die Update-Version aktualisieren“ mithilfe des „workbox-window“-Moduls implementieren