Cómo hacer que su aplicación funcione sin conexión con el poder de JavaScript

En el mundo actual, la conectividad nos ha hecho más móviles que nunca lo que (paradójicamente) provoca que en ocasiones estemos desconectados: cuando estamos en modo avión, tenemos una mala conexión, no tenemos más datos, estamos en el metro… etc.

Un segundo efecto de esta movilidad es la carga lenta de sitios web pesados: Amazon descubrió que solo 100 milisegundos de tiempo de carga adicional les costaban el 1% de las ventas.

En estas situaciones, nos gustaría tener acceso sin conexión a nuestro contenido. Por eso existen herramientas como Instapaper y Pocket. Spotify y Netflix también le permiten descargar medios para usar sin conexión.

Podemos ver fácilmente que existe una demanda de esta función y cómo puede beneficiar a su empresa.

Es hora de que la web se desconecte.

Afortunadamente, ya no necesitamos crear aplicaciones nativas para lograr este objetivo. Podemos crear un sitio web sin conexión con el poder de JavaScript gracias a los nuevos trabajadores de servicio y las características de la API de caché .

¿Qué es un trabajador de servicio (SW)?

Los trabajadores del servicio son código JavaScript que se ejecuta en segundo plano en su sitio web, incluso cuando la página está cerrada. Para usos sin conexión, uno de sus objetivos es almacenar solicitudes de red o imágenes en la memoria caché del navegador.

La agencia BETC creó un sitio web de demostración llamado whentheinternetisdown.com para la empresa francesa de telecomunicaciones Bouygues. Solo funciona sin conexión y se siente algo mágico. Ve a probarlo :)

Es el almacenamiento en caché lo que hace la magia del sitio: puede volver en 3 semanas, 1 mes, 1 año, aún sin conexión, y acceder a todo el contenido. - Maxime Huygue, director de BETC Digital Studio

Ok, esto es genial, dime cómo hacerlo entonces.

Bien, comencemos con algunos requisitos previos:

  • Para utilizar SW, debe habilitar https en su sitio web.
  • Debe tener una comprensión decente de cómo funcionan las promesas de JavaScript.
  • SW funciona en todos los navegadores modernos excepto en nuestro amigo IE.
  • Incluso si es JavaScript, se ejecutan en el contexto de los trabajadores web. Lo que significa: no DOM y ejecuta fuera del hilo principal.
  • Comprender cómo funcionan las bases de datos.
  • El código de su trabajador de servicio debe estar en un archivo JavaScript separado. Ejemplo: service-worker.js

Ciclo de vida de los trabajadores de servicios

Para poder trabajar, los SW deben registrarse dentro de su aplicación y luego instalarse. Debe verificar si los SW son compatibles con su cliente antes de hacerlo.

1) Registro

Si está disponible, registre su archivo SW. Devolverá una promesa, para que pueda manejar los errores. También puede especificar un alcance de URL en las opciones de registro.

2) Instalación

Los trabajadores de servicios se basan en eventos. Brevemente, debe adjuntar devoluciones de llamada a eventos, como lo haría con un element.addEventListener. El primer evento que necesita usar es el evento de instalación. Este es un buen momento para almacenar en caché todos sus recursos vitales como Javascript, CSS, HTML, imágenes… ¡Aquí es donde la API de caché se une a la fiesta!

Luego abra el método o cree un caché vinculado al nombre deseado. La promesa devuelta debe incluirse en event.waitUntil (), lo que retrasará la instalación del trabajador del servicio hasta que se resuelva la promesa. De lo contrario, el evento de instalación falla y el trabajador del servicio se descartará.

Tenga cuidado con el almacenamiento en caché: el almacenamiento de su usuario es valioso, así que no abuse de él. Además, tenga cuidado: el evento de instalación solo se puede llamar una vez y deberá actualizar su SW para modificarlo.

3) Activación

Éste es un poco sutil.

Una vez que se ha completado la instalación, el service worker aún no está activo: estamos en el estado instalado.

En este estado, espera tomar el control de la página. Luego pasa a la siguiente fase del ciclo de vida, que es la fase de activación.

La fase de activación es útil cuando actualiza un SW. El caso más común es borrar la caché del SW instalado anteriormente.

Tenga en cuenta que, una vez instalado correctamente, el trabajador actualizado esperará hasta que el trabajador existente controle cero clientes (los clientes se superponen durante una actualización).

self.skipWaiting () evita la espera, lo que significa que el trabajador del servicio se activa tan pronto como termina la instalación. La ventaja de este método es que puede recibir eventos de recuperación más rápido.

Realmente no importa cuando llame a skipWaiting (), siempre que sea durante o antes de la espera. Es bastante común llamarlo en el evento de instalación.

¡Uf! Tomemos un descanso y resumamos lo que hemos visto:

  • Los trabajadores del servicio son piezas de JavaScript que habilitan funciones sin conexión como el almacenamiento en caché.
  • Exploramos el ciclo de vida del software: registro, instalación, activación
  • Aprendimos a implementar casos de usos comunes como: almacenamiento en caché de recursos y limpieza de cachés con la API de caché.
  • Vimos que self.skipWaiting y self.clients.claim nos permiten activar los SW más rápido para detectar eventos más rápido.

Ok, avanzando ...

4) buscar

El evento de búsqueda nos permite interceptar solicitudes de red y almacenar respuestas o personalizarlas.

La principal ventaja de este gancho es devolver los recursos almacenados en caché en lugar de realizar una llamada de solicitud. Debería echar un vistazo a la API Fetch para manejar sus llamadas de solicitud.

No podemos cubrir todas las posibilidades que ofrecen los trabajadores de servicios en un solo artículo. Aún así, le animo a que investigue lo que es posible: 404 personalizado, API de sincronización en segundo plano para análisis sin conexión, plantillas del lado del trabajador del servicio… ¡el futuro parece emocionante!

Hasta ahora, hemos visto qué es un trabajador de servicios, cómo funciona a lo largo de su ciclo de vida y los casos de uso más comunes jugando con Cache and Fetch API. Esas dos API nos brindan una forma completamente nueva de administrar los recursos direccionables de URL en el navegador. Para completar esta guía, veamos cómo podemos almacenar otros tipos de datos, por ejemplo, el JSON de un usuario de su base de datos.

Almacene datos personalizados con IndexedDB

Una pauta general para el almacenamiento de datos es que los recursos direccionables por URL deben almacenarse con la interfaz Cache y otros datos deben almacenarse con IndexedDB. Por ejemplo, los archivos HTML, CSS y JS deben almacenarse en la caché, mientras que los datos JSON deben almacenarse en IndexedDB. Tenga en cuenta que esto es solo una guía, no una regla firme. (fuente)

En resumen, veremos cuándo no debe usar Cache API sino IndexedDB. Ambos son asincrónicos y accesibles en los trabajadores del servicio, los trabajadores web y la interfaz de la ventana. La buena noticia es que cuenta con un buen soporte, incluso en versiones recientes de IE.

IndexedDB es una base de datos NoSQL. Los datos de IndexedDB se almacenan como pares clave-valor en almacenes de objetos en lugar de tablas. Una sola base de datos puede contener cualquier número de almacenes de objetos. Siempre que un valor se almacena en un almacén de objetos, se asocia con una clave. Se parece a esto:

Bastante clásico, ¿verdad? Lo principal que hay que entender es el concepto de ruta clave. Le dice al navegador qué clave utilizar para extraer datos en el índice o almacén de objetos.

En este ejemplo, podemos ver que nuestra ruta clave es la identificación de la propiedad, y está definida en la línea 10. Luego devolvemos todos los elementos de la base de datos. Este es un caso de uso muy básico, por lo que si desea obtener más información sobre cómo funciona IndexedDB, le aconsejo que lea este excelente artículo.

Conclusión

Aprovechar la web fuera de línea es excelente para la experiencia del usuario, y algunas empresas han comenzado a aprovecharlo. Se basa principalmente en trabajadores de servicio, scripts JavaScript que se ejecutan en segundo plano en su sitio web.

Hemos visto cómo usarlos a lo largo del ciclo de vida del trabajador del servicio y qué puede hacer al usar la API de caché y recuperación. Las posibilidades son casi ilimitadas. así que sea creativo y no demasiado codicioso con el almacenamiento del dispositivo.

Incluso puede usar bases de datos sin conexión: para eso está hecho IndexedDB. Estas capacidades sin conexión ciertamente son parte del futuro de la web, por lo que funciona bien con el nuevo tipo de sitios web que está creando Google: Aplicaciones web progresivas.

Otras lecturas:

  • El libro de recetas sin conexión: //developers.google.com/web/fundamentals/instant-and-offline/offline-cookbook/
  • PWA y sin conexión: //developers.google.com/web/ilt/pwa/lab-offline-quickstart
  • Laboratorio: Almacenamiento en caché de archivos con Service Worker: //developers.google.com/web/ilt/pwa/lab-caching-files-with-service-worker
  • El ciclo de vida del trabajador de servicios: //developers.google.com/web/fundamentals/primers/service-workers/lifecycle
  • Desmitificando el ciclo de vida del trabajador de servicios: //scotch.io/tutorials/demystifying-the-service-worker-lifecycle
  • Active Service Workers más rápido: //davidwalsh.name/service-worker-claim
  • Datos en vivo en el trabajador del servicio: //developers.google.com/web/ilt/pwa/live-data-in-the-service-worker
  • IndexedDBConceptos básicos: //developer.mozilla.org/en-US/docs/Web/API/IndexedDB_API/Basic_Concepts_Behind_IndexedDB
  • Introducción al almacenamiento sin conexión persistente con IndexedDB: //itnext.io/getting-started-with-persistent-offline-storage-with-indexeddb-1af66727246c