Zum Hauptinhalt springen

Vor- und Nachteile der Verwendung unterschiedlicher oder konsistenter Ablauflogik im Service Worker-Cache und im HTTP-Cache.

Es erscheint in:
Netzwerkzuverlässigkeit

Während Servicemitarbeiter und PWAs zum Standard für moderne Webanwendungen werden, ist das Zwischenspeichern von Ressourcen komplexer als je zuvor. Dieser Artikel behandelt die Übersicht über das Browser-Caching, einschließlich:

  • Die Anwendungsfälle und Unterschiede zwischen Service Worker-Caching und HTTP-Caching.
  • Vor- und Nachteile verschiedener Ablaufstrategien für das Zwischenspeichern von Servicemitarbeitern im Vergleich zu typischen HTTP-Zwischenspeicherstrategien

Übersicht über den Caching-Ablauf

Auf hoher Ebene folgt ein Browser beim Anfordern einer Ressource der folgenden Caching-Reihenfolge:

  1. Service Worker Cache: Der Servicemitarbeiter überprüft, ob sich die Ressource in seinem Cache befindet, und entscheidet anhand der geplanten Caching-Strategien, ob die Ressource selbst zurückgegeben werden soll. Bitte beachten Sie, dass dies nicht automatisch geschieht. Sie müssen einen Wiederherstellungsereignishandler für Ihren Service Worker erstellen und Netzwerkanforderungen abfangen, damit Anforderungen aus dem Service Worker-Cache anstelle des Netzwerks bereitgestellt werden.
  2. HTTP-Cache (auch als Browser-Cache bezeichnet): Wenn sich die Ressource im HTTP-Cache befindet und noch nicht abgelaufen ist, verwendet der Browser die Ressource automatisch aus dem HTTP-Cache.
  3. Serverseite: Wenn im Cache des Service Workers oder im HTTP-Cache nichts gefunden wird, wechselt der Browser zum Netzwerk, um die Ressource anzufordern. Wenn die Ressource nicht auf einem CDN zwischengespeichert ist, muss die Anforderung an den Ursprungsserver zurückgesendet werden.

Caching-Flow-2211747

Beachten Sie, dass einige Browser wie Chrome eine haben Zwischenspeicher Schicht vor dem Service Worker Cache. Die Details des Caches hängen von der Implementierung jedes Browsers ab. Leider gibt es für diesen Teil noch keine eindeutige Spezifikation.

Ebenen zwischenspeichern

Zwischenspeichern von Servicemitarbeitern

Ein Servicemitarbeiter fängt HTTP-Anforderungen vom Netzwerktyp ab und verwendet a
Caching-Strategie
um zu bestimmen, welche Ressourcen an den Browser zurückgegeben werden sollen. Der Service Worker-Cache und der HTTP-Cache dienen demselben allgemeinen Zweck, aber der Service Worker-Cache bietet mehr Caching-Funktionen, z. B. eine detaillierte Kontrolle darüber, was genau zwischengespeichert wird und wie das Caching durchgeführt wird. Cache.

Steuern Sie den Service Worker-Cache

Ein Servicemitarbeiter fängt HTTP-Anforderungen mit ab Event-Listener (in der Regel die holen Veranstaltung). Ist
Code-Auszug demonstriert die Logik von a
Zuerst zwischenspeichern
Caching-Strategie.

Workbox-4152333

Es wird dringend empfohlen, zu verwenden Arbeitsbox um eine Neuerfindung des Rades zu vermeiden. Zum Beispiel können Sie
Registrieren Sie Ressourcen-URL-Pfade mit einer einzigen Zeile Regex-Code.

{ registerRoute } aus 'Workbox-Routing' importieren ;

registerRoute ( neues RegExp ( 'styles /.*. css' ) , callbackHandler ) ;

Caching-Strategien und Anwendungsfälle für Servicemitarbeiter

In der folgenden Tabelle werden allgemeine Caching-Strategien für Servicemitarbeiter beschrieben und wann jede Strategie nützlich ist.

Strategien Begründung der Frische Anwendungsfälle
Nur Netzwerk Der Inhalt muss jederzeit aktualisiert werden.
  • Zahlungen und Zahlungen
  • Bilanzauszüge
Netzwerk greift auf Cache zurück Es ist vorzuziehen, den frischen Inhalt zu servieren. Wenn das Netzwerk jedoch ausgefallen oder instabil ist, können leicht alte Inhalte angeboten werden.
  • Rechtzeitige Daten
  • Preise und Gebühren (Haftungsausschluss erforderlich)
  • Bestellstatus
