Trabajadores de servicios en Javascript

Qué es Service Worker:
un service worker es un script que se ejecuta de forma independiente en el fondo del navegador. Del lado del usuario, puede interceptar sus requests de red y decidir qué cargar ( fetch ).
Los trabajadores de servicio sirven principalmente funciones como sincronización en segundo plano, notificaciones automáticas y se usan comúnmente para aplicaciones ‘fuera de línea primero’, lo que brinda a los desarrolladores la oportunidad de tomar el control total sobre la experiencia del usuario.

Antes de que llegue el momento, ha habido una API llamada AppCache , que ha estado tratando de servir la función de experiencia fuera de línea. Sin embargo, ha habido numerosos problemas en la interfaz de la API de AppCache y Service Workers están aquí, repasándolos.

El ciclo de vida del trabajador del servicio:
el ciclo de vida del trabajador del servicio está completamente separado de la página web. Es un proxy de red programable, que finaliza cuando no se usa y se reinicia cuando se vuelve a necesitar. Los Service Workers dependen en gran medida del uso de Javascript Promises , por lo que es bueno repasarlos si son nuevos para usted.

Durante la instalación, el trabajador del servicio puede almacenar en caché algunos activos estáticos, como páginas web. Si el navegador almacena en caché los archivos correctamente, se instala el trabajador del servicio.

Posteriormente, el trabajador necesita ser activado. Durante la activación, el trabajador del servicio puede administrar y decidir qué sucederá con los cachés antiguos; por lo general, se eliminan y reemplazan con las nuevas versiones.

Por último, después de la activación, el trabajador del servicio toma el control de todas las páginas de su alcance, sin la página que registró inicialmente al trabajador del servicio , que debe actualizarse. El trabajador del servicio es inteligente en términos de uso de la memoria y será despedido si no hay nada que buscar y no ocurren eventos de mensajes.

A continuación se muestra una imagen del lugar de un trabajador de servicio entre el navegador y la red.

La string de solicitud del sitio web mediante Service Worker.

Requisitos previos:

1. HTTPS a menos que esté en localhost
   • Los trabajadores del servicio requieren el uso de una conexión HTTPS. Antes de la implementación, los trabajadores funcionan en el servidor localhost , pero si desea cargarlo en Internet, debe tener la configuración de HTTPS en su servidor. Un buen lugar para alojar demostraciones gratuitas son las páginas de GitHub , que son servidor sobre HTTPS.
2. Compatibilidad con navegador
   • Los Service Workers son altamente compatibles en Internet con Chrome , Firefox , Opera , Safari y Edge , lo que los hace dignos de implementación.

Registro:
Para configurar un trabajador de servicio, debe estar registrado. Esto se hace en el Javascript de su página. Una vez que se registra un trabajador de servicio, esto hará que el navegador comience a instalarlo en segundo plano.

// Ensure that the browser supports the service worker API
if (navigator.serviceWorker) {
  // Start registration process on every page load
  window.addEventListener('load', () => {
      navigator.serviceWorker
          // The register function takes as argument
          // the file path to the worker's file
          .register('/service_worker.js')
          // Gives us registration object
          .then(reg => console.log('Service Worker Registered'))
          .catch(swErr => console.log(
                `Service Worker Installation Error: ${swErr}}`));
    });
}

Instalación:
después de que se registra el trabajador del servicio, debe instalarse, esto se hace en el archivo del trabajador del servicio y donde normalmente desea obtener sus activos de caché.

Se deben tomar los siguientes pasos:

1. abrir un caché
2. Almacenar en caché los activos
3. Confirme si el almacenamiento en caché es exitoso

var cacheName = 'geeks-cache-v1';
var cacheAssets = [
    '/assets/pages/offline-page.html',
    '/assets/styles/offline-page.css',
    '/assets/script/offline-page.js',
  
];
  
// Call install Event
self.addEventListener('install', e => {
    // Wait until promise is finished 
    e.waitUntil(
        caches.open(cacheName)
        .then(cache => {
            console.log(`Service Worker: Caching Files: ${cache}`);
            cache.addAll(cacheAssets)
                // When everything is set
                .then(() => self.skipWaiting())
        })
    );
})

Activando:

// Call Activate Event
self.addEventListener('activate', e => {
    console.log('Service Worker: Activated');
    // Clean up old caches by looping through all of the
    // caches and deleting any old caches or caches that
    // are not defined in the list
    e.waitUntil(
        caches.keys().then(cacheNames => {
            return Promise.all(
                cacheNames.map(
                    cache => {
                        if (cache !== cacheName) {
                            console.log('Service Worker: Clearing Old Cache');
                            return caches.delete(cache);
                        }
                    }
                )
            )
        })
    );
})

Obtención de evento:
una vez que se configura el trabajador del servicio, debe comenzar a interactuar y usar las respuestas almacenadas en caché. Cuando un usuario en particular navega por las páginas web, el trabajador del servicio comienza a recibir eventos de obtención . El siguiente ejemplo muestra un caso en el que el trabajador recibe un evento de búsqueda y busca un caché coincidente, si lo hay, devuelve el archivo/valor almacenado en caché; de lo contrario, devuelve la respuesta predeterminada de la llamada para buscar

var cacheName = 'geeks-cache-v1';
  
// Call Fetch Event 
self.addEventListener('fetch', e => {
    console.log('Service Worker: Fetching');
    e.respondWith(
        fetch(e.request)
        .then(res => {
            // The response is a stream and in order the browser 
            // to consume the response and in the same time the 
            // cache consuming the response it needs to be 
            // cloned in order to have two streams.
            const resClone = res.clone();
            // Open cache
            caches.open(cacheName)
                .then(cache => {
                    // Add response to cache
                    cache.put(e.request, resClone);
                });
            return res;
        }).catch(
            err => caches.match(e.request)
            .then(res => res)
        )
    );
});

El trabajador de servicio no puede: ‘

Sin embargo, el Service Worker puede:

Casos de uso comunes:

Referencia: https://developers.google.com/web/fundamentals/primers/service-workers/