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.