Students Save 30%! Learn & create with unlimited courses & creative assets Students Save 30%! Save Now
Advertisement
  1. Web Design
  2. Service Workers
Webdesign

5 Consejos Esenciales para el Desarrollo del Trabajador de Servicio

by
Difficulty:IntermediateLength:ShortLanguages:

Spanish (Español) translation by Betty (you can also view the original English article)

La API de Trabajador de Servicio para los navegadores permite a los diseñadores web que ofrecer algo que nunca antes había tenidos: acceso a sitios o aplicaciones web incluso cuando fuera de línea, ya sea para cortos o largos periodos de tiempo.

Si usted quiere asegurar el visitante todavía puede leer su sitio yendo a través de un túnel de tren, o para crear aplicaciones que no requieren una conexión a internet, trabajadores de servicios proporcionan la solución perfecta.

Tan grande como son los trabajadores del servicio, cuando comenzar codificación por primera vez hay unos enganches que pueden retrasar su progreso – a menos que seas conscientes de los problemas en el frente. Este tutorial te proporcionará cinco consejos esenciales para el desarrollo del trabajador de servicio, y esperamos que te ayudar a evitar estos hipos y ahorrarle los dolores de cabeza problemas asociados.

Antes de Empezar

Si eres nuevo en servicio los trabajadores salida curso Simple trabajadores de los de nuestro principiante servicios Offline de páginas web y libro de Jeremy Keith van fuera de línea, ambos disponibles en Envato elementos.

1. Ponga su servicio trabajador Script en el directorio raíz

El primer ejemplar que podría viaje hasta cuando escribes el primer trabajador de servicio, es que probablemente harás lo que siempre hago y pone tu script en un subdirectorio llamado js o scripts. Sin embargo, con los trabajadores del servicio, esta acción común y corriente puede ser problemática.

La razón es que el alcance de su trabajador de servicio, por defecto, definido por su ubicación. ¿Qué significa eso? Esto significa que si pones tu script en un directorio /js su alcance es ahora limitado a ese directorio /js. Como resultado sólo puede manejar las solicitudes de páginas que llegan a través de www.yoursite.com/js/ y completamente ignora otras peticiones, como las que a través de www.yoursite.com o www.yoursite.com/news/ por ejemplo.

Este alcance limitado significa a su vez que no podrá proporcionar reservas fuera de línea para la mayoría de su sitio. Para que el trabajador de servicios poder manejar las solicitudes que vienen a través de cualquier parte del sitio, su alcance debe ser integral.

Nota: puede realmente reemplazar alcance de predeterminado del trabajador de su servicio al registrar, por ejemplo

Con este enfoque aún puede albergar todos los scripts en un subdirectorio si hacerlo es muy importante para su proyecto.

Pero en términos generales, el enfoque más fácil es que el trabajador de servicio en el directorio raíz, por lo tanto ajuste automáticamente su alcance para cubrir todo el sitio.

2. Utilice el Panel de la Aplicación en Chrome / Chromium Dev Tools

Mientras que los trabajadores de servicio son compatibles con todos los principales navegadores, en el momento de cromo o cromo es el mejor navegador para desarrollar en. Esto es debido al muy útil panel de Aplicaciones, en las herramientas de desarrollador. Cuando usted va a través del proceso de desarrollo está más o menos va a vivir en esta ficha:

En esta pestaña hay una sección dedicada para los trabajadores del servicio donde usted puede verificar que su script está registrado, activo y funcionando. Puede también utilizar esta ficha para simular estar offline, ignorar temporalmente sus trabajadores de servicio y manualmente eliminar scripts anteriores que ya no es necesario.

3. No Utilice Recargue Duro

Así como no poner scripts en un subdirectorio, otro hábito de desarrollo que tendrás que romper al poner juntos los trabajadores del servicio está utilizando "Recargue Duro" o "Vaciar Caché y Recargue Duro". Probablemente has hecho esta miles de veces cuando sitios de prueba, utilizando la función purgar la caché y asegurarse de que ven un fiel reflejo de los cambios de desarrollo. Pero con los trabajadores del servicio esto no consigue el efecto deseado.

