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