Caching

Der Cache-Speicher ist ein leistungsstarkes Tool. Dadurch sind deine Apps weniger von den Netzwerkbedingungen abhängig. Mit sinnvollem Einsatz von Caches können Sie Ihre Webanwendung offline verfügbar machen und Ihre Assets in jeder Netzwerkbedingung so schnell wie möglich bereitstellen. Wie unter Assets und Daten erwähnt, können Sie die beste Strategie für das Caching der erforderlichen Assets festlegen. Zum Verwalten des Cache interagiert der Service Worker mit der Cache Storage API.

Unterstützte Browser

  • 43
  • 16
  • 41
  • 11.1

Quelle

Die Cache Storage API ist in verschiedenen Kontexten verfügbar:

  • Der Kontext des Fensters (der Hauptthread Ihrer PWA).
  • Der Service Worker.
  • Alle anderen von Ihnen verwendeten Worker

Ein Vorteil der Verwaltung Ihres Cache mithilfe von Service Workern besteht darin, dass sein Lebenszyklus nicht an das Fenster gebunden ist, was bedeutet, dass Sie den Hauptthread nicht blockieren. Beachten Sie, dass für die Verwendung der Cache Storage API die meisten dieser Kontexte über eine TLS-Verbindung genutzt werden müssen.

Im Cache gespeicherte Inhalte

Die erste Frage im Zusammenhang mit Caching ist, was im Cache gespeichert werden soll. Es gibt zwar keine eindeutige Antwort auf diese Frage, Sie können aber mit den Mindestressourcen beginnen, die Sie zum Rendern der Benutzeroberfläche benötigen.

Diese Ressourcen sollten Folgendes umfassen:

  • Der HTML-Code der Hauptseite (start_url Ihrer App).
  • Für die Hauptbenutzeroberfläche erforderliche CSS-Stylesheets
  • Bilder, die auf der Benutzeroberfläche verwendet werden.
  • JavaScript-Dateien, die zum Rendern der Benutzeroberfläche erforderlich sind.
  • Daten, z. B. eine JSON-Datei, die zum Rendern einer einfachen Erfahrung erforderlich sind.
  • Web-Schriftarten
  • In einer mehrseitigen Anwendung andere HTML-Dokumente, die Sie schnell oder offline bereitstellen möchten.

Offline-fähig

Eine der Voraussetzungen für progressive Web-Apps ist, dass sie auch offline verfügbar sind. Dennoch ist es wichtig zu wissen, dass nicht jede PWA eine vollständige Offline-Nutzung erfordert, z. B. Cloud-Gaming-Lösungen oder Apps für Krypto-Assets. Daher ist es in Ordnung, eine einfache Benutzeroberfläche anzubieten, die die Nutzenden durch solche Situationen führt.

Ihre PWA sollte nicht die Fehlermeldung eines Browsers darstellen, die besagt, dass die Seite vom Web-Rendering-Engine nicht geladen werden konnte. Verwenden Sie stattdessen Ihren Service Worker, um Ihre eigenen Nachrichten anzuzeigen und so allgemeine und verwirrende Browserfehler zu vermeiden.

Es gibt viele verschiedene Caching-Strategien, die Sie je nach den Anforderungen Ihrer PWA anwenden können. Aus diesem Grund ist es wichtig, die Cache-Nutzung so zu gestalten, dass sie schnell und zuverlässig funktioniert. Wenn beispielsweise alle Ihre App-Assets schnell heruntergeladen werden, nicht viel Speicherplatz belegen und nicht bei jeder Anfrage aktualisiert werden müssen, wäre es eine sinnvolle Strategie, alle Assets im Cache zu speichern. Wenn Sie jedoch Ressourcen haben, die die neueste Version sein müssen, sollten Sie erwägen, diese Assets überhaupt nicht im Cache zu speichern.

API verwenden

Verwenden Sie die Cache Storage API, um eine Reihe von Caches innerhalb Ihres Ursprungs zu definieren, die jeweils mit einem Stringnamen identifiziert werden, den Sie definieren können. Greifen Sie über das caches-Objekt auf die API zu. Die open-Methode ermöglicht das Erstellen oder Öffnen eines bereits erstellten Cache. Die Methode open gibt ein Promise für das Cache-Objekt zurück.

caches.open("pwa-assets")
.then(cache => {
  // you can download and store, delete or update resources with cache arguments
});

Assets herunterladen und speichern

Wenn Sie den Browser auffordern möchten, die Assets herunterzuladen und zu speichern, verwenden Sie die Methoden add oder addAll. Die Methode add stellt eine Anfrage und speichert eine HTTP-Antwort sowie addAll eine Gruppe von HTTP-Antworten als Transaktion basierend auf einem Array von Anfragen oder URLs.

caches.open("pwa-assets")
.then(cache => {
  cache.add("styles.css"); // it stores only one resource
  cache.addAll(["styles.css", "app.js"]); // it stores two resources
});

