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.

Hinweis : Die Web Push API ist die einzige API, mit der Nutzer im Hintergrund benachrichtigt werden. Die push-Nachricht kann eine kleine Datenmenge enthalten: Sie kann eine Nutzlast von bis zu 2 KB übertragen.

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.

Warnung : Achte bei der Suche nach Updates darauf, den Ladevorgang nicht zu unterbrechen und die Leistung deiner App dadurch nicht zu beeinträchtigen. Warte mit dem Rendern der App nicht, bis eine Updateprüfung durchgeführt wurde. Dies beeinträchtigt die Nutzerfreundlichkeit und wirkt sich auf deine Core Web Vitals aus. Wenn Sie einen Teil Ihrer Anwendung häufig aktualisieren müssen, verwenden Sie die Caching-Strategie veraltet, während Sie neu validieren.

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.

Achtung : Wenn Sie Ihre Service Worker-Datei löschen oder umbenennen, entfernt der Browser den zuvor registrierten Service Worker nicht aus seinen Clients. Wenn Sie einen Service Worker vollständig entfernen möchten, müssen Sie die Methoden getRegistrations() und unregister() verwenden.

Hinweis: Durch die Installation einer neuen Service Worker-Version werden zuvor im Cache gespeicherte Assets nicht automatisch entfernt. Nicht mehr benötigte Assets sollten Sie explizit löschen.

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.

Achtung : skipWaiting() bedeutet, dass der neue Service Worker wahrscheinlich Seiten steuert, die mit einer älteren Version geladen wurden. Das bedeutet, dass einige der Abrufe Ihrer Seite vom alten Service Worker durchgeführt wurden, nachfolgende Abrufe jedoch vom neuen Service Worker verarbeitet werden. Falls dies dazu führen könnte, dass deine App nicht mehr funktioniert, verwende skipWaiting() nicht. Diese Warnung stammt aus dem Service Worker-Lebenszyklus. Weitere Best Practices finden Sie in diesem Artikel.

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.

Mit der Eigenschaft id wird deine PWA eindeutig identifiziert. Wenn Sie id ändern, wird Ihre PWA als komplett neue PWA angesehen. Wenn Sie unerwartetes Verhalten vermeiden möchten, lesen Sie den Artikel PWAs mithilfe der Manifest-ID der Web-App eindeutig identifizieren, bevor Sie das Attribut id festlegen oder ändern.

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.

Hinweis : Wenn Sie start_url ändern, wird die App im Browser möglicherweise als komplett neue App installiert. Üblicherweise wird jedoch in der start_url-Eigenschaft eine manuelle Versions-ID hinzugefügt, z. B. /?version=3, um die Version zu identifizieren. Ab Chrome 96 kannst du dem Manifest ein id hinzufügen, um deine App zu identifizieren.

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();

Hinweis : Die Badging API basiert auf einem Best-Effort-Mechanismus. der Browser versucht, Ihrer Anfrage zu entsprechen, aber manchmal wechselt er zu einem anderen Ansatz. Beispielsweise ist eine Ausweisnummer auf einigen Android-Geräten nicht verfügbar. Daher wird ein Punktsymbol verwendet, unabhängig davon, welche Nummer Sie angeben.

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