Haga que su aplicación trabaje fuera de línea con los trabajadores de servicio

Los trabajadores de servicio se pueden usar para mejorar los tiempos de carga y el soporte sin conexión para sus sitios y aplicaciones web. En este tutorial, le mostraremos cómo mejorar progresivamente una aplicación web con un trabajador de servicio. Primero cubriremos qué es un trabajador de servicio y cómo funciona su ciclo de vida, le mostraremos cómo usarlo y luego acelerar su sitio (esta página) y ofrecerá contenido fuera de línea (página 2).

Entonces te mostraremos cómo Cómo construir una aplicación con trabajadores de servicio. Aprenderá cómo configurar un trabajador de los huesos desnudos que almacenará en caché y servirá activos estáticos (entregando un gran impulso de rendimiento en las cargas subsiguientes), y luego cómo almacenan en caché las respuestas de la API dinámicas y brinden la aplicación de la demostración. Primero, veamos qué son exactamente los trabajadores de servicio y cómo funcionan.

¿Construyendo un sitio web? Agiliza tu proceso con un gran Creador de sitios web y manténgalo con un decente Alojamiento web Servicio. Y consigue tu almacenamiento ordenado con estos almacenamiento en la nube Opciones.

¿Qué es un trabajador de servicio?

Entonces, ¿qué es un trabajador de servicio? Es un guión, escrito en JavaScript, que su navegador se ejecuta en el fondo. No afecta al hilo principal (donde JavaScript generalmente se ejecuta en una página web) y no entrará en conflicto con el código de su aplicación o afectará el rendimiento de tiempo de ejecución.

Un trabajador de servicio no tiene acceso directo al DOM o Eventos y la interacción del usuario que ocurre en la página web. Piense en ello como una capa que se encuentra entre la página web y la red, lo que le permite interceptar y manipular las solicitudes de red (por ejemplo, las solicitudes de AJAX) realizadas por su página. Esto lo hace ideal para administrar cachés y soportar el uso fuera de línea.

El trabajo de trabajo de servicio de vida

La vida útil de un trabajador de servicios sigue un flujo simple, pero puede ser un poco confuso cuando está acostumbrado a los scripts de JS, solo funciona de inmediato:

Instalación & gt; Esperando (instalado) & gt; Activando & gt; Activado & gt; Redundante

Cuando su página se carga por primera vez, el código de registro que agregamos a index.html Inicia la instalación del trabajador de servicio. Cuando no hay un trabajador existente, el nuevo trabajador de servicio se activará inmediatamente después de la instalación. Una página web solo puede tener un trabajador de servicio activo a la vez.

Si ya se instala un trabajador, se instalará el nuevo trabajador de servicio y luego se sentará en el paso de espera hasta que la página esté completamente cerrada y luego vuelva a cargar. Simplemente refrescante no es suficiente porque podría tener otras pestañas abiertas. Debe asegurarse de que todas las instancias de la página estén cerradas, de lo contrario, el nuevo trabajador no se activará. No tiene que cerrar las pestañas, simplemente puede navegar a otro sitio y volver.

Ambos Instalar en pc y activar Los eventos solo ocurrirán una vez por trabajador. Una vez activado, el trabajador de servicio tendrá el control de la página y puede iniciar eventos de manejo como Fetch para manipular las solicitudes.

Finalmente, un trabajador de servicios se volverá redundante si el navegador detecte que el propio archivo de trabajadores se ha actualizado o si la instalación o la activación fallan. El navegador buscará una diferencia de byte para determinar si se ha actualizado un script de trabajadores.

Es importante tener en cuenta que nunca debe cambiar (o revolucionar) el nombre de su trabajador de servicios. Tampoco debe almacenar en caché el archivo del trabajador en el servidor, ya que no podrá actualizarlo fácilmente, aunque los navegadores ahora son lo suficientemente inteligentes como para ignorar los encabezados de almacenamiento en caché.

01. Clone la aplicación de demostración

