Share
La API de Service Worker para los navegadores permite a los diseñadores web ofrecer a los visitantes algo que nunca antes habían tenido: acceso a sitios o aplicaciones web incluso sin conexión, ya sea por períodos cortos o largos de tiempo..
Si desea asegurarse de que un visitante aún pueda leer su sitio mientras atraviesa un túnel de tren, o si desea crear aplicaciones que no requieran una conexión a Internet, los trabajadores de servicio ofrecen la solución perfecta.
Al igual que los trabajadores de servicio son excelentes, cuando comienzas a codificarlos por primera vez, hay algunos inconvenientes que pueden ralentizar tu progreso, a menos que estés al tanto de cuáles son esos inconvenientes. Este tutorial le proporcionará cinco consejos esenciales para el desarrollo del trabajador de servicios, y esperamos que lo ayuden a evitar estos contratiempos y le evite los dolores de cabeza asociados a la solución de problemas..
Si usted es nuevo en el tema de los trabajadores de servicio, consulte nuestro curso para principiantes Trabajadores de servicio simple para sitios web sin conexión y el libro En línea, de Jeremy Keith, ambos disponibles en Envato Elements.
El primer problema que podría hacerle tropezar cuando escribe a su primer trabajador de servicio es que probablemente hará lo que siempre hace y colocará su script en un subdirectorio llamado js o guiones. Sin embargo, con los trabajadores de los servicios, esta acción común puede ser problemática.
La razón es que el alcance de su trabajador de servicio está, por defecto, definido por su ubicación. Qué significa eso? Significa que si pones tu guión en una / js directorio de su alcance ahora se limita a ese / js directorio. Como resultado, solo puede manejar solicitudes de página que llegan a través de www.yoursite.com/js/, e ignorará completamente otras solicitudes, como aquellas a través de www.yoursite.com o www.yoursite.com/news/ por ejemplo.
Este alcance limitado a su vez significa que no podrá proporcionar servicios de respaldo fuera de línea para la mayoría de su sitio. Para que su trabajador de servicio pueda manejar cualquier solicitud que llegue a través de cualquier parte de su sitio, su alcance debe abarcar todo..
Nota: realmente puede anular el alcance predeterminado de su trabajador de servicio al registrarlo, por ejemplo,.
Accentsconagua
navigator.serviceWorker.register ('/ sw.js', scope: '/'); Con este enfoque, aún puede guardar todos sus scripts en un subdirectorio si hacerlo es muy importante para su proyecto.
Pero, en términos generales, el enfoque más sencillo es colocar a su trabajador de servicio en el directorio raíz, estableciendo automáticamente su alcance para cubrir todo el sitio..
Si bien los trabajadores de servicios son compatibles con todos los navegadores principales, en este momento Chrome o Chromium es posiblemente el mejor navegador para desarrollarlos. Esto se debe al muy útil panel de aplicaciones, que se encuentra en las Herramientas para desarrolladores. Cuando estés pasando por el proceso de desarrollo, vas a vivir en esta pestaña:
En esta pestaña hay una sección dedicada para los trabajadores de servicios donde puede verificar que su script esté registrado, activo y en ejecución. También puede usar esta pestaña para simular que está desconectado, omitir temporalmente a sus trabajadores de servicio y anular el registro manual de los scripts anteriores que ya no necesita.
Además de no incluir scripts en un subdirectorio, otro hábito de desarrollo que tendrá que interrumpir cuando reúna a los trabajadores del servicio es usar "Hard Reload" o "Empty Cache and Hard Reload". Probablemente haya hecho esto miles de veces al probar sitios, utilizando la funcionalidad para purgar su caché y asegurarse de ver un reflejo preciso de sus cambios de desarrollo. Pero con los trabajadores del servicio, esto no tendrá el efecto deseado..
Cuando tiene un trabajador de servicio registrado y activo, cualquier uso de "Recarga difícil" lo omitirá por completo. Puede volver a cargar su sitio, ver que su código no se ha ejecutado de la forma esperada y cree que ha cometido un error, pero luego se dio cuenta de que el script nunca se ejecutó en primer lugar..
Así que la mala noticia es que "Hard Reload" y "Empty Cache and Hard Reload" están fuera de los límites durante el desarrollo del trabajador de servicio, lo que nos lleva a la siguiente pregunta:
¿Cómo puede actualizar correctamente su página y probar los cambios en el código de su trabajador de servicio si no puede usar “Recarga dura” o “Caché vacía y Recarga dura”?
La respuesta a esta pregunta se encuentra en los siguientes dos consejos:
De forma predeterminada, cuando actualiza una página en la que está probando a un trabajador del servicio, no verá realmente los resultados de ninguno de los cambios en su código. Esto se debe a que la versión del script que inicialmente se registró es la que permanece activa en el navegador, incluso después de la recarga de la página, a menos que realice una acción explícita para actualizarla..
De nuevo, aquí tenemos una situación en la que podría estar actualizando su página y preguntándose por qué los cambios en su código no están surtiendo efecto, a menos que esté al tanto de las peculiaridades de los trabajadores de servicio..
Para asegurarse de que siempre esté cargando la última versión de su script, vaya al Aplicaciones pestaña y compruebe el Actualizar en Reload caja. Esto garantiza que cada vez que vuelva a cargar la página (y recuerde, use solo la recarga normal, no la recarga), el navegador actualizará automáticamente el trabajador de servicio para usted..
Nota: existe la opción adicional de hacer clic en el Actualizar enlace que se muestra al lado de su trabajador de servicio registrado, pero usar el enfoque automatizado para recargar es generalmente más fácil.
La característica final, muy útil, de la Aplicaciones La pestaña que vamos a tocar es la capacidad de mirar dentro de los objetos almacenados en el caché y eliminarlos manualmente según sea necesario. Dado que no queremos usar Caché vacío y recarga dura, Esta funcionalidad se convertirá en una parte esencial del proceso de desarrollo del trabajador de servicios..
En la columna izquierda de la Aplicaciones pestaña, verás un área etiquetada Almacenamiento en caché. Si expande esta área, podrá ver los objetos de caché almacenados que se relacionan con la URL actual.
Haga clic en cualquiera de estos elementos y podrá inspeccionar su contenido, lo cual es muy útil para verificar que los recursos que desea servir sin conexión se están agregando correctamente a la memoria caché por parte del trabajador de servicio..
Para deshacerse de los objetos de caché que ya no necesita, simplemente haga clic derecho en un objeto y elija Borrar.
Entre esta función de eliminación de objetos de caché, y la Actualizar en Reload casilla de verificación, está listo para continuar usando la recarga normal de la página mientras se asegura de probar adecuadamente los últimos cambios en su trabajo.
Para obtener más información sobre los trabajadores de servicios, consulte nuestro nuevo curso Trabajadores de servicios simples para sitios web sin conexión, y el libro En línea, de Jeremy Keith, ahora disponible en Envato Elements.