Cuando usted tiene un trabajador de servicio registrado y activo, el uso de "Recargue duro" totalmente puente. Difícilmente podría cargar su sitio, ver que el código no ha ejecutado la manera de esperar y creo que has cometido un error, sólo para darse cuenta más tarde de que la escritura nunca funcionó en el primer lugar.

Así pues las malas noticias es "Recargue Duro" y "Vaciar caché y Recargue Duro" están fuera de la cancha durante el desarrollo del trabajador de servicio, que nos lleva a nuestra siguiente pregunta:

¿Cómo se puede correctamente actualizar su página y probar los cambios de código de trabajador de servicio si se puede utilizar "Recargue Duro" o "Vaciar Caché y Recargue Duro"?

La respuesta a esta pregunta se encuentra en las dos puntas siguientes:

4. Marque la Casilla "Actualización Reload"

De forma predeterminada, cuando se actualiza una página en la que estás pruebas un trabajador de servicio, no realmente ves los resultados de cualquiera de los cambios de código. Esto es porque la versión del script que inicialmente registrada es la que se mantiene activo en el navegador, incluso después de carga la página, si no se toman medidas explícitas para actualizarlo.

Así que de nuevo aquí, tenemos una situación donde se podría actualizar su página y preguntándose por qué los cambios de código no están teniendo efecto, salvo que seas consciente de las peculiaridades de los trabajadores del servicio.

Para asegurarse de que usted está cargando siempre la última versión de su guión, vaya a la pestaña de Aplicaciones y Comprobar la Actualización en la caja de recarga. Esto asegura que cada vez que vuelva a cargar la página, (y recuerde, use sólo a cargar normal, no es difícil volver a cargar), el navegador actualizará automáticamente el trabajador de servicio para usted.

Nota: existe la opción adicional de clic en el enlace de Actualización aparece junto a su trabajador de servicios registrados, pero utilizando el enfoque automatizado en recarga es típicamente más fácil.

5. Inspeccione y Eliminar Manualmente los Objetos de Caché

La característica final, muy práctica, de la ficha de Aplicaciones que vamos a tocar es la capacidad de ojeada dentro de objetos almacenados en la caché y borrarlos manualmente según sea necesario. Dado que no queremos Vaciar Caché y Volver a Cargar Duro, esta funcionalidad se convertirá en una parte esencial del proceso de desarrollo de trabajo de servicio.

En la columna de la izquierda de la ficha Aplicaciones, verás un área etiquetado almacenamiento caché. Si expande esta área, usted será capaz de ver los objetos de Almacenamiento en Caché de información que se relacionan con la URL actual.

Haga clic en cualquiera de estos artículos y usted puede examinar su contenido, que es muy útil para verificar que recursos que desea servir fuera de línea se están agregando correctamente en la caché por el trabajador de servicio.

Deshacerse de caché de objetos que ya no necesita, simplemente haga clic derecho sobre un objeto y elija Eliminar.

Entre esta función de eliminación del objeto de caché y la Actualización en casilla de verificación volver a cargar, eso es todo a pegarse con el uso de la recarga de página normal asegurando todavía que correctamente estas pruebas los últimos cambios a tu trabajo.

Para Resumir

  • En general, poner scripts de trabajador de servicio en el directorio raíz de tu proyecto para que todo el sitio está a su alcance.
  • Usar Aplicación de Chrome / Chromium’s tab mientras se desarrolla.
  • No utiliza Recarga Dura o Vaciar Caché y Recarga Dura.
  • Compruebe la Actualización en Recarga de actualizar en la ficha de Aplicación para garantizar al trabajador de servicio registrado hasta la fecha.
  • Eliminar manualmente los objetos de caché cuando sea necesario a través de la sección de Almacenamiento de Caché de la ficha de Aplicación, donde también se puede inspeccionar contenido objeto de la caché.

Para más información sobre servicio trabajadores revisa nuestro nuevo curso Simple de los trabajadores de servicio Offline de páginas web y libro de Jeremy Keith van fuera de línea, ahora disponible en Envato elementos.

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.