De acuerdo, comencemos a aprender cómo construir una aplicación web con la ayuda de los trabajadores del servicio. Para este tutorial, necesitará versiones recientes de NOde.js y NPM instalados en su computadora.

Hemos derribado una aplicación de demostración que usaremos como base para este tutorial ( clonar la aplicación de demostración aquí ). La aplicación es un pequeño proyecto divertido que obtiene el pronóstico meteorológico de cinco días basado en la ubicación del usuario. Luego, se verificará si se pronostica lluvia antes del final del día y actualizar la UI en consecuencia.

Se ha construido de manera ineficiente (intencionalmente) utilizando bibliotecas grandes e innecesarias, como jquery y bootstrap, con grandes imágenes no asópicas para demostrar la diferencia en el rendimiento cuando se utiliza un trabajador de servicio. Actualmente pesa en un ridículo 4.1MB.

02. Obtenga su clave API

Para buscar los datos del clima de la API, deberá obtener una clave API gratuita de OpenWeatherMap :

Una vez que tienes tu llave, abre index.html y busca el ventana.api_key variable en el & lt; cabeza y gt; . Pegue su llave en el valor:

    window.API_KEY = 'paste-your-key-here';

03. Iniciar el servidor de desarrollo

Ahora estamos listos para empezar a trabajar en el proyecto. En primer lugar, instale las dependencias ejecutando:

    npm install

Hay dos tareas para la herramienta de construcción. Correr Inicio de NPM Para iniciar el servidor de desarrollo en el puerto 3000. Ejecutar npm ejecutar la construcción Para preparar la versión 'Producción'. Tenga en cuenta que esto es solo una demostración, por lo que no es realmente una versión de producción: no hay una minificación ni nada: los archivos simplemente obtienen 'revinchen'.

Se utiliza un algoritmo para crear un hash, como el 9C616053E5, de los contenidos del archivo. El algoritmo siempre emitirá el mismo hash para los mismos contenidos, lo que significa que, siempre que no modifique el archivo, el hash no cambiará. Luego, el hash se adjunta al nombre de archivo, por lo que, por ejemplo, los estilos.css pueden convertirse en estilos-9c616053e5.css. El hash representa la revisión del archivo, por lo tanto, 'Revved'.

Puede cargar con seguridad cada revisión del archivo en su servidor sin tener que invalidar su caché, lo cual es caro, o preocuparse por algún otro caché de terceros que sirve la versión incorrecta.

04. Presente su trabajador de servicio.

Ahora vamos a empezar con nuestro trabajador de servicios. Crear un archivo llamado SW.JS en la raíz de la SRC directorio. Luego agregue estos dos oyentes de eventos para registrar el Instalar en pc y activar eventos:

 self.addeventlistener ('install', (evento) = & gt; {
      console.log (evento);
    });

    self.addeventlistener ('activate', (evento) = & gt; {
      console.log (evento);
    }); 

los uno mismo La variable aquí representa el alcance global de solo lectura del trabajador del servicio. Es un poco como el ventana Objeto en una página web.

A continuación, debemos actualizar nuestro archivo index.html y agregar los comandos para instalar el trabajador de servicio. Añadir este script justo antes del cierre & lt; / body & gt; etiqueta. Registrará a nuestro trabajador y registrará su estado actual.

 & lt; script & gt;
     Si ('ServiceWorker' en Navigator) {
       Navigator.ServiceWorker.Register ('/ SW.JS')
         .Ten (función (reg) {
           if (reg.installing) {
             console.log ('SW Instalación');
           } else demás si (Reg.waiting) {
             console.log ('SW esperando');
           } else if (reg.active) {
             console.log ('SW activado');
           }
         }). Captura (función (error) {
           // registro fallido
           console.log ('error falló con' error);
         });
     }
   & lt; / script & gt; 

