¿Alguna vez te has preguntado cómo algunos sitios web parecen seguir funcionando incluso cuando no estás conectado? El secreto es simple: estos sitios web tienen trabajadores de servicio.
Los trabajadores de servicios son la tecnología clave detrás de muchas de las funciones similares a las aplicaciones nativas de las aplicaciones web modernas.
¿Qué son los trabajadores de servicios?
Los trabajadores de servicios son un tipo especializado de Trabajadores web de JavaScript. Un service worker es un archivo JavaScript que funciona un poco como un servidor proxy. Captura las solicitudes de red salientes de su aplicación, lo que le permite crear respuestas personalizadas. Podría, por ejemplo, entregar archivos almacenados en caché al usuario cuando no esté conectado.
Los trabajadores de servicio también le permiten agregar funciones como sincronización en segundo plano a sus aplicaciones web.
¿Por qué trabajadores de servicios?
Los desarrolladores web llevan mucho tiempo intentando ampliar las capacidades de sus aplicaciones. Antes de que aparecieran los trabajadores de servicio, podía usar varias soluciones para que esto fuera posible. Uno particularmente notable fue AppCache, que hizo que los recursos de almacenamiento en caché fueran convenientes. Desafortunadamente, tenía problemas que la convertían en una solución poco práctica para la mayoría de las aplicaciones.
AppCache parecía ser una buena idea porque le permitía especificar activos para almacenar en caché con mucha facilidad. Sin embargo, hizo muchas suposiciones sobre lo que estaba tratando de hacer y luego se rompió horriblemente cuando su aplicación no siguió exactamente esas suposiciones. Lea el de Jake Archibald (desafortunadamente titulado pero bien escrito) La caché de aplicaciones es un idiota para más detalles. (Fuente: MDN)
Los trabajadores de servicios son el intento actual de reducir las limitaciones de las aplicaciones web, sin los inconvenientes de tecnología como AppCache.
Casos de uso para trabajadores de servicios
Entonces, ¿qué te dejan hacer exactamente los trabajadores de servicios? Los trabajadores de servicio le permiten agregar características que son características de las aplicaciones nativas a su aplicación web. También pueden proporcionar una experiencia normal en dispositivos que no admiten trabajadores de servicio. Las aplicaciones como esta a veces se llaman Aplicaciones web progresivas (PWA).
Estas son algunas de las características que hacen posibles los trabajadores de servicio:
- Permitir que el usuario siga usando la aplicación (o al menos partes de ella) cuando ya no esté conectado a Internet. Los trabajadores del servicio logran esto sirviendo activos almacenados en caché en respuesta a solicitudes.
- En los navegadores basados en Chromium, un trabajador de servicio es uno de los requisitos para que una aplicación web se pueda instalar.
- Los trabajadores de servicio son necesarios para que su aplicación web pueda implementar notificaciones automáticas.
El ciclo de vida de un trabajador de servicio
Los trabajadores del servicio pueden controlar las solicitudes de un sitio completo o solo de una parte de las páginas del sitio. Una página web en particular solo puede tener un trabajador de servicio activo y todos los trabajadores de servicio tienen un ciclo de vida basado en eventos. El ciclo de vida de un trabajador de servicio generalmente se ve así:
- Alta y descarga del trabajador. La vida de un service worker comienza cuando un archivo JavaScript lo registra. Si el registro es exitoso, el trabajador del servicio se descarga y luego comienza a ejecutarse dentro de un hilo especial.
- Cuando se carga una página controlada por el trabajador del servicio, el trabajador del servicio recibe un evento de "instalación". Este es siempre el primer evento que recibe un trabajador de servicio y puede configurar un oyente para este evento dentro del trabajador. El evento 'instalar' generalmente se usa para obtener y/o almacenar en caché los recursos que necesita el trabajador del servicio.
- Una vez que el trabajador del servicio finaliza la instalación, recibe un evento de "activación". Este evento permite que el trabajador limpie los recursos redundantes utilizados por los trabajadores de servicio anteriores. Si está actualizando un trabajador de servicio, el evento de activación solo se activará cuando sea seguro hacerlo. Esto es una vez que no hay páginas cargadas que aún usen la versión anterior del trabajador del servicio.
- Después de eso, el trabajador del servicio tiene el control total de todas las páginas que se cargaron después de que se registraron con éxito.
- La última fase del ciclo de vida es la redundancia, que ocurre cuando el service worker se elimina o se reemplaza por una versión más nueva.
Cómo usar trabajadores de servicio en JavaScript
La API del trabajador de servicio (MDN) proporciona la interfaz que le permite crear e interactuar con trabajadores de servicio en JavaScript.
Los trabajadores del servicio se ocupan principalmente de las solicitudes de red y otros eventos asincrónicos. Como resultado, la API del trabajador del servicio hace un uso intensivo de Promesas y programación asíncrona.
Para crear un trabajador de servicio, lo primero que debe hacer es llamar al navigator.serviceWorker.registro() método. Así es como podría verse:
si ('trabajador del servicio' en el navegador) {
navigator.serviceWorker.register('/sw.js').then(función(registro){
consola.log('El registro del trabajador del servicio se realizó correctamente:', registro);
}).catch((error) => { consola.log('El registro del trabajador del servicio falló:', error); });
} más {
consola.log('Los trabajadores de servicio no son compatibles.');
}
El bloque if más externo realiza la detección de características. Garantiza que el código relacionado con los trabajadores del servicio solo se ejecutará en navegadores compatibles con los trabajadores del servicio.
A continuación, el código llama al Registrarse método. Le pasa la ruta al trabajador del servicio (relativo al origen del sitio) para registrarlo y descargarlo. los Registrarse El método también acepta un parámetro opcional llamado alcance, que se puede usar para limitar las páginas controladas por el trabajador. Los trabajadores del servicio controlan todas las páginas de una aplicación de forma predeterminada. los Registrarse El método devuelve una Promesa que indica si el registro fue exitoso.
Si la promesa se resuelve, el trabajador del servicio se registró correctamente. Luego, el código imprime un objeto que representa al trabajador de servicio registrado en la consola.
Si el proceso de registro falla, el código detecta el error y lo registra en la consola.
A continuación, aquí hay un ejemplo simplificado de cómo se vería el propio trabajador de servicio:
self.addEventListener('Instalar en pc', (evento) => {
evento.esperarhasta(nuevoPromesa((resolver, rechazar) => {
consola.log("haciendo cosas de configuración")
resolver()
}))
consola.log("El trabajador de servicio terminó de instalar")
})self.addEventListener('activar', (evento) => {
evento.esperarhasta(nuevoPromesa((resolver, rechazar) => {
consola.log("haciendo cosas de limpieza!")
resolver()
}))
consola.log('activación hecha!')
})
self.addEventListener('buscar', (evento) => {
consola.log("Solicitud interceptada", evento)
});
Este trabajador de servicio de demostración tiene tres detectores de eventos, registrados contra sí mismo. Tiene uno para el evento 'instalar', el evento 'activar' y el evento 'buscar'.
Dentro de los dos primeros oyentes, el código usa el esperar hasta método. Este método acepta una Promesa. Su trabajo es asegurarse de que el trabajador del servicio esperará a que la Promesa se resuelva o rechace antes de pasar al siguiente evento.
El detector de búsqueda se activa cada vez que se realiza una solicitud de un recurso que controla el trabajador del servicio.
Los recursos controlados por un trabajador de servicio incluyen todas las páginas que controla, así como los activos a los que se hace referencia en esas páginas.
Mejore sus aplicaciones web con Service Workers
Los trabajadores de servicios son un tipo especial de trabajadores web que tienen un propósito único. Se sientan frente a las solicitudes de red para habilitar funciones como el acceso a aplicaciones sin conexión. El uso de trabajadores de servicio en una aplicación web puede mejorar enormemente su experiencia de usuario. Puede crear trabajadores de servicios e interactuar con ellos mediante la API de trabajadores de servicios.
