Contenidos
Vor- und Nachteile der Verwendung unterschiedlicher oder konsistenter Ablauflogik im Service Worker-Cache und im HTTP-Cache.
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:
- 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.
- 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.
- 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.
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.
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. |
|
| 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. |
|
| 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. |
|
| 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. |
|
| 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
