Trabajador de servicio de PWA para tontos

El hecho es que el trabajador de servicios tiene un papel importante que desempeñar en los próximos años, y cuanto más rápido pueda familiarizarse con esta nueva tecnología, mejor podrá adaptarse a este nuevo futuro de la Web.

Es por eso que, para ayudarlo a conocer mejor esta nueva tecnología, juntos tendremos una discusión sobre los trabajadores de servicios: qué es, qué aporta a la Web, cómo podemos prepararnos mejor para esta nueva tecnología de La web.

¿Qué es un trabajador de servicios?

Definiciones

Considerada universalmente como la tecnología que hace o deshace las PWA, el trabajador del servicio es una API que se ejecuta independientemente del navegador y es responsable de la intercepción de la red, y debido a esto, puede hacer muchas de las cosas que antes eran imposibles en la Web. Los sitios web (típicamente PWA) controlados por los trabajadores del servicio pueden tener una integración más profunda con el dispositivo en uso y, en consecuencia, traer más capacidades de hardware y funciones similares a las aplicaciones a la Web (por ejemplo, notificaciones automáticas, sincronización en segundo plano y más).

Cómo funciona

En una palabra. service worker es esencialmente una capa basada en eventos entre el navegador y el servidor que intercepta, modifica y maneja las solicitudes de red salientes:

Y dado que el trabajador de servicio es el de uno basado en eventos , responde y se comunica solo a través de eventos, y usa promesas para saber cuándo se completa una operación. Sin embargo, toda la recepción de eventos (p. ej., fetch y push ) solo es posible cuando el trabajador del servicio está activo , lo que indica cuándo el navegador reconoce y registra el trabajador del servicio (y también cuando el trabajador del servicio ha terminado de instalarse con éxito) . De forma simplificada, este es el ciclo de vida típico de un service worker:

Además, tome nota de todos estos eventos disponibles en Service Worker:

Todos los eventos funcionales ( fetch , sync y push ) deberían explicarse por sí mismos, ya que son los eventos que generan casi todas las características progresivas de PWA (es decir, capacidades sin conexión, sincronización en segundo plano, notificaciones push).

 Lectura recomendada: ¿Qué es PWA? Todo lo que necesita saber sobre las aplicaciones web progresivas

Restricciones para los trabajadores de servicios

Dado que este es un script que se ejecuta independientemente del navegador, existen algunas restricciones:

• Protocolo HTTPS : los trabajadores del servicio deben ejecutarse en sitios web basados ​​en HTTPS

• Sin acceso a localStorage , DOM y la ventana.
• scope limitado : los trabajadores del servicio solo pueden operar en el scope del directorio actual (y subdirectorios) en el que se encuentra service-worker.js .
• Asíncrono : los trabajadores del servicio son de naturaleza asíncrona, por lo que confían en las API basadas en Promise.

Qué significan los trabajadores de servicios para PWA

Como se indicó anteriormente, el trabajador de servicio es la columna vertebral de PWA, sin el cual muchas de las características revolucionarias de PWA simplemente no serían posibles. Esencialmente, lo que hace el trabajador de servicio es proporcionar los medios para:

Mejor presentación

El rendimiento en visitas repetidas es significativamente mejor en una PWA, ya que los trabajadores de servicios ayudan enormemente con el proceso de almacenamiento en caché. En comparación con el caché web típico (caché HTTP) que se usa en la mayoría de los sitios web, PWA se destaca en el suministro de contenido incluso en condiciones de red desfavorables:

Todo esto es gracias al hecho de que los trabajadores del servicio dan a los desarrolladores total libertad para exactamente qué y cómo se realiza el almacenamiento en caché. Para ver cuánto mejor es el rendimiento de almacenamiento en caché de los trabajadores de servicios, recomendamos el estudio reciente de Google: Medición del impacto del rendimiento en el mundo real de los trabajadores de servicios. El estudio tiene una metodología clara, centrada en el tiempo hasta la primera pintura como medida para determinar el desempeño de los trabajadores de servicios.

En promedio, las páginas se cargaron un poco más rápido cuando un trabajador del servicio controlaba la página que sin un trabajador del servicio, tanto para los visitantes nuevos como para los que regresan.

Philip Walton, Midiendo el impacto del desempeño en el mundo real de los trabajadores de servicios

Acceso sin conexión

Cuando se registran, los trabajadores del servicio almacenan en caché el contenido necesario para su sitio de PWA y lo sirven después. Esto hace que los sitios web con tecnología PWA puedan funcionar sin conexión, ya que los usuarios aún pueden interactuar con el sitio y ver todo el contenido almacenado en caché.

