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.
  • Bereits auf Geräten im Cache gespeicherte Assets.
  • 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 wie die in IndexedDB gespeicherten Daten zu aktualisieren, können Sie Tools wie Fetch, WebRTC oder WebSockets API verwenden. Falls Ihre App Offlinefunktionen unterstützt, denken Sie daran, die entsprechenden Daten auch auf dem neuesten Stand zu halten.

In kompatiblen Browsern gibt es Optionen zum Synchronisieren von Daten – nicht nur, wenn der Nutzer die PWA öffnet, sondern auch im Hintergrund. Diese Optionen sind:

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

Alle diese APIs werden im 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 beispielsweise Daten von Ihrem Server herunterzuladen und Ihre IndexedDB-Daten zu aktualisieren.

Assets aktualisieren

Bei der Aktualisierung von Assets werden alle Änderungen an Dateien vorgenommen, die Sie zum Rendern der Benutzeroberfläche der App verwenden, z. B. HTML-, CSS-, JavaScript- und Bilder-Dateien. Dies kann beispielsweise eine Änderung in der App-Logik, ein Bild, das Teil Ihrer Benutzeroberfläche ist, oder ein CSS-Stylesheet sein.

Muster aktualisieren

Hier sind einige gängige Muster für die Verarbeitung von App-Updates. Sie können den Prozess jedoch jederzeit an Ihre eigenen Bedürfnisse anpassen:

  • Vollständige Aktualisierung: Bei jeder Änderung, auch wenn diese nur geringfügig ist, wird der gesamte Cache-Inhalt ersetzt. Dieses Muster ahmt nach, wie gerätespezifische Apps Updates verarbeiten. Es verbraucht mehr Bandbreite und benötigt mehr Zeit.
  • Aktualisierung von geänderten Assets: Nur die Assets, die sich seit der letzten Aktualisierung geändert haben, werden im Cache ersetzt. Es wird häufig mit einer Bibliothek wie Workbox implementiert. Dazu 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 Assets: Jedes Asset wird einzeln aktualisiert, wenn es sich ändert. Die im Kapitel zur Auslieferung beschriebene Strategie für eine überholte Neuvalidierung ist ein Beispiel für die individuelle Aktualisierung von 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 aktiviert wird. Es gibt kein Ereignis, das auf diesen Moment wartet, aber der Browser führt Code aus, der sich im globalen Bereich des Service Workers befindet, wenn er aktiviert wird.
  • Im Hauptfensterkontext Ihrer PWA nach dem Laden der Seite im Browser, um zu vermeiden, dass die App langsamer geladen wird.
  • Wenn Hintergrundereignisse ausgelöst werden, z. B. wenn Ihre PWA eine Push-Benachrichtigung erhält oder eine Hintergrundsynchronisierung ausgelöst wird. Wenn Sie dann den Cache aktualisieren, erhalten Ihre Nutzer beim nächsten Öffnen der App die neue Version des Assets.

Livemeldungen

Sie können auch festlegen, ob ein Update angewendet werden soll, wenn die App geöffnet (live) oder geschlossen ist. Mit dem geschlossenen App-Ansatz werden keine Änderungen vorgenommen, obwohl die App neue Assets heruntergeladen hat. Die neuen Versionen werden beim nächsten Laden verwendet.

Bei einem Liveupdate ersetzt die PWA das Asset beim aktuellen Ladevorgang, sobald das Asset im Cache aktualisiert wurde. Es ist eine komplexe Aufgabe, die in diesem Kurs nicht behandelt wird. Einige Tools zur Implementierung dieses Updates sind livereload-js und das CSS-Asset-Update CSSStyleSheet.replace() API.

Service Worker aktualisieren

Der Browser löst einen Aktualisierungsalgorithmus aus, wenn sich der Service Worker oder seine Abhängigkeiten ändern. Der Browser erkennt Aktualisierungen anhand eines Byte-für-Byte-Vergleichs 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 Warten, wie im Kapitel Service Worker beschrieben. Bei der neuen Installation wird das install-Ereignis für den neuen Service Worker ausgeführt. Wenn Sie Assets in diesem Event-Handler im Cache speichern, werden die Assets ebenfalls noch einmal im Cache gespeichert.

