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

6.6 Usando service workers para pre-cache de App Shell

Eso es todo por ahora en cuanto a inspección y depuración de service workers en  DevTools. Le mostraremos algunos trucos más más adelante. Volvamos a la construcción de su aplicación.

Vamos a ampliar el detector de eventos activate con alguna lógica para actualizar la caché. En el archivo service-worker.js, actualice el código de el detector de eventos activate  para que coincida con el código siguiente.

self.addEventListener('activate', function(e) {
  console.log('[ServiceWorker] Activate');
  e.waitUntil(
    caches.keys().then(function(keyList) {
      return Promise.all(keyList.map(function(key) {
        if (key !== cacheName) {
          console.log('[ServiceWorker] Removing old cache', key);
          return caches.delete(key);
        }
      }));
    })
  );
  return self.clients.claim();
});

Este código garantiza que el service worker actualiza su caché cada vez que alguno de los archivos de shell de la aplicación cambia. En orden para que funcione, necesita incrementar la variable  cacheName en la parte superior de su archivo service worker.

La última sentencia fija un caso de esquina que se puede leer en el siguiente cuadro de información (opcional).




Cuando la aplicación está completa, self.clients.claim() reparaciones en un caso de la esquina en que la aplicación no estaba devolviendo los datos más recientes. Puede reproducir el caso de la esquina comentando la línea de abajo y luego hacer los siguientes pasos:

 1) de la carga de la aplicación por primera vez para que los datos iniciales de la ciudad de Nueva York se muestran

 2) Pulse el botón actualizar en la aplicación

 3) ir sin conexión 

4) volver a cargar la aplicación. 

Que esperar a ver los más recientes datos de NYC, pero realmente ves los datos iniciales. Esto sucede porque el service worker no está activado aún. Self.clients.Claim() esencialmente le permite activar el trabajador de servicio más rápido.

6 .2. Usando service workers para pre-cache de App Shell

Los activos del sitio en caché

Cuando el trabajador de servicio está registrado, un evento de instalación se activa la primera vez que el usuario visita la página. En este controlador de eventos almacenará en caché todos los activos que son necesarios para la aplicación.

NO debe utilizarse el código siguiente en la producción, abarca solamente los casos de uso más básicos y es fácil llegar a ti mismo en un estado donde nunca actualizará la shell de la aplicación. Asegúrese de revisar la sección que habla sobre los peligros de esta aplicación y cómo evitarlos.

Cuando el trabajador de servicio, debe abrir el objeto de caches y rellenarlo con los activos necesarios para cargar el Shell de la aplicación. Cree un archivo denominado service-worker.js en la carpeta raíz de aplicación (que debe ser  your-first-pwapp-master/work). Este archivo debe vivir en la raíz de la aplicación porque el alcance de los trabajadores del servicio está definido por el directorio en el que reside el archivo. Añadir este código a su archivo service-worker.js:

var cacheName = 'weatherPWA-step-6-1';
var filesToCache = [];

self.addEventListener('install', function(e) {
  console.log('[ServiceWorker] Install');
  e.waitUntil(
    caches.open(cacheName).then(function(cache) {
      console.log('[ServiceWorker] Caching app shell');
      return cache.addAll(filesToCache);
    })
  );
});