Die Cache-Speicherschnittstelle speichert die gesamte Antwort, einschließlich aller Header und des Textkörpers. Folglich können Sie ihn später mithilfe einer HTTP-Anfrage oder einer URL als Schlüssel abrufen. Weitere Informationen dazu finden Sie im Kapitel zur Bereitstellung.

Wann sollte ich zwischenspeichern?

Bei Ihrer PWA sind Sie dafür verantwortlich, zu entscheiden, wann Dateien im Cache gespeichert werden sollen. Ein Ansatz besteht zwar darin, so viele Assets wie möglich zu speichern, wenn der Service Worker installiert wird, aber dies ist normalerweise nicht die beste Idee. Durch das Caching unnötiger Ressourcen werden Bandbreite und Speicherplatz verschwendet und Ihre Anwendung könnte unbeabsichtigt veraltete Ressourcen bereitstellen.

Sie müssen nicht alle Assets auf einmal im Cache speichern, sondern können sie während des Lebenszyklus Ihrer PWA mehrmals im Cache speichern, z. B.:

  • Bei der Installation des Service Workers
  • Nach dem ersten Laden der Seite
  • Wenn der Nutzer zu einem Abschnitt oder einer Route navigiert.
  • Wenn das Netzwerk inaktiv ist.

Sie können das Caching neuer Dateien im Hauptthread oder im Service Worker-Kontext anfordern.

Assets in einem Service Worker im Cache speichern

Eines der häufigsten Szenarien besteht darin, eine Mindestanzahl von Assets im Cache zu speichern, wenn der Service Worker installiert wird. Dazu können Sie die Cache-Speicheroberfläche innerhalb des install-Ereignisses im Service Worker verwenden.

Da der Service Worker-Thread jederzeit beendet werden kann, können Sie den Browser auffordern, auf den Abschluss des Promise addAll zu warten. Dadurch haben Sie die Möglichkeit, alle Assets zu speichern und die App-Einheitlichkeit zu gewährleisten. Das folgende Beispiel zeigt, wie dies mithilfe der Methode waitUntil des Ereignisarguments funktioniert, das im Service Worker-Ereignis-Listener empfangen wurde.

const urlsToCache = ["/", "app.js", "styles.css", "logo.svg"];
self.addEventListener("install", event => {
   event.waitUntil(
      caches.open("pwa-assets")
      .then(cache => {
         return cache.addAll(urlsToCache);
      });
   );
});

Die Methode waitUntil() empfängt ein Promise und fordert den Browser auf, auf die Auflösung der Aufgabe im Versprechen zu warten (erfüllt oder fehlgeschlagen), bevor der Service Worker-Prozess beendet wird. Möglicherweise müssen Sie Promis verketten und die add()- oder addAll()-Aufrufe zurückgeben, damit ein einzelnes Ergebnis an die Methode waitUntil() gesendet wird.

Sie können Versprechen auch mit der Syntax „async/await“ verarbeiten. In diesem Fall müssen Sie eine asynchrone Funktion erstellen, die await aufrufen kann und nach ihrem Aufruf ein Promise an waitUntil() zurückgibt, wie im folgenden Beispiel gezeigt:

const urlsToCache = ["/", "app.js", "styles.css", "logo.svg"];
self.addEventListener("install", (event) => {
   let cacheUrls = async () => {
      const cache = await caches.open("pwa-assets");
      return cache.addAll(urlsToCache);
   };
   event.waitUntil(cacheUrls());
});

Domainübergreifende Anfragen und intransparente Antworten

Über Ihre PWA können Assets von Ihrer ursprünglichen und domainübergreifenden Domains heruntergeladen und im Cache gespeichert werden, z. B. Inhalte aus CDNs von Drittanbietern. Bei einer domainübergreifenden App ist die Cache-Interaktion sehr ähnlich wie Anfragen vom selben Ursprung. Die Anfrage wird ausgeführt und eine Kopie der Antwort wird in Ihrem Cache gespeichert. Wie andere im Cache gespeicherte Assets kann sie nur im Ursprung Ihrer App verwendet werden.

Das Asset wird als opake Antwort gespeichert. Das bedeutet, dass der Code den Inhalt oder die Header dieser Antwort weder sehen noch ändern kann. Intransparente Antworten geben außerdem ihre tatsächliche Größe in der Storage API nicht frei, was sich auf die Kontingente auswirkt. Einige Browser stellen große Größen wie z. B. 7 MB dar, auch wenn die Datei nur 1 KB groß ist.

Assets aktualisieren und löschen

Du kannst Assets mit cache.put(request, response) aktualisieren und mit delete(request) löschen.

Weitere Informationen finden Sie in der Dokumentation zu Cache-Objekten.

Cache-Speicher debuggen

Viele Browser bieten eine Möglichkeit, Fehler im Cache-Speicherinhalt über den Tab für die Entwicklertools-Anwendung zu beheben. Dort sehen Sie den Inhalt jedes Caches innerhalb des aktuellen Ursprungs. Im Kapitel Tools und Fehlerbehebung werden weitere Informationen zu diesen Tools behandelt.

Chrome-Entwicklertools zum Debugging von Cache-Speicherinhalten

Ressourcen