Bestanden während der erneuten Validierung Es ist in Ordnung, zwischengespeicherte Inhalte sofort zu veröffentlichen, aber aktualisierte zwischengespeicherte Inhalte sollten in Zukunft verwendet werden.
  • Nachrichten
  • Produktlistenseiten
  • Beiträge
Cache zuerst, gehe ins Netz Der Inhalt ist nicht kritisch und kann aus dem Cache bereitgestellt werden, um die Leistung zu verbessern. Der Servicemitarbeiter sollte jedoch gelegentlich nach Updates suchen.
  • Anwendungsshell
  • Gemeinsame Ressourcen
Nur Cache Der Inhalt ändert sich selten.

Zusätzliche Vorteile des Zwischenspeicherns von Servicemitarbeitern

Neben der detaillierten Steuerung der Caching-Logik bietet das Caching von Servicemitarbeitern auch Folgendes:

  • Mehr Speicher und Speicherplatz für Ihre Quelle: Der Browser weist HTTP-Cache-Ressourcen nach Herkunft zu. Mit anderen Worten, wenn Sie mehrere Subdomains haben, teilen sich alle denselben HTTP-Cache. Es gibt keine Garantie dafür, dass Inhalte von Ihrem Ursprung / Ihrer Domain lange Zeit im HTTP-Cache verbleiben. Ein Benutzer kann beispielsweise den Cache leeren, indem er die Konfigurationsbenutzeroberfläche eines Browsers manuell löscht oder ein vollständiges Neuladen auf einer Seite auslöst. Mit einem Service Worker-Cache haben Sie eine viel höhere Wahrscheinlichkeit, dass Ihr zwischengespeicherter Inhalt zwischengespeichert bleibt. Uhr Dauerspeicher Mehr erfahren.
  • Mehr Flexibilität bei instabilen Netzwerken oder Offline-Erlebnissen: Mit dem HTTP-Cache haben Sie nur eine binäre Option: Die Ressource wird zwischengespeichert oder nicht. Mit dem Zwischenspeichern von Servicemitarbeitern können Sie kleine "Schluckaufe" viel einfacher abmildern (mit der Strategie "Veraltet beim erneuten Validieren"), eine vollständige Offline-Erfahrung bieten (mit der Strategie "Nur Cache") oder sogar etwas Zwischenprodukt wie Benutzerdefiniert Benutzeroberflächen mit Teilen der Seite, die aus dem Service Worker-Cache stammen, und einigen Teilen, die ausgeschlossen sind (unter Verwendung der Strategie "Set Capture Handler"), sofern zutreffend.

HTTP-Caching

Wenn ein Browser zum ersten Mal eine Webseite und zugehörige Ressourcen lädt, speichert er diese Ressourcen in seinem HTTP-Cache. Der HTTP-Cache wird im Allgemeinen automatisch von Browsern aktiviert, es sei denn, der Endbenutzer hat ihn explizit deaktiviert.

Wenn Sie HTTP-Caching verwenden, müssen Sie sich auf den Server verlassen, um zu bestimmen, wann und wie lange eine Ressource zwischengespeichert werden soll.

Wenn ein Server auf eine Browseranforderung für eine Ressource antwortet, verwendet der Server HTTP-Antwortheader, um dem Browser mitzuteilen, wie lange die Ressource zwischengespeichert werden soll. Weitere Informationen finden Sie unter Antwortheader: Konfigurieren Sie Ihren Webserver.

HTTP-Caching-Strategien und Anwendungsfälle

Das HTTP-Caching ist viel einfacher als das Service-Worker-Caching, da das HTTP-Caching nur die TTL-Logik (Time Based Resource Expiration) behandelt. Siehe Welche Antwortheaderwerte soll ich verwenden? und Zusammenfassung für weitere Informationen zu HTTP-Caching-Strategien.

Entwerfen Ihrer Cache-Ablauflogik

In diesem Abschnitt werden die Vor- und Nachteile der Verwendung einer konsistenten Ablauflogik in den Service Worker-Cache- und HTTP-Cache-Schichten sowie die Vor- und Nachteile einer separaten Ablauflogik in diesen Schichten erläutert.

Der folgende Fehler zeigt, wie das Worker-Caching und das HTTP-Caching in verschiedenen Szenarien in Aktion funktionieren:

