Avec tout ce que nous avons effectué en dehors de window, vous pouvez penser que Cache instances ne sont accessibles qu'au niveau du service worker. Vous pouvez accéder aux instances Cache à la fois dans le champ d'application du service worker et dans le code traditionnel de votre application Web, qui s'exécute dans le window. Cela permet à l'utilisateur d'interagir directement avec le cache d'un service worker ou de mettre à jour l'interface utilisateur en fonction de l'état du cache.
L'un des cas d'utilisation potentiels consiste à proposer une fonctionnalité d'enregistrement pour accès hors connexion pour les pages que l'utilisateur souhaitera peut-être lire plus tard, tout en sachant qu'elles peuvent être hors connexion à ce moment-là. L'intégration Glitch ci-dessous montre comment procéder avec Workbox.
Dans l'intégration ci-dessus, vous pouvez voir que le script app.js écrit dans le cache hors connexion à partir du contexte window lorsque l'utilisateur clique sur le bouton "Enregistrer pour accès hors connexion". Dans le service worker, les éléments statiques de la page sont mis en cache en amont pour un accès hors connexion. Une stratégie NetworkOnly est utilisée avec un gestionnaire spécial qui gère l'accès hors connexion aux pages mises en cache et est transmise à un NavigationRoute.
Pour tester le fonctionnement dans l'intégration Glitch, procédez comme suit:
- Ouvrez une nouvelle fenêtre de navigateur et accédez à l'adresse https://save-for-offline-test.glitch.me/.
- Cliquez sur le bouton Ajouter à la liste de lecture hors connexion.
- Ouvrez les outils pour les développeurs de votre navigateur dans Firefox ou Chrome. Si vous utilisez Chrome, accédez au panneau de l'application. Dans Firefox, accédez au panneau de stockage.
- Dans les outils pour les développeurs de l'un ou l'autre navigateur, un élément Cache Storage (Stockage du cache) s'affiche dans le volet de gauche. Cliquez dessus pour la développer. Dans l'entrée offline-cache, l'URL de la page que vous venez d'ajouter doit s'afficher dans le volet de droite.
- Cliquez sur le lien d'une autre page en bas de la page.
- Activez le mode hors connexion dans l'un ou l'autre navigateur pour simuler une connexion hors connexion.
- Cliquez sur le lien de la page que vous avez ajoutée au cache hors connexion. Elle devrait s'afficher même si vous êtes hors connexion.
- Cliquez sur le lien d'une page que vous n'avez pas ajoutée au cache hors connexion. La requête échouera.
Ce n'est pas le seul cas d'utilisation pour travailler avec des instances Cache dans window. Par exemple, vous pouvez précharger et mettre en cache de manière prédictive des assets dont vous savez que l'utilisateur devra effectuer une action spécifique. Cela permet de réduire ou d'éviter la latence liée au téléchargement de ces éléments à la demande.
Il existe d'autres cas d'utilisation potentiellement bénéfiques. Étant donné que vous pouvez interagir avec les instances Cache en l'absence d'un service worker, il n'est pas forcément nécessaire d'en installer un pour tous.