Cómo trabajar con service workers

En este codelab, se muestra cómo registrar un service worker desde tu y usar las Herramientas para desarrolladores de Chrome para observar su comportamiento. También se abordan algunas técnicas de depuración que pueden resultarte útiles al tratar con service workers.

Familiarízate con el proyecto de muestra

Los archivos del proyecto de ejemplo más relevantes para este codelab son los siguientes:

  • Al principio, register-sw.js estará vacío, pero contendrá el código que se usó. para registrar el service worker. Ya se está cargando a través de un <script> etiqueta dentro del index.html del proyecto.
  • service-worker.js también está vacío. Es el archivo que contiene el service worker de este proyecto.

Agrega el código de registro del service worker

Un service worker (incluso uno vacío, como el archivo service-worker.js actual) no se usará a menos que sea registrado antes de empezar. Puedes hacerlo llamando a:

navigator.serviceWorker.register(
  '/service-worker.js'
)

dentro de tu archivo register-sw.js.

Sin embargo, antes de agregar el código, debes tener en cuenta algunos puntos. de servicio predeterminada.

En primer lugar, no todos los navegadores admiten service workers. Esto es especialmente cierto para las versiones anteriores de navegadores que no se actualizan automáticamente. Así que es una buena práctica llamar navigator.serviceWorker.register() de forma condicional, después de verificar si navigator.serviceWorker es compatible.

Segundo, cuando registras un service worker, el navegador ejecuta el código de tu service-worker.js archivo y es posible que comience a descargar URLs para propagar según el código en la carpeta de tu install y activate controladores de eventos.

Ejecutar código adicional y descargar elementos puede consumir valiosos que tu navegador podría usar para mostrar la configuración página web. Para evitar esta interferencia, se recomienda retrasar el registro de un service worker hasta que el navegador haya terminado de renderizar el página actual. Una forma conveniente de aproximarse a esto es esperar hasta que se active el evento window.load.

Uniendo esos dos puntos, agrega este service worker de uso general código de registro a tu archivo register-sw.js:

if ('serviceWorker' in navigator) {
  window.addEventListener('load', () => {
    navigator.serviceWorker.register('/service-worker.js');
  });
}

Agrega algún código de registro de service worker

Toda la lógica del service worker se encuentra en tu archivo service-worker.js. para la implementación. Usarías una combinación de las instancias de service worker eventos de ciclo de vida el API de Cache Storage, y conocimiento del tráfico de red de la app web para crear un entorno un service worker, listo para controlar todas las solicitudes de tu app web.

Pero eso es todo para aprender más tarde. En esta etapa, el enfoque es observar varios eventos de service worker, y familiarizarse con las Herramientas para desarrolladores de Chrome para depurar el estado de tu service worker.

Para ello, agrega el siguiente código a service-worker.js, que registrará mensajes a la consola de Herramientas para desarrolladores en respuesta a varios eventos (pero no más):

self.addEventListener('install', (event) => {
  console.log('Inside the install handler:', event);
});

self.addEventListener('activate', (event) => {
  console.log('Inside the activate handler:', event);
});

self.addEventListener(fetch, (event) => {
  console.log('Inside the fetch handler:', event);
});

Familiarízate con el panel Service Workers en Herramientas para desarrolladores

Ahora que tienes el código agregado a register-sw.js y service-worker.js es hora de visitar la versión publicada del proyecto de ejemplo y observar el service worker en acción.

  • Para obtener una vista previa del sitio, presiona Ver app. Luego, presiona Pantalla completa pantalla completa
  • Presiona "Control + Mayúsculas + J" (o "Comando + Opción + J" en Mac) para abrir DevTools.
  • Haz clic en la pestaña Consola.

Deberías ver un resultado similar al siguiente: que muestra que el service worker se instaló y activó:

Muestra que el service worker está instalado y activado.

Luego, visita la pestaña Applications y selecciona el panel Service Workers. Deberías ver un resultado similar al siguiente:

Muestra los detalles del service worker en el panel del service worker.

Esto indica que hay un service worker con una URL de origen de service-worker.js para la app web solar-donkey.glitch.me, que es actualmente se activan y están en ejecución. También indica que, actualmente, hay un cliente (abierto ) que controla el service worker.

Puedes usar los vínculos de este panel, como Unregister o stop, para realizar cambios en el trabajador de servicio registrado actualmente con fines de depuración.

Activa el flujo de actualización del service worker

Uno de los conceptos clave que hay que entender cuando se desarrolla con service workers es la idea de un flujo de actualización.

Después de que los usuarios visiten una app web que registre un service worker, finalizarán con el código de la copia actual de service-worker.js instalada en su navegador local. Pero ¿qué sucede cuando realizas actualizaciones en la versión de service-worker.js que se almacena en tu servidor web?

Cuando un visitante recurrente regresa a una URL que está dentro del alcance de un service worker el navegador solicitará automáticamente la última service-worker.js y comprueba si hay cambios. Si algo en la secuencia de comandos del service worker es diferente, el nuevo service worker tiene la oportunidad de instalar, y, con el tiempo, tomar el control.

Para simular este flujo de actualización, vuelve al editor de código de tu proyecto y realiza cualquier cambio en el código. Un cambio rápido sería reemplazar

self.addEventListener('install', (event) => {
  console.log('Inside the install handler:', event);
});

con

self.addEventListener('install', (event) => {
  console.log('Inside the UPDATED install handler:', event);
});

Después de realizar el cambio, regresa a la versión publicada de la app de ejemplo. vuelve a cargar la página con la pestaña de la aplicación de Herramientas para desarrolladores aún abierta. Deberías ver algo como lo siguiente:

Muestra dos versiones del service worker instaladas.

Verás que hay dos versiones de tu service worker instaladas en esta punto. La versión anterior, que ya estaba activada, se está ejecutando y control de la página actual. Se muestra la versión actualizada del service worker abajo. Está en el estado waiting y permanecerá en espera hasta que se cierren todas las pestañas abiertas que controla el service worker anterior.

Este comportamiento predeterminado garantiza que si tu nuevo tiene una diferencia fundamental en cuanto al comportamiento del service worker, fetch, que responde con recursos incompatibles con versiones anteriores versiones de tu aplicación web: no entrará en vigor hasta que el usuario las haya cerrado todas instancias anteriores de tu aplicación web.

En resumen

Ahora deberías estar familiarizado con el proceso de registrar un service worker y observar su comportamiento con las herramientas de Chrome DevTools.

Ahora estás en una buena posición para comenzar a implementar estrategias de almacenamiento en caché y todo lo que ayudará a que tu app web se cargue de forma confiable y rápida.