Service Worker-Änderungen erkennen

Mit dem Ereignis updatefound aus der Service Worker-Registrierung können wir feststellen, ob ein neuer Service Worker bereit und installiert ist. 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:

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 die Aktivierung. Die Wartezeit verhindert, dass der neue Service Worker alte Clients übernimmt, die mit der neuen Version möglicherweise nicht kompatibel sind.

Obwohl 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 Ereignis controllerchange wird ausgelöst, wenn sich der Service Worker ändert, der die aktuelle Seite steuert. Beispiel: Ein neuer Worker hat das Warten übersprungen und wird zum neuen aktiven Worker.

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 werden. Aktualisieren Sie beispielsweise das Symbol, den Namen oder die Start-URL des Symbols oder fügen Sie eine neue Funktion wie App-Verknüpfungen hinzu. Aber was passiert mit all den Nutzern, die die App bereits mit dem alten Symbol auf ihren Geräten installiert haben? 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 für iOS-, iPadOS- und Android-Browser

Auf diesen Plattformen besteht die einzige Möglichkeit, die neuen Manifest-Metadaten zu erhalten, darin, die App über den Browser neu zu installieren.

Google Chrome für Android mit WebAPK

Wenn der Nutzer Ihre PWA auf Android-Geräten in Google Chrome installiert und WebAPK aktiviert hat (die meisten PWA-Installationen in Chrome), wird das Update erkannt und anhand eines Algorithmus angewendet. Weitere Informationen finden Sie in diesem Artikel zu Manifest-Aktualisierungen.

Einige zusätzliche Hinweise zum Prozess:

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

Gehen Sie in Chrome für Android zu about:webapks, um den Status der Markierung „Update erforderlich“ zu sehen und ein Update anzufordern. Im Kapitel Tools und Fehlerbehebung finden Sie weitere Informationen zu diesem Debugging-Tool.

Samsung Internet auf Android mit WebAPK

Der Vorgang ähnelt der bei der Chrome-Version. Wenn das PWA-Manifest in diesem Fall eine Aktualisierung erfordert, wird das WebAPK innerhalb der nächsten 24 Stunden über WLAN aktualisiert, nachdem das aktualisierte WebAPK erstellt wurde.

Google Chrome und Microsoft Edge für Desktop-Computer

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

Wenn ausgewählte Eigenschaften aktualisiert werden, löst dies ein Update aus, nachdem alle Fenster geschlossen wurden.

Nutzer benachrichtigen

Einige Aktualisierungsstrategien erfordern eine Aktualisierung oder eine neue Navigation von den Clients. Sie sollten den Nutzer wissen lassen, dass ein Update für ihn bereitsteht, aber ihm die Möglichkeit geben, die Seite zu aktualisieren, wenn es für ihn am besten passt.

Es gibt folgende Möglichkeiten, den Nutzer zu informieren:

  • Verwenden Sie die DOM oder die Canvas API, um einen Hinweis auf dem Bildschirm zu rendern.
  • Verwende die Web Notifications API. Diese API ist Teil der Push-Berechtigung zum Generieren einer Benachrichtigung im Betriebssystem. Sie müssen eine Web-Push-Berechtigung anfordern, um ihn zu verwenden, auch wenn Sie nicht das Push-Messaging-Protokoll Ihres Servers verwenden. Dies ist die einzige Option, wenn die PWA nicht geöffnet ist.
  • Mit der Badging API kannst du prüfen, ob Updates über das Symbol „Installierte PWA“ der PWA verfügbar sind.

Eine Aktualisierungsbenachrichtigung, die im DOM angezeigt wird..

Weitere Informationen zur Badging API

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

Beispiel von Twitter mit acht Benachrichtigungen und einer weiteren App mit einem Kennzeichensymbol

Du musst setAppBadge(count) für das navigator-Objekt aufrufen, um eine Badgenummer festzulegen. Sie können dies aus dem Fenster- oder Service Worker-Kontext heraus tun, wenn Sie wissen, dass es eine Aktualisierung für die Benachrichtigung des Nutzers gibt.

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

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

navigator.clearAppBadge();

Ressourcen