En este codelab, se muestra cómo registrar un service worker desde tu aplicación web 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 cuando trabajas con service worker.
Familiarízate con el proyecto de muestra
Los archivos del proyecto de muestra más relevantes para este codelab son los siguientes:
register-sw.jscomienza vacío, pero contendrá el código que se usó para registrar el service worker. Ya se está cargando con una etiqueta<script>dentro delindex.htmldel proyecto.service-worker.jstambién está vacío. Es el archivo que contendrá el service worker de este proyecto.
Agrega el código de registro del service worker
No se usará un service worker (incluso uno vacío, como el archivo service-worker.js actual) a menos que primero se registre. Puedes hacerlo mediante una llamada a:
navigator.serviceWorker.register(
'/service-worker.js'
)
dentro del archivo register-sw.js.
Sin embargo, antes de agregar ese código, debes tener en cuenta algunos puntos.
En primer lugar, no todos los navegadores admiten service worker. En especial, las versiones anteriores de navegadores que no se actualizan automáticamente. Por lo tanto, se recomienda llamar a navigator.serviceWorker.register() de forma condicional, después de verificar si se admite navigator.serviceWorker.
En segundo lugar, cuando registras un service worker, el navegador ejecuta el código en tu archivo service-worker.js y puede comenzar a descargar URLs para propagar las memorias caché, según el código de los controladores de eventos install y activate del service worker.
La ejecución de código adicional y la descarga de elementos pueden consumir recursos valiosos que tu navegador, de otro modo, podría usar para mostrar la página web actual. Para evitar esta interferencia, se recomienda retrasar el registro de un service worker hasta que el navegador haya terminado de renderizar la página actual. Una forma conveniente de calcular esto es esperar hasta que se active el evento window.load.
Uniendo esos dos puntos, agrega este código de registro de service worker de uso general 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
Tu archivo service-worker.js es el lugar donde normalmente iría toda la lógica de la implementación de tu service worker. Usarás una combinación de eventos de ciclo de vida de service worker, la API de Cache Storage y conocimiento sobre el tráfico de red de tu app web para crear un service worker elaborado a la perfección y listo para controlar todas las solicitudes de tu app web.
Pero... eso es todo para aprender más adelante. En esta etapa, el objetivo es observar varios eventos de service worker y familiarizarse con el uso de las Herramientas para desarrolladores de Chrome a fin de depurar el estado del service worker.
Para ello, agrega el siguiente código a service-worker.js, que registrará mensajes en la consola de Herramientas para desarrolladores en respuesta a varios eventos (pero no hará mucho 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 de Herramientas para desarrolladores
Ahora que agregaste el código a los archivos register-sw.js y service-worker.js,
es hora de visitar la versión publicada del proyecto de muestra y observar
el service worker en acción.
- Para obtener una vista previa del sitio, presiona Ver app. Luego, presiona Pantalla completa
. - Presiona "Control + Mayús + J" (o bien "Comando + Opción + J" en Mac) para abrir Herramientas para desarrolladores.
- Haz clic en la pestaña Consola.
Deberías ver algo similar a los siguientes mensajes de registro, que muestren que el service worker se instaló y activó:
Luego, visita la pestaña Applications y selecciona el panel Service Workers. Deberías ver un resultado similar al siguiente:
Esto te indica que hay un service worker con una URL de origen de
service-worker.js, para la app web solar-donkey.glitch.me, que está
activada y en ejecución. También indica que, en este momento, hay un cliente (pestaña
abierta) que está bajo el control del service worker.
Puedes usar los vínculos de este panel, como Unregister o stop, para realizar cambios en el service worker registrado actualmente con fines de depuración.
Activa el flujo de actualización del service worker
Uno de los conceptos clave que debes comprender cuando desarrollas con service worker es la idea de un flujo de actualización.
Después de que los usuarios visiten una app web que registra un service worker, obtendrán
el código de la copia actual de service-worker.js instalada en su
navegador local. Pero ¿qué sucede cuando actualizas la versión de service-worker.js que se almacena en tu servidor web?
Cuando un visitante recurrente regresa a una URL dentro del alcance de un service worker, el navegador solicitará automáticamente el último service-worker.js y verificará si hay cambios. Si algo es diferente en la secuencia de comandos del service worker, el nuevo service worker tendrá la oportunidad de instalarse, activarse y, finalmente, tomar el control.
Puedes simular este flujo de actualización si regresas al editor de código de tu proyecto y realizas 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 en vivo de tu app de ejemplo y vuelve a cargar la página con la pestaña de la aplicación de Herramientas para desarrolladores aún abierta. Deberías ver un resultado similar al siguiente:
Esto muestra que hay dos versiones de tu service worker instaladas en este
punto. La versión anterior, que ya se activó, se está ejecutando y tiene el control de la página actual. A continuación, se muestra la versión actualizada del service worker. Se encuentra en el estado waiting y permanecerá esperando hasta que se cierren todas las pestañas abiertas que controla el service worker anterior.
Este comportamiento predeterminado garantiza que, si tu nuevo
proceso de trabajo de servicio tiene una diferencia fundamental en el comportamiento del anterior, como un
controlador fetch que responde con recursos que son incompatibles con versiones
anteriores de tu app web, no se aplicará hasta que un usuario cierre todas
las instancias anteriores de tu app web.
En resumen
Ahora deberías conocer bien el proceso de registrar un service worker y observar su comportamiento con las Herramientas para desarrolladores de Chrome.
Ahora estás en una buena posición para comenzar a implementar estrategias de almacenamiento en caché y todo lo bueno que ayudará a que tu app web se cargue de forma confiable y rápida.