Inicie su servidor de desarrollo ejecutando Inicio de NPM Y abre la página en un navegador moderno. Recomendamos el uso de Google Chrome, ya que tiene un buen servicio de servicio de trabajadores en sus devteols, a las que nos referiremos a lo largo de este tutorial. Deberías ver tres cosas que han registrado en tu consola; Dos del trabajador de servicio para el Instalar en pc y activar Los eventos, y el otro será el mensaje del registro.

05. Activar el trabajador.

Vamos a decirle a nuestro trabajador que salte del paso de espera y se active ahora. Abra el archivo SW.JS y agregue esta línea en cualquier lugar dentro de la Instalar en pc Ayector de eventos:

 Self.Skipwaiting (); 

Ahora, cuando actualicemos el script del trabajador, tomará el control de la página inmediatamente después de la instalación. Vale la pena tener en cuenta que esto puede significar que el nuevo trabajador tomará el control de una página que puede haber sido cargada por una versión anterior de su trabajador, si eso va a causar problemas, no use esta opción en su aplicación.

Puedes confirmar esto navegando lejos de la página y luego regresando. Deberías ver el Instalar en pc y activar Los eventos se incendian de nuevo cuando se ha instalado el nuevo trabajador.

Chrome DevTools tiene una opción útil que significa que puede actualizar a su trabajador solo por recarga. Abra DevTools y vaya a la pestaña Aplicación, luego seleccione Servidor de servicio de la columna izquierda. En la parte superior del panel hay una caja de garrapatas etiquetada en la actualización en la recarga, marquelo. Su trabajador actualizado ahora será instalado y activado en Actualizar.

06. Confirmar cambios

Vamos a confirmar esto agregando console.log ('foo') Llame a cualquiera de los oyentes de eventos y refresque la página. Esto nos atrapó porque esperábamos ver el registro en la consola cuando nos ridiculizamos, pero todo lo que estábamos viendo fue el mensaje 'SW activado'. Resulta que Chrome refresca la página dos veces cuando la opción Actualización en la recarga está marcada.

Puede confirmar esto marcando el cuadro PRESERVE LOG TICK en el panel de configuración de la consola y vuelva a actualizar. Debe ver la instalación y activar los eventos registrados, junto con 'foo', seguido de 'navegado a http: // localhost: 3000 /' para indicar que la página se recargó y luego luego el mensaje final 'SW activado'.

07. Pista el evento de búsqueda

Tiempo para agregar otro oyente. Esta vez vamos a rastrear el ha podido recuperar Evento que se enciende Cada vez que la página carga un recurso, como un archivo CSS, imagen o incluso una respuesta API. Abriremos un caché, devolveremos la respuesta de solicitud a la página y luego, en el fondo, la memoria caché la respuesta. En primer lugar, agreguemos al oyente y actualicemos para que pueda ver qué sucede. En la consola deberías ver muchos Accidentado Registros.

 self.addeventlistener ('fetch', (evento) = & gt; {
 console.log (evento);
}); 

Nuestro modo de servicio utiliza Browsersync, que agrega su propio script a la página y hace solicitudes de STELD DESCHOIL. Verás las facturas para esto también, pero queremos ignorarlos. También solo queremos almacenar en caché las solicitudes de nuestro propio dominio. Así que agreguemos algunas cosas para ignorar las solicitudes no deseadas, incluyendo explícitamente ignorando el / Ruta del índice:

 self.addeventlistener ('fetch', (evento) = & gt; {
 // ignorar las solicitudes cruzadas
 if (! event.request.url.startststhith (self.location.origin)) {
   regreso;
 }
 // Ignorar solicitudes de no obtener
 if (event.request.method! == 'get') {
   regreso;
 }
 // Ignorar el navegador-sincronización
 if (event.request.url.indexof ('Browser-sync') & gt; -1) {
   regreso;
 }
 // Evitar que la ruta del índice se almacene en caché
 if (event.request.url === (self.location.origin + '/')) {
   regreso;
 }
 // Evitar que index.html siendo almacenado en caché
 if (event.request.url.endswith ('index.html')) {
   regreso;
 }
 console.log (evento);
}); 

