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.
Fuente: https://codelabs.developers.google.com/codelabs/your-first-pwapp/#5
No hay comentarios:
Publicar un comentario