Toegang tot caches vanuit het venster

Met al dit werk dat we buiten het window hebben gedaan, zou je kunnen denken dat Cache instanties alleen toegankelijk zijn binnen het bereik van de servicewerknemer. Het is een feit dat u toegang hebt tot Cache instanties in zowel het bereik van de servicewerker als in de traditionele code van uw web-app, die wordt uitgevoerd in het window . Dit maakt het voor de gebruiker gemakkelijker om rechtstreeks te communiceren met de cache van een servicemedewerker, of om de gebruikersinterface bij te werken op basis van de cachestatus.

Een mogelijke toepassing is het aanbieden van een functie 'Opslaan voor offline' voor pagina's die de gebruiker later misschien wil lezen, maar waarvan hij weet dat ze op dat moment mogelijk offline zijn. De onderstaande Glitch-insluiting laat zien hoe u dit kunt doen met Workbox.

In de bovenstaande insluiting kunt u zien dat het app.js script vanuit de window naar de offline cache schrijft wanneer op de knop 'Opslaan voor offline' wordt geklikt. In de servicemedewerker worden de statische elementen van de pagina vooraf in de cache geplaatst voor offline toegang. Er wordt een NetworkOnly strategie gebruikt met een speciale handler die de offline toegang voor in de cache opgeslagen pagina's beheert, en wordt doorgegeven aan een NavigationRoute .

Om de functionaliteit in de Glitch-insluiting te testen, doet u het volgende:

  1. Open een nieuw browservenster en navigeer naar https://save-for-offline-test.glitch.me/
  2. Klik op de knop met de tekst Toevoegen aan offline leeslijst .
  3. Open de ontwikkelaarstools van uw browser in Firefox of Chrome. Als u Chrome gebruikt, gaat u naar het applicatiepaneel. Ga in Firefox naar het opslagpaneel.
  4. In de ontwikkelaarstools van beide browsers ziet u een Cache Storage- item in het linkerdeelvenster. Klik om het uit te vouwen. In het offline-cache- item zou u de pagina-URL moeten zien die u zojuist hebt toegevoegd in het rechterdeelvenster.
  5. Klik op een andere paginalink onderaan de pagina.
  6. Schakel de offlinemodus in beide browsers in om een ​​offline verbinding te simuleren.
  7. Klik op de link voor de pagina die u aan de offline cache hebt toegevoegd. Het zou moeten verschijnen, ook al ben je offline.
  8. Klik op een link voor een pagina die u niet aan de offline cache heeft toegevoegd. Het verzoek zal mislukken.

Dit is niet het enige gebruiksscenario voor het werken met Cache instanties in het window . U kunt bijvoorbeeld op voorspellende wijze activa vooraf ophalen en in de cache opslaan waarvan u weet dat de gebruiker een specifieke actie moet uitvoeren. Dit zou de latentie van het on-demand downloaden van deze assets verminderen of vermijden.

Er zijn nog andere potentieel nuttige gebruiksscenario's, en omdat u met Cache instanties kunt communiceren als er geen servicemedewerker aanwezig is, is het mogelijk dat niet voor al deze gevallen er een hoeft te worden geïnstalleerd.