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

6.7 Usando service workers para pre-cache de App Shell

Por último, vamos a actualizar la lista de archivos necesarios para la shell de la aplicación. En la matriz, tenemos que incluir todos los archivos de nuestra aplicación necesita, incluyendo imágenes, JavaScript, hojas de estilo, etcetera. En la parte superior del archivo service-worker.js, reemplazar var filesToCache = []; con el código siguiente:







var filesToCache = [
  '/',
  '/index.html',
  '/scripts/app.js',
  '/styles/inline.css',
  '/images/clear.png',
  '/images/cloudy-scattered-showers.png',
  '/images/cloudy.png',
  '/images/fog.png',
  '/images/ic_add_white_24px.svg',
  '/images/ic_refresh_white_24px.svg',
  '/images/partly-cloudy.png',
  '/images/rain.png',
  '/images/scattered-showers.png',
  '/images/sleet.png',
  '/images/snow.png',
  '/images/thunderstorm.png',
  '/images/wind.png'
];






Asegúrese de incluir todas las permutaciones de nombres de archivo, por ejemplo nuestra aplicación se sirve de  index.html, pero también pueden ser solicitado como  /  se solicita desde el servidor envía index.html cuando una carpeta raíz. Usted podría tratar con esto en el método fetch, pero requeriría cubierta especial que puede llegar a ser complejo.




Nuestra aplicación no funciona offline bastante todavía. Hemos almacenado en caché los componentes de shell de la aplicación, pero todavía tenemos que cargarlos en la memoria caché local.




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