Konsistente Ablauflogik für alle Cache-Ebenen

Um die Vor- und Nachteile aufzuzeigen, werden drei Szenarien betrachtet: langfristig, mittelfristig und kurzfristig.

Szenarien Langzeit-Caching Mittelfristiges Caching Kurzfristiges Caching
Caching-Strategie für Servicemitarbeiter Cache, wendet sich an das Netzwerk Bestanden während der erneuten Validierung Netzwerk greift auf Cache zurück
Service Worker Cache TTL 30 Tage 1 Tag 10 Minuten
Maximales Alter des HTTP-Cache 30 Tage 1 Tag 10 Minuten

Szenario: Langzeit-Caching (Cache, ins Netzwerk gehen)

  • Wenn eine zwischengespeicherte Ressource gültig ist (<= 30 días): el trabajador del servicio devuelve el recurso almacenado en caché inmediatamente sin ir a la red.
  • Wenn eine zwischengespeicherte Ressource abläuft (> 30 Tage): Der Servicemitarbeiter geht zum Netzwerk, um die Ressource zu finden. Der Browser hat keine Kopie der Ressource in seinem HTTP-Cache, daher wird sie für die Ressource an die Serverseite übergeben.

Con: In diesem Szenario bietet das HTTP-Caching weniger Wert, da der Browser die Anforderung immer an die Serverseite weiterleitet, wenn der Cache für den Service Worker abläuft.

Szenario: mittelfristiges Caching (veraltet während der erneuten Validierung)

  • Wenn eine zwischengespeicherte Ressource gültig ist (<= 1 día): el trabajador del servicio devuelve el recurso en caché inmediatamente y va a la red para buscar el recurso. El navegador tiene una copia del recurso en su caché HTTP, por lo que devuelve esa copia al trabajador del servicio.
  • Wenn eine zwischengespeicherte Ressource abläuft (> 1 Tag): Der Servicemitarbeiter gibt die zwischengespeicherte Ressource sofort zurück und geht zum Netzwerk, um die Ressource zu finden. Der Browser hat keine Kopie der Ressource in seinem HTTP-Cache, daher sucht er serverseitig nach der Ressource.

Nachteil: Der Service Worker benötigt eine zusätzliche Cache-Löschung, um den HTTP-Cache zu überschreiben und den Schritt "Revalidierung" voll auszunutzen.

Szenario: Kurzzeit-Caching (Netzwerk verwendet Cache)

  • Wenn eine zwischengespeicherte Ressource gültig ist (<= 10 minutos): el trabajador del servicio va a la red para buscar el recurso. El navegador tiene una copia del recurso en su caché HTTP, por lo que se lo devuelve al trabajador del servicio sin pasar al lado del servidor.
  • Wenn eine zwischengespeicherte Ressource abläuft (> 10 Minuten): Der Servicemitarbeiter gibt die zwischengespeicherte Ressource sofort zurück und geht zum Netzwerk, um die Ressource zu finden. Der Browser hat keine Kopie der Ressource in seinem HTTP-Cache, daher sucht er serverseitig nach der Ressource.

Nachteil: Ähnlich wie beim mittelfristigen Caching-Szenario benötigt der Service Worker eine zusätzliche Cache-Löschlogik, um den HTTP-Cache zu überschreiben und den letzten Ausweg von der Serverseite zu erhalten.

Servicemitarbeiter in allen Szenarien

In allen Szenarien kann der Service Worker-Cache weiterhin zwischengespeicherte Ressourcen zurückgeben, wenn das Netzwerk instabil ist. Andererseits ist der HTTP-Cache unzuverlässig, wenn das Netzwerk instabil oder ausgefallen ist.

Unterschiedliche Cache-Ablauflogik in Service Worker-Cache- und HTTP-Schichten

Um die Vor- und Nachteile aufzuzeigen, werden wir uns die langen, mittleren und kurzfristigen Szenarien noch einmal genauer ansehen.

Szenarien Langzeit-Caching Mittelfristiges Caching Kurzfristiges Caching
Caching-Strategie für Servicemitarbeiter Cache, wendet sich an das Netzwerk Bestanden während der erneuten Validierung Netzwerk greift auf Cache zurück
Service Worker Cache TTL 90 Tage 30 Tage 1 Tag
Maximales Alter des HTTP-Cache 30 Tage 1 Tag 10 Minuten

