Estoy buscando la creación de aplicaciones web progresivas, y estaba perplejo sobre cómo funciona el trabajador de servicio. Tengo entendido que el trabajador del servicio es responsable de almacenar en caché los recursos que se utilizarán en caso de que el usuario pierda la conexión, pero no estoy seguro de cómo lo hace y no puedo encontrar ningún recurso para responder la pregunta.
Aprendí que Service Worker funciona creando un caché local en el archivo de índice de mi proyecto. Luego creé un archivo del trabajador del servicio que almacena una variable cache_name y cache_urls para almacenar el título del caché y las direcciones URL que quiero que el trabajador del servicio almacene en caché. Luego vinculo un detector de eventos a una función que esperará hasta que se abra el caché y luego agregue las direcciones URL de cache_urls al caché real.
Sé que todavía me faltan algunos pasos, pero esto al menos ha inicializado un trabajador de servicio en mi archivo.
La pregunta es bastante amplia y, por lo tanto, difícil de responder. Estabas buscando un buen recurso, así que aquí tienes uno .
En general, creo que su comprensión de los trabajadores del servicio es más o menos correcta, pero probablemente no esté registrando las devoluciones de llamada correctas y tal vez esté utilizando las API incorrectas.
Un trabajador de servicio puede ser responsable del almacenamiento en caché (entre otras cosas), pero en general solo le brinda la capacidad de interceptar llamadas http en una devolución de llamada: self.addEventListener('fetch', (event) => {}); (esta línea debe ir al archivo del trabajador del servicio y self refiere a la instancia del trabajador del servicio). Luego puede hacer lo que quiera en esa devolución de llamada. Una acción muy común es usar la API de caché para usar un caché manejado explícitamente para los datos:
self.addEventListener('fetch', (event) => { event.respondWith( //this returns the response from any cache and populates the cache with name 'v1' with the request's response from the server on a cache miss caches.match(event.request).then((resp) => { return resp || fetch(event.request).then((response) => { let responseClone = response.clone(); caches.open('v1').then((cache) => { cache.put(event.request, responseClone); }); return response; }).catch(() => { return caches.match('./sw-test/gallery/myLittleVader.jpg'); }) }) ); });Para todo esto, el trabajador de servicio debe estar registrado primero, aunque:
if ('serviceWorker' in navigator) { navigator.serviceWorker.register('./path-to-service-worker.js') .then((reg) => { console.log('Registration succeeded.); }).catch((error) => { console.log('Registration failed with ' + error); }); }