¡Buen dia amigos!Probablemente, muchos de ustedes hayan oído hablar de tal innovación en el ecosistema de JavaScript como Service Workers, que son un elemento clave del desarrollo web moderno. Los trabajadores de servicios se están volviendo cada vez más populares, principalmente debido a la popularidad de las aplicaciones web progresivas (PWA).Cuando escuché por primera vez acerca de ellos, me pregunté: “¿Cuándo deberíamos usar trabajadores de servicio? ¿En qué escenarios o contexto podemos usarlos?En este artículo, consideraremos varios ejemplos prácticos del uso de trabajadores del servicio, que luego, me atrevo a esperar, harán felices a sus usuarios.Creo que, antes de analizar ejemplos prácticos, es necesario al menos esbozar los fundamentos teóricos del trabajo de los trabajadores del servicio. Para los principiantes, esta será una buena ayuda en futuros emprendimientos.¿Qué es un trabajador de servicio?
Cersis Worker es un script ejecutado por un navegador en el proceso en segundo plano. Recuerde que un trabajador de servicio es completamente independiente de la página con la que interactúa o al que sirve (para servir).En esencia, un trabajador de servicio es un servidor proxy entre una aplicación web, un navegador y una red.Los trabajadores de servicios permiten que las aplicaciones web funcionen como aplicaciones nativas.Algunos datos sobre los trabajadores del servicio
- Los trabajadores del servicio no tienen acceso directo al DOM. Para hacer esto, utilizan el mecanismo para responder a las solicitudes a través de la interfaz postMessages.
- Los trabajadores de servicio son cancelados por la fuerza (detenidos) cuando no están en uso. Esto significa que son impulsados por eventos.
- Los trabajadores del servicio asumen el uso de promesas (promesas).
- Debido a las grandes capacidades, los trabajadores de servicio solo pueden usarse a través de HTTPS. En un servidor local, puede prescindir de HTTPS.
¿Cómo trabajan los trabajadores de servicio? Vistazo rápido
Los trabajadores de servicio le permiten interceptar las solicitudes del servidor y almacenarlas en caché para mejorar el rendimiento de la aplicación. Por lo tanto, las ganancias de productividad se logran mediante el almacenamiento en caché de todo el contenido.Pero es mejor verlo una vez, así que aquí hay una imagen que muestra el trabajo de un trabajador de servicios:Ciclo de vida del trabajador de servicio
Como mencioné anteriormente, los trabajadores del servicio trabajan independientemente de la página de control. Si desea instalar un trabajador de servicio en su aplicación, lo primero que debe hacer es registrarlo.Después de eso, el navegador que inició la instalación del trabajador del servicio pasa a segundo plano:
Casos de uso común
Ahora que sabemos cómo trabajan los trabajadores de servicios, es hora de hablar sobre dónde se usan.Almacenamiento en caché
Como se señaló anteriormente, los trabajadores del servicio pueden utilizarse para el almacenamiento en caché. Aquí hay unos ejemplos:- Solo almacenamiento en caché: tiene contenido estático que nunca cambia.
- Red o caché: desea mostrar a los usuarios contenido relevante con una condición de descarga rápida.
- Caché y actualización: desea mostrar contenido al instante y no le importa la sincronización periódica con el servidor.
- Caché, actualización y reinicio: desea mostrar el contenido lo más rápido posible, actualizando implícitamente sus partes individuales y mostrándolas de una manera "perfecta".
Empuje web
Web push permite a las aplicaciones enviar notificaciones push y mostrar el contenido recibido en respuesta a estas notificaciones.- Empuje y actualice el contenido: desea compartir (entregar y recibir) contenido disponible.
- Push y contenido: desea operar no solo con texto, sino también con otros tipos de información que enriquecen sus mensajes.
- Push saturado: desea mostrar imágenes, el proceso de arranque y otras cosas que mejoran el mensaje que desea entregar.
- Push y cliente: desea mostrar notificaciones según el estado de la aplicación.
Casos de uso más complejos.
API de análisis
Tengo una solicitud Y quiero agregarle la capacidad de monitorear el uso de la aplicación. Para hacer esto, tomo una API síncrona para actualizar los datos recopilados de vez en cuando.Balanceador de carga
Suponga que desea poder elegir el mejor proveedor de contenido en función del rendimiento del servidor. En este caso, necesita un trabajador de servicio para interceptar las solicitudes y realizar una selección.Le recomiendo que visite ServiceWorke.rs para obtener una visión más detallada de los trabajadores del servicio.Practicamos habilidades
Como siempre digo: "Si quieres aprender a nadar, métete al agua". Aprender una teoría es algo maravilloso, pero hasta que te ensucies las manos, no aprenderás nada.Registro de trabajador de servicio
Si volvemos a la ilustración del ciclo de vida de un trabajador de servicio, veremos que, en primer lugar, necesitamos instalarlo. Para hacer esto necesitamos registrarlo.
if('serviceWorker' in navigator){
console.log('- ')
window.addEventListener('load', () => {
navigator.serviceWorker
.register('/service-worker.js')
.then(registration => {
console.log(`- , scope: ${registration.scope}`)
})
})
.catch(error => {
console.log(` : ${error}`)
})
}
Puede verificar el trabajo del trabajador de servicio yendo a: Chrome: // inspect / # service-Workers.
Además, se puede obtener información sobre el estado del trabajador del servicio en las herramientas del desarrollador: Aplicación -> Trabajadores del servicio.
¿Que sigue?
Ahora necesitamos almacenar en caché todos los archivos. Podemos seleccionar archivos para el almacenamiento en caché. Así es como se ve:
const CACHE_NAME = 'example.com-v1'
const cacheAssets = ['index.html', 'about.html', 'js/main.js']
self.addEventListener('install', e => {
console.log('- ')
e.waitUntil(
caches
.open(CACHE_NAME)
.then(cache => {
console.log(' -: ')
cache.addAll(cacheAssets)
})
.then(() => {
self.skipWaiting()
})
)
})
Esto es lo que pasa aquí:- Determinamos el nombre del caché (example.com-v1).
- Seleccionamos archivos para el almacenamiento en caché. Para hacer esto, cree una matriz.
- Dentro del controlador de eventos "instalar", le decimos al navegador que espere a que se complete la promesa, luego abra el caché, que se guardará con el nombre "example.com-v1".
- Finalmente, agregue los archivos seleccionados al caché.
Eliminar caché no utilizado
A continuación, debemos eliminar las versiones antiguas de caché:
self.addEventListener('activate', e => {
console.log('- ')
e.waitUntil(
caches.keys().then(cacheNames => {
return Promise.all(
cacheNames.map(cache => {
if(cache !== CACHE_NAME){
console.log(' ')
return caches.delete(cache)
}
})
)
})
)
})
Recibir respuesta
Nada de lo anterior tiene sentido si no tenemos forma de obtener contenido en caché.Se puede obtener utilizando el controlador de eventos fetch:
self.addEventListener('fetch', e => {
e.respondWith(
fetch(e.request)
.then(res => {
const copyCache = res.clone()
caches.open(CACHE_NAME).then(cache => {
cache.put(e.request, copyCache)
})
return res
})
.catch(error => caches.match(e.request).then(res => res))
)
})
Todo el código se puede ver aquí .Gracias por su atención.