Szenario: Langzeit-Caching (Cache, ins Netzwerk gehen)

  • Wenn eine zwischengespeicherte Ressource im Service Worker-Cache gültig ist (<= 90 días): el trabajador del servicio devuelve el recurso almacenado en caché inmediatamente.
  • Wenn eine zwischengespeicherte Ressource im Service Worker-Cache abläuft (> 90 Tage): Der Service Worker geht zum Netzwerk, um die Ressource zu finden. Der Browser hat keine Kopie der Ressource in seinem HTTP-Cache, daher wird sie an die Serverseite übergeben.

Vor-und Nachteile:

  • Vorteil: Benutzer erhalten sofort eine Antwort, da der Servicemitarbeiter zwischengespeicherte Ressourcen sofort zurückgibt.
  • Vorteil: Der Servicemitarbeiter hat eine genauere Kontrolle darüber, wann sein Cache verwendet und wann neue Versionen von Ressourcen angefordert werden sollen.
  • Nachteil: Eine genau definierte Caching-Strategie für Servicemitarbeiter ist erforderlich.

Szenario: mittelfristiges Caching (veraltet während der erneuten Validierung)

  • Wenn eine zwischengespeicherte Ressource im Service Worker-Cache gültig ist (<= 30 días): el trabajador del servicio devuelve el recurso almacenado en caché inmediatamente.
  • Wenn eine zwischengespeicherte Ressource im Service Worker-Cache abläuft (> 30 Tage): Der Service Worker wechselt für die Ressource zum Netzwerk. Der Browser hat keine Kopie der Ressource in seinem HTTP-Cache, daher wird sie an die Serverseite übergeben.

Vor-und Nachteile:

  • Vorteil: Benutzer erhalten sofort eine Antwort, da der Servicemitarbeiter zwischengespeicherte Ressourcen sofort zurückgibt.
  • Vorteil: Der Servicemitarbeiter kann das sicherstellen folgenden Die Anforderung für eine bestimmte URL verwendet eine neue Antwort aus dem Netzwerk, dank der erneuten Validierung, die "im Hintergrund" erfolgt.
  • Nachteil: Eine genau definierte Caching-Strategie für Servicemitarbeiter ist erforderlich.

Szenario: kurzfristiges Caching (Netzwerk greift auf Caching zurück)

  • Wenn eine zwischengespeicherte Ressource im Service Worker-Cache gültig ist (<= 1 día): el trabajador del servicio va a la red en busca del recurso. El navegador devuelve el recurso de la caché HTTP si está allí. Si la red no funciona, el trabajador del servicio devuelve el recurso de la caché del trabajador del servicio.
  • Wenn eine zwischengespeicherte Ressource im Service Worker-Cache abläuft (> 1 Tag): Der Service Worker geht zum Netzwerk, um die Ressource zu finden. Der Browser ruft Ressourcen über das Netzwerk ab, wenn die im HTTP-Cache zwischengespeicherte Version abgelaufen ist.

Vor-und Nachteile:

  • Vorteil: Wenn das Netzwerk instabil oder ausgefallen ist, gibt der Servicemitarbeiter die zwischengespeicherten Ressourcen sofort zurück.
  • Nachteil: Der Service Worker benötigt eine zusätzliche Cache-Löschung, um den HTTP-Cache zu überschreiben und "Network First" -Anforderungen zu stellen.

Fazit

Angesichts der Komplexität der Kombination von Caching-Szenarien ist es nicht möglich, eine Regel zu entwerfen, die alle Fälle abdeckt. Basierend auf den Ergebnissen der vorherigen Abschnitte gibt es jedoch einige Tipps, die Sie beim Entwerfen Ihrer Caching-Strategien beachten sollten:

  • Die Service Worker-Caching-Logik muss nicht mit der HTTP-Caching-Ablauflogik übereinstimmen. Verwenden Sie nach Möglichkeit eine längere Ablauflogik für den Servicemitarbeiter, um dem Servicemitarbeiter mehr Kontrolle zu geben.
  • HTTP-Caching spielt immer noch eine Rolle, ist jedoch unzuverlässig, wenn das Netzwerk instabil oder ausgefallen ist.
  • Überprüfen Sie Ihre Caching-Strategien für jede Ressource, um sicherzustellen, dass die Caching-Strategie Ihres Service-Workers ihren Wert liefert, ohne mit dem HTTP-Cache in Konflikt zu geraten.

Mehr erfahren

R Marketing Digital