Esto no quiere decir que el acceso sin conexión sea una característica nunca antes vista en la Web; era posible brindarles a los usuarios una experiencia sin conexión en la Web, es solo que la experiencia no fue óptima (consulte La memoria caché de la aplicación es un idiota) y el servicio Los trabajadores se inventaron para abordar (o más bien, evitar) los inconvenientes de AppCache.

 Lectura recomendada: Cómo hacer que tu PWA funcione sin conexión

Características de la aplicación nativa

Además de ofrecer acceso sin conexión y un rendimiento mejorado, los trabajadores del servicio también sirven como base para más funciones similares a las de una aplicación, como notificaciones automáticas y sincronización en segundo plano (y en un futuro próximo, geofencing y sincronización periódica). La función de notificaciones push de PWA, por ejemplo, se ensambla utilizando dos API: la API de notificaciones y la API Push, ambas construidas sobre la API Service Worker.

Ciclo de vida de un service worker

La vida útil de un servicio consta de tres partes: registro, instalación y activación, todo lo cual se detallará a continuación:

Registro

El primer paso que debemos hacer es registrar el trabajador de servicio. Sin este paso, el navegador no sabrá dónde se encuentra su trabajador de servicio y, por lo tanto, será imposible instalar el trabajador de servicio en segundo plano.
Podemos registrar al service worker usando el siguiente código:

 if('serviceWorker' en el navegador) {
    navigator.serviceWorker.register('./pwa-examples/simicart/sw.js', {alcance: './sw-alcance/'})
.entonces((reg) => {
   // el registro funcionó
       console.log('Registro exitoso. El alcance es ' + reg.scope);
};

El código anterior primero comenzará a buscar la API de Service Worker en el navegador y, si el navegador es compatible con dicha API, registra un nuevo service worker mediante el método serviceworkerContainer.register() y brinda un scope del service worker. Por ejemplo, en el código anterior, nuestro scope es /pwa-examples/simicart/ , lo que significa que nuestro service worker solo funcionaría para páginas que comienzan con /pwa-examples/simicart/ . Llamamos a estas páginas ' páginas controladas '.

Instalación

Ahora que el navegador sabe dónde está nuestro trabajador del servicio, y cuál es su alcance, intentará instalar el trabajador del servicio. Puede optar por no hacer nada durante esta fase, pero aún así nos gustaría señalar que esta es la fase en la que ocurre la mayor parte del proceso de almacenamiento en caché. Por ejemplo, así es típicamente como se realiza el proceso de almacenamiento en caché de activos:

 const cacheName = 'sitio-caché-v1'
const activosEnCache = [
    '/pwa-ejemplos/',
    '/pwa-ejemplos/index.html',
    '/pwa-examples/css/styles.css',
    '/pwa-examples/js/app.js',
]

self.addEventListener('instalar', (evento) => {
    evento.esperarhasta(  
        caches.open(cacheName).then((cache) => {
              return cache.addAll(assetsToCache);
        })
      );
});

Como puede ver en el ejemplo anterior, usamos la API de caché para almacenar en caché nuestros activos que luego usaremos para hacer que nuestra PWA sea compatible sin conexión. Este proceso de almacenamiento en caché ocurre durante el evento de instalación.

Activación

Después de la etapa de instalación, ahora podemos activar el trabajador de servicio. Sin embargo, esta etapa de activación normalmente no ocurre automáticamente, y para que el trabajador del servicio se active, debe asegurarse de que no haya ningún trabajador del servicio controlando las páginas actualmente.

Alternativamente, también puede automatizar el proceso de activación de su trabajador de servicio utilizando el método skipWaiting() .

 const cacheName = 'sitio-caché-v1'
const activosEnCache = [
    '/pwa-ejemplos/',
    '/pwa-ejemplos/index.html',
    '/pwa-examples/css/styles.css',
    '//pwa-ejemplos/js/app.js',
]
self.addEventListener('instalar', (evento) => {
    self.skipWaiting(); // omitir la espera
    evento.esperarhasta(  
        caches.open(cacheName).then((cache) => {
              return cache.addAll(assetsToCache);
        })
      );
});

La web necesita trabajadores de servicio

En este punto, todos podemos estar de acuerdo en que el trabajador de servicio es casi un paso eventual que debe dar la Web. Los usuarios son cada vez más exigentes con las funciones similares a las aplicaciones y, combinado con el hecho de que PWA se está convirtiendo en el futuro de la entrega de software, parece que la Web tiene mucho potencial en los próximos años.

Para los comerciantes de Magento que buscan transformar el escaparate, ofrecemos una solución de PWA sin interfaz completa y rentable para su negocio.