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

6.8 Usando service workers para pre-cache de App Shell

Servir  la app shell de la caché

Los Service workers proporcionan la capacidad para interceptar las peticiones realizadas desde nuestra Progressive Web App y manejarlos en el service worker. Esto significa que podemos determinar cómo queremos gestionar la solicitud y potencialmente servir nuestra propia respuesta almacenada en caché.

Por ejemplo:

self.addEventListener('fetch', function(event) {
  // Do something interesting with the fetch here
});

Vamos a servir ahora la aplicación app shell de la caché. Agregue el código siguiente al final de su archivo service-worker.js.

self.addEventListener('fetch', function(e) {
  console.log('[ServiceWorker] Fetch', e.request.url);
  e.respondWith(
    caches.match(e.request).then(function(response) {
      return response || fetch(e.request);
    })
  );
});

Paso a paso desde dentro, hacia fuera, caches.match() evalúa la solicitud web que desencadenó el evento fetch y comprueba si está disponible en la caché. Responde con la versión en caché, o utiliza fetch para obtener una copia de la red. La respuesta response se pasa a la página web mediante  e.respondWith().

Si no estás viendo [ServiceWorker] iniciar sesión en la consola, asegúrese de que ha cambiado la variable de cacheName y que está inspeccionando el service worker adecuado abrir el panel de  Service Worker en el panel de Applications y haga clic en  inspect en el funcionamiento service worker. Si eso no funciona, consulte la sección sobre consejos para service workers directo de la prueba.

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