Ahora, los registros deben ser mucho más limpios y es seguro comenzar a almacenar en caché.

08. caché los activos

Ahora podemos comenzar a almacenar en caché estas respuestas. Primero necesitamos dar nuestro caché un nombre. Llamemos a los nuestros V1-Activos . Agregue esta línea a la parte superior del archivo SW.JS:

 Const AssetScachename = 'V1-Activos'; 

Luego necesitamos secuestrar a los beneficios para que podamos controlar lo que se devuelve a la página. Podemos hacer eso usando el evento. responder con método. Este método acepta una promesa para que podamos agregar este código, reemplazando el console.log :

 // Dile a la recuperación de responder con esta cadena de promesa
 evento.Responderwith (
   // Abrir el caché
   caches.open (assetcachename)
     .Ten ((caché) = & gt; {
       // Hacer la solicitud a la red.
       Return Fetch (Event.Request)
         .Ten ((respuesta) = & gt; {
           // caché la respuesta
           cache.put (evento.Request, respuesta.clone ());
           // devolver la respuesta original a la página
           Respuesta de retorno;
         });
     })
 ); 

Esto reenviará la solicitud en la red y luego almacenará la respuesta en el caché, antes de enviar la respuesta original a la página.

Vale la pena señalar aquí que este enfoque en realidad no almacenará las respuestas hasta la segunda vez que el usuario cargue la página. La primera vez instalará y activará al trabajador, pero para cuando ha podido recuperar El oyente está listo, todo ya se habrá solicitado.

Refresque un par de veces y revise el caché en los DevTools & GT; Pestaña de aplicación. Expanda el árbol de almacenamiento de caché en la columna izquierda y debe ver su caché con todas las respuestas almacenadas.

09. Servir desde el caché.

Todo está en caché, pero en realidad no estamos usando el caché para servir cualquier archivo todavía. Vamos a enganchar eso ahora. Primero, buscaremos una coincidencia para la solicitud en el caché y, si existe, serviremos eso. Si no existe, usaremos la red y luego en caché la respuesta.

// decirle a la recuperación de responder con esta cadena
 evento.Responderwith (
   // Abrir el caché
   caches.open (assetcachename)
     .Ten ((caché) = & gt; {
       // Busque la solicitud de coincidencia en el caché
       Devuelve caché.match (evento.Request)
         .Ten ((coincidente) = & gt; {
           // Si se encuentra una coincidencia, devuelve primero la versión en caché
           if (coincidente) {
             retorno coincidente;
           }
           // de lo contrario continuar a la red
           Return Fetch (Event.Request)
             .Ten ((respuesta) = & gt; {
               // caché la respuesta
               cache.put (evento.Request, respuesta.clone ());
               // devolver la respuesta original a la página
               Respuesta de retorno;
             });
         });
     })
); 

Guarde el archivo y actualice. Compruebe DevTools & GT; Pestaña de red y debe ver (de ServiceWorker) que figura en la columna Tamaño para cada uno de los activos estáticos.

Phew, hemos terminado. Por una cantidad tan pequeña de código, hay mucho que entender. Debe ver que refrescante la página una vez que todos los activos sean almacenados en caché son bastante rápidos, pero hagamos una verificación rápida (no científica) de los tiempos de carga en una conexión de estrangulación (DevTools & GT; pestaña de red).

Sin el trabajador de servicio, la carga sobre una red 3G rápida simulada toma casi 30 segundos para que todo se cargue. Con el trabajador de servicios, con la misma conexión de estrangulación, pero cargando desde el caché, se necesita poco menos de un segundo.

Marque la casilla fuera de línea y actualice y también verá que la página se carga sin una conexión, aunque no podemos obtener los datos de pronóstico de la API. En la página 2, volveremos a esto y aprenderemos a almacenar en caché la respuesta de la API también.

Página siguiente: Use el trabajador de servicios para ofrecer acceso en línea

• 1
• 2

Página actual: Página 1: Cargando más rápido