Aplicaciones web progresivas (PWA): 6.5. Usando service workers para pre-cache de App Shell

En primer lugar, necesitamos abrir la caché con caches.open() y proporcione un nombre de caché. Proporcionar un nombre de memoria caché permite versión archivos o datos desde el shell de la aplicación para que podamos fácilmente actualizar uno pero no afecta a la otra.

Una vez que la caché está abierta, entonces podemos llamar cache.addAll(), que toma una lista de URLs, obtiene desde el servidor y añade la respuesta a la caché. Desafortunadamente, cache.addAll() es atómica, si alguno de lo archivos fallan, la caché toda paso falla!

Bien, vamos a comenzar familiarizándose con cómo puede utilizar DevTools para entender y depurar los trabajadores del servicio. Antes de recargar la página, abrir DevTools, ir al panel de Service Worker en el panel de la Application. Debe verse así.

Cuando vea una página en blanco como esta, significa que la página actualmente no tiene los trabajadores de servicio registrado.

Ahora, vuelva a cargar la página. El panel de servicio trabajador ahora debería verse como esto.

Cuando vea información como esta, significa que la página tiene un service workers funcionando.

OK, ahora estamos vamos a hacer un breve desvío y demostrar un gotcha que se puede encontrar en el desarrollo de los service workers. Para demostrar, vamos a añadir un activate al detector de eventos, a continuación de el detector de eventos install en el archivo service-worker.js.

self.addEventListener('activate', function(e) {
  console.log('[ServiceWorker] Activate');
});

El evento activate se desencadena cuando se inicia el service worker.

Abrir la consola DevTools y recargar la página, cambiar al panel Service Worker Inspeccione en el panel de la aplicación y haga clic en el service worker activado. Que esperar ver el mensaje de [ServiceWorker] Activate] conectado a la consola, pero no sucedió. Compruebe hacia fuera el panel de Service Workers y se puede ver que el nuevo service workero (que incluye la escucha de evento activate) parece estar en un estado de "waiting".

Básicamente, el antiguo service worker sigue controlando la página mientras hay una tab abierta a la página. Por lo tanto, podría cerrar y volver a abrir la página o pulse el botón de skipWaiting, pero una solución a largo plazo es que sólo la actualización en checkbox Update on Reload verificación actualizar en el panel de Service Worker de DevTools. Cuando este checkbox está activado, el service worker a la fuerza se actualiza cada vez que vuelve a cargar la página.

Ahora activar el checkbox update on reload.