Con todo este trabajo que realizamos fuera de window, quizás creas que solo se puede acceder a las instancias de Cache en el alcance del service worker. La realidad es que puedes acceder a las instancias de Cache tanto en el alcance del service worker como en el código tradicional de tu app web, que se ejecuta en window. Esto facilita al usuario la interacción directa con la caché del service worker o la actualización de la interfaz de usuario en función del estado de la caché.
Un posible caso de uso es ofrecer una función de "guardar para uso sin conexión" para páginas que los usuarios podrían querer leer más tarde, pero que sepan que pueden estar sin conexión en ese momento. La incorporación de Glitch que aparece a continuación muestra cómo hacerlo con Workbox.
En la incorporación anterior, puedes ver que la secuencia de comandos app.js escribe en la caché sin conexión desde el contexto window cuando se hace clic en el botón "Guardar para uso sin conexión". En el service worker, los elementos estáticos de la página se almacenan previamente en caché para el acceso sin conexión. Se usa una estrategia NetworkOnly con un controlador especial que administra el acceso sin conexión de las páginas almacenadas en caché y se pasa a un NavigationRoute.
Para probar la funcionalidad en la incorporación de Glitch, haz lo siguiente:
- Abre una nueva ventana del navegador y ve a https://save-for-offline-test.glitch.me/
- Haz clic en el botón que dice Agregar a la lista de lectura sin conexión.
- Abre las herramientas para desarrolladores de tu navegador en Firefox o Chrome. Si usas Chrome, ve al panel de la app. En Firefox, ve al panel de almacenamiento.
- En cualquiera de las herramientas para desarrolladores de cada navegador, verás un elemento de Almacenamiento en caché en el panel izquierdo. Haz clic para expandirla. En la entrada offline-cache, deberías ver la URL de la página que acabas de agregar en el panel derecho.
- Haz clic en cualquier otro vínculo de la página en la parte inferior de la página.
- Activa el modo sin conexión en cualquier navegador para simular una conexión sin conexión.
- Haz clic en el vínculo de la página que agregaste a la caché sin conexión. Debería aparecer aunque no tengas conexión.
- Haz clic en un vínculo de una página que no agregaste a la caché sin conexión. La solicitud fallará.
Este no es el único caso de uso para trabajar con instancias de Cache en window. Por ejemplo, podrías realizar una carga previa de manera predictiva y almacenar en caché los recursos que sabes que el usuario necesitará para realizar una acción específica. Esto reduciría o evitaría la latencia para descargar esos recursos a pedido.
Existen otros casos de uso que podrían ser beneficiosos y, como puedes interactuar con instancias de Cache sin un service worker, es posible que no todos requieran la instalación de uno.