6.10 Usando service workers para pre-cache de App Shell

Cuidado con los casos de borde

Como se mencionó anteriormente, este código no se utilizarán en la producción debido a los numerosos casos de borde no controlada.

Memoria caché depende de la actualización de la clave de caché para cada cambio

Por ejemplo, este método de almacenamiento en caché requiere actualizar la clave de caché cada vez que se cambia el contenido, de lo contrario, no se actualizará la caché y se servirá el contenido antiguo. Así que asegúrate de cambiar la clave de caché con cada cambio como estás trabajando en tu proyecto!

Todo para ser redownloaded en cada cambio requiere

Otra desventaja es que la cache entera queda invalidada y volver a descargarse cada vez que cambia un archivo. Que significa un error de ortografía simple carácter de fijación invalida la memoria caché y requieren todo para descargarse otra vez. No exactamente eficiente.

Fuente: https://codelabs.developers.google.com/codelabs/your-first-pwapp/#5

6.9. Usando service workers para pre-cache de App Shell

Probarlo

¡Su aplicación está ahora sin conexión capaz! Vamos a probarlo.

Recarga tu página y luego ir al panel de Cache Storage en el panel  Application del DevTools. Ampliar la sección y usted debería ver el nombre de su caché de shell de la aplicación aparece en el lado izquierdo. Al hacer clic en su caché de shell de la aplicación puedes ver todos los recursos que ha almacenado en caché en la actualidad.

Ahora, vamos a probar el modo sin conexión. Volver al panel Service Worker de DevTools y activar la casilla de verificación Offline. Después de activar la casilla, usted debe ver unpequeño  icono de  ADVERTENCIA de color  amarillo ,  junto a la ficha del panel de Network. Esto indica que usted está fuera de línea.

Recarga tu página y... ¡funciona! Tipo de, al menos. Observe cómo carga los datos iniciales (falso).

Si deseas la cláusula else en app.getForecast() entender por qué la aplicación es capaz de cargar los datos falsos.

El siguiente paso es modificar la lógica de trabajador de la aplicación y servicio para poder datos de tiempo de caché y devolver losdatos más recientes de la caché cuando la aplicación está sin conexión.

Consejo: Para comenzar de nuevo y borrar los datos guardados de todo (localStoarge, datos indexedDB, archivos de caché) y quitar los trabajadores de servicio, utilice el panel de almacenamiento claroen la ficha de aplicación.

Try it

Fuente: https://codelabs.developers.google.com/codelabs/your-first-pwapp/#5