Bei all dieser Arbeit außerhalb der window könnte man denken, dass der Zugriff auf Cache Instanzen nur innerhalb des Service Worker-Bereichs möglich ist. Sie können auf Cache-Instanzen sowohl im Service Worker-Bereich als auch im traditionellen Code Ihrer Webanwendung zugreifen, der in der window ausgeführt wird. Dies erleichtert dem Nutzer die direkte Interaktion mit einem Service Worker-Cache oder die Aktualisierung der Benutzeroberfläche basierend auf dem Cache-Status.
Ein möglicher Anwendungsfall besteht darin, eine Funktion zum Speichern für Offline-Inhalte für Seiten anzubieten, die der Nutzer möglicherweise später lesen möchte, die aber wissen, dass sie zu diesem Zeitpunkt offline sind. Die folgende Glitch-Einbettung zeigt, wie du dies mit Workbox tun kannst.
In der obigen Einbettung sehen Sie, dass das app.js-Skript aus dem window-Kontext in den Offline-Cache schreibt, wenn auf die Schaltfläche „Für Offline speichern“ geklickt wird. Im Service Worker werden die statischen Inhalte der Seite für den Offlinezugriff vorab im Cache gespeichert. Eine NetworkOnly-Strategie wird mit einem speziellen Handler verwendet, der den Offlinezugriff für im Cache gespeicherte Seiten verwaltet, und an eine NavigationRoute übergeben.
So testest du die Funktionalität in der Glitch-Einbettung:
- Öffnen Sie ein neues Browserfenster und gehen Sie zu https://save-for-offline-test.glitch.me/
- Klicken Sie auf die Schaltfläche Zur Offline-Leseliste hinzufügen.
- Öffnen Sie die Entwicklertools Ihres Browsers entweder in Firefox oder Chrome. Wenn Sie Chrome verwenden, rufen Sie das Anwendungsfenster auf. Gehen Sie in Firefox zum Speicherbereich.
- In den Entwicklertools des jeweiligen Browsers wird im linken Bereich das Element Cache-Speicher angezeigt. Zum Maximieren klicken. Im Eintrag offline-cache sollte nun rechts die Seiten-URL zu sehen sein, die Sie gerade hinzugefügt haben.
- Klicken Sie unten auf der Seite auf einen beliebigen anderen Seitenlink.
- Du kannst den Offlinemodus in beiden Browsern aktivieren, um eine Offlineverbindung zu simulieren.
- Klicken Sie auf den Link für die Seite, die Sie dem Offline-Cache hinzugefügt haben. Es sollte auch dann angezeigt werden, wenn Sie offline sind.
- Klicken Sie auf einen Link für eine Seite, die Sie nicht dem Offline-Cache hinzugefügt haben. Die Anfrage schlägt fehl.
Dies ist nicht der einzige Anwendungsfall für die Arbeit mit Cache-Instanzen im window. Sie können beispielsweise Assets vorausabrufen und im Cache speichern, von denen Sie wissen, dass der Nutzer eine bestimmte Aktion ausführen muss. Dadurch kann die Latenz beim Herunterladen dieser Assets bei Bedarf verringert oder vermieden werden.
Es gibt noch andere potenziell vorteilhafte Anwendungsfälle – und da Sie mit Cache-Instanzen interagieren können, wenn kein Service Worker vorhanden ist, ist möglicherweise nicht für alle eine Installation erforderlich.