Una función de los service workers es la capacidad de guardar archivos en la caché cuando que está instalando el service worker. Esto se conoce como "almacenamiento previo en caché". El almacenamiento previo en caché permite entregar archivos almacenados en caché al navegador sin tener que a la red. Usa el almacenamiento previo en caché para los recursos esenciales que tu sitio necesita, incluso, cuando está sin conexión: página principal, estilos, imagen de resguardo y secuencias de comandos esenciales.
¿Por qué deberías usar Workbox?
El uso de Workbox para el almacenamiento previo en caché es opcional. Puedes escribir tu propio código para almacenar previamente en caché los recursos esenciales durante la instalación del service worker. El principal beneficio de usar Workbox es su control de versiones listo para usar. Te encontrarás con muchos menos problemas para actualizar los recursos prealmacenados en caché con Workbox que si tuviera que administrar el control de versiones y la actualización de estos archivos por su cuenta.
Manifiestos en caché previo
El almacenamiento previo en caché se genera a través de una lista de URLs y la información de control de versiones asociada para cada URL. En conjunto, esta información se conoce como Manifiesto de almacenamiento previo en caché. El manifiesto es la "fuente de confianza". para que el estado de todo quede en la caché previa de una versión determinada de una app web. Un manifiesto de precache, en formato que usa Workbox, se parece a lo siguiente:
[{
url: 'app.abcd1234.js'
}, {
url: 'offline.svg',
revision: '7836745f'
}, {
url: 'index.html',
revision: '518747aa'
}]
Cuando se instala el service worker, se crean tres entradas de caché en la
Almacenamiento en caché, para cada una de las tres URLs de la lista. El primer recurso tiene control de versiones
información ya incluida en la URL (app es el nombre real del archivo y
.abcd1234 contiene la información sobre el control de versiones, justo antes de la extensión de archivo.
.js). Las herramientas de compilación de Workbox pueden detectar esto y excluir un campo de revisión. El
los otros dos recursos no incluyen información
sobre el control de versiones en sus URLs,
Las herramientas de compilación crean un campo revision separado, que contiene un hash de la cadena
el contenido del archivo.
Entrega recursos previamente almacenados en caché
Agregar recursos a la caché es solo una parte del proceso de almacenamiento previo en caché; una vez que
los activos se almacenan en caché, deben responder a solicitudes salientes. Esto requiere un
fetch de objeto de escucha de eventos en el service worker que puede comprobar las URLs
almacenar en caché previamente y mostrar esas respuestas de manera confiable, sin pasar por
la red en el proceso. Dado que el service worker busca respuestas en la caché,
(y se usan antes de la red), esto se denomina
estrategia que prioriza la caché.
Actualizaciones eficientes
Un manifiesto de almacenamiento previo en caché proporciona una representación exacta de la caché esperada state; Si cambia una combinación de URL/revisión en el manifiesto, se generará un service worker sabe que la entrada almacenada en caché anterior ya no es válida y debe se actualicen. Solo se necesita una única solicitud de red, realizada automáticamente por el navegador como parte del service worker verificación de actualizaciones, para determinar qué URLs prealmacenadas en caché deben actualizarse.
Actualizaciones de recursos previamente almacenados en caché
A medida que lanzas nuevas versiones de tu app web con el tiempo, debes mantener están actualizadas las URLs previamente almacenadas en caché, almacenan por adelantado en caché nuevos elementos y borran de entradas de registro. Siempre y cuando sigas generando un manifiesto completo de precaché cada vez reconstruyas tu sitio, ese manifiesto sirve como la "fuente de confianza". para tu el estado en caché en cualquier momento.
Si hay una URL existente con un nuevo campo de revisión o si se agregaron URLs
agregado o quitado del manifiesto, eso es una señal para tu service worker
se deben realizar actualizaciones, como parte del
install
y
activate
controladores de eventos. Por ejemplo, si hizo cambios en su sitio
el último manifiesto de precaché podría haberse sometido a las siguientes
cambios:
[{
url: 'app.ffaa4455.js'
}, {
url: 'offline.svg',
revision: '7836745f'
}, {
url: 'index.html',
revision: '518747aa'
}]
Cada uno de estos cambios le indica al service worker que las nuevas solicitudes
para actualizar entradas previamente almacenadas en caché ('offline.svg' y 'index.html')
y almacena en caché nuevas URLs ('app.ffaa4455.js'), además de eliminaciones para limpiar URLs
que ya no se usan ('app.abcd1234.js').
Verdadero “tienda de aplicaciones” experiencia de instalación
Otro beneficio del almacenamiento previo en caché es que puedes brindar a los usuarios una experiencia que, de otro modo, sería difícil de lograr fuera de una "tienda de aplicaciones" instalación. Cuando un usuario visita una página de tu aplicación web por primera vez, Puedes almacenar previamente en caché todas las URLs necesarias para mostrar cualquiera de tus vistas de la app web anticipadamente, sin tener que esperar hasta que visiten cada en una vista individual.
Cuando un usuario instala una aplicación, espera que todas las partes se muestren rápidamente no solo por las vistas que han tenido en el pasado. El almacenamiento previo en caché trae consigo ese mismo experiencia a las apps web.
¿Cuál de tus elementos se debe almacenar en caché previamente?
Consulta el artículo Cómo identificar completa para obtener de las URLs con más sentido almacenar en caché previamente. La regla general es almacenar previamente en caché cualquier código HTML, JavaScript o CSS que se cargue con anticipación y sea crucial para mostrar la estructura básica de una página determinada.
Es preferible evitar el almacenamiento previo en caché de contenido multimedia u otros elementos que se cargan más tarde (a menos que sea crucial para la funcionalidad de tu app web). En su lugar, usa un entorno de ejecución de almacenamiento en caché para garantizar que estos se almacenan en caché a medida que se avanza.
Siempre ten en cuenta que el almacenamiento previo en caché implica usar ancho de banda y almacenamiento de red. en el dispositivo de un usuario (al igual que cuando se instala una aplicación desde una tienda de aplicaciones). Depende de ti, como desarrollador, almacenar en caché previamente con criterio y evitar un uso excesivo prealmacenado.
Las herramientas de compilación de Workbox te indican la cantidad de elementos en la memoria caché previa. y el tamaño total de la carga útil de precaché.
Los visitantes recurrentes de su aplicación web se benefician a largo plazo del costo por adelantado de almacenamiento previo en caché, ya que la capacidad que ofrece para evitar que la red pague rápido en el ancho de banda ahorrado con el tiempo.