Cómo hacer que su PWA funcione sin conexión

Probablemente ya sepa lo que es Progressive Web App, junto con sus características que cambian la industria, pero por el bien de la iteración, repitamos una vez más las increíbles características únicas de PWA que pueden revolucionar potencialmente la experiencia web, que es su capacidad fuera de línea. .

 Lectura recomendada: ¿Qué es una PWA?

A diferencia de la web normal, cuya visualización de contenido solo está disponible con una conexión, la aplicación web progresiva se diferencia de tal manera que una vez que los trabajadores del servicio, un mecanismo integrado que es responsable de muchas de las funciones progresivas de PWA, han cargado los archivos necesarios, la visualización sin conexión será posible y los usuarios podrán interactuar con la aplicación incluso cuando no estén conectados.

Aplicaciones web progresivas y disponibilidad sin conexión

Para saber de qué se trata todo este alboroto con las PWA, especialmente la capacidad fuera de línea, tal vez sea hora de que experimente de primera mano una visualización fuera de línea de nuestro sitio web principal, que también es una PWA por definición.

Con Progressive Web Apps, toda la experiencia fuera de línea no es diferente de su experiencia típica con una conexión, y esa es la belleza de esto. Esta es una función especialmente útil para las tiendas de comercio electrónico que necesitan una experiencia de navegación ininterrumpida, incluso cuando no hay conexión.

Notas : cada sitio de PWA necesita un almacenamiento en caché inicial de los recursos esenciales antes de que la visualización fuera de línea esté disponible para el usuario.

Cómo hacer que su PWA funcione sin conexión

Sería complicado entrar en todos los detalles de la creación de una aplicación web progresiva completamente funcional y sin conexión, por lo que hoy comenzaríamos primero con lo básico. Nuestro objetivo es crear una aplicación web progresiva básica que funcione sin conexión .

requisitos previos

• Un sitio web/aplicación web simple. Cualquier cosa con un index.html , un index.js y un style.css servirá.

Una vez que tenga todos los requisitos previos en orden, ¡es hora de hacer que su PWA barebone funcione sin conexión!

Creación de un trabajador de servicio básico

Lo primero es lo primero, necesitaría crear su sw.js que contiene todo el código necesario para un trabajador de servicio funcional.

 // sw.js
self.addEventListener("buscar", evento => {
    console.log("Has obtenido" + event.url);
});

Una vez que haya creado su trabajador de servicio, verifiquemos si su navegador lo admite y haga referencia a él en su index.js :

 // índice.js
if ("serviceWorker" en el navegador) {
    navigator.serviceWorker
        .registro("sw.js")
        .then(() => console.log("trabajador de servicio registrado!"));
}
// el resto del código de tu página...

El código anterior debería ser lo suficientemente simple. Comprueba si su navegador es compatible con los trabajadores del servicio y, de ser así, devuelve un " trabajador del servicio registrado". ”. Al registrar a los trabajadores del servicio, esencialmente le está diciendo al navegador que use el sw.js como instrucciones para sus trabajadores del servicio y, a su vez, asocie los nuevos trabajadores del servicio con su sitio.

Ahora, de vuelta al sw.js , agregue el siguiente código:

 // sw.js
self.addEventListener("buscar", evento => {
    console.log("Has obtenido" + event.url);
});

El código agrega un EventListener que es vital para nuestra operación posterior. De hecho, muchos navegadores, incluido Chrome, no permitirán que se instale su PWA a menos que haya un fetch registrado.

El addEventListener en el código anterior tiene dos argumentos: los eventos que se van a escuchar y una devolución de llamada que toma un objeto de evento. Una vez que este evento esté en su lugar, su trabajador de servicio ahora comenzará a escuchar eventos de fetch que incluyen solicitudes de HTML, CSS, JS, audio, imágenes y cualquier otra solicitud de API u otros sitios web de su sitio web.

Almacenamiento en caché de sus recursos

Para que su PWA sea compatible sin conexión, los trabajadores del servicio pagan una parte en la entrega del contenido , pero también necesita almacenar en caché los recursos de su página.

Para almacenar en caché los recursos de su página, primero debe planificar el tamaño de su almacenamiento en caché, ya que hay un límite.

Límite de almacenamiento de caché

Cada navegador tiene una forma diferente de manejar el almacenamiento en caché. Casi todos ellos, sin embargo, tienen un límite en el tamaño del almacenamiento en caché ; este límite es a menudo la razón por la que no ve sitios grandes y obesos como Amazon que almacena en caché toda su tienda utilizando trabajadores de servicio.

Ahora bien, este límite varía debido a que depende del dispositivo del usuario final; pero normalmente debería ser alrededor del 20% del espacio máximo en disco de su usuario. Para obtener más información, puede consultar nuestra tabla a continuación o la guía oficial de Google sobre almacenamiento sin conexión para aplicaciones web progresivas.

Ahora que eliminamos este límite de almacenamiento en caché, pasemos a almacenar en caché sus recursos .

Para almacenar en caché los recursos de su página, necesitamos una matriz global que contenga todos los activos que queremos almacenar:

 /* 
  Esto es todo lo que queremos guardar en el caché.
  Para que la aplicación funcione sin conexión/se pueda instalar,
  tenemos que guardar no solo las imágenes, sino también nuestro HTML, JS y CSS
  también: cualquier cosa que queramos usar cuando no esté conectado.
*/
constante ACTIVOS = [
    "https://i.imgur.com/Kbkqr2n.png",
    "https://i.imgur.com/lgLaG0x.png",
    "https://i.imgur.com/0iL8mxP.png",
    "https://i.imgur.com/KDsdYeS.png",
    "https://i.imgur.com/mK50fqL.png",
    "https://i.imgur.com/KYGH2Qa.png",
    "/estilo.css",
    "/index.html",
    "/sin conexión.html",
    "/"
];

Aquí es donde se almacena todo lo que desea usar sin conexión. En el ejemplo anterior, las primeras imágenes son rutas a Imgur donde se almacena una variedad de logotipos de SimiCart.

Con este paso, nuestra lista de recursos necesarios para usos fuera de línea ya está lista. Almacenémoslos en caché usando trabajadores de servicio.

Agregue esta parte superior en la parte superior de su sw.js:

 // sw.js

let cache_name = "SimiCart"; // La cadena utilizada para identificar nuestro caché

self.addEventListener("instalar", evento => {
    console.log("instalando...");
    evento.esperarhasta(
        cachés
            .open(nombre_caché)
            .entonces(caché => {
                return cache.addAll(activos);
            })
            .catch(err => consola.log(err))
    );
});

Esencialmente, este código le indica al navegador que espere (usando la llamada waitUntil() ) para nuestro almacenamiento en caché.

Al usar la API de caché, específicamente addAll() , nuestra matriz de activos se puede agregar sin esfuerzo a la caché, lista para ser atendida por los trabajadores del servicio. Bueno, pensándolo bien, no está tan listo. Todavía tendríamos que modificar un poco nuestro controlador de eventos de fetch .

Así es como se verá ahora:

 self.addEventListener("buscar", evento => {
    if (evento.solicitud.url === "https://www.simicart.com/") {
        // o cualquiera que sea la URL de tu aplicación
        evento.responderCon(
            buscar(evento.solicitud).catch(err =>
                self.cache.open(cache_name).then(cache => cache.match("/offline.html"))
            )
        );
    } más {
        evento.responderCon(
            buscar(evento.solicitud).catch(err =>
                caches.match(evento.solicitud).then(respuesta => respuesta)
            )
        );
    }
});

Ahora debería quedar claro en el código anterior que estamos intentando almacenar en caché los recursos incluso cuando la aplicación está fuera de línea. La lógica es la siguiente:

• Primero, la aplicación intenta obtener recursos en línea y responder con los recursos almacenados en caché si la búsqueda falla (usando respondWith() ).
• Dentro de respondWith() , llamamos a fetch(event.request) para intentar obtener recursos de la red y, dado que fetch se basa en Promise , Promise rechazará si no se puede conectar a la red y, a su vez, activará catch() declaración.
• En la instrucción catch() es donde desearía llamar a sus recursos almacenados en caché.

Y eso es. ¡Tu PWA ahora debería poder trabajar sin conexión! Bastante fácil, ¿no?

Conclusión

Las cosas se mueven bastante rápido en el mundo tecnológico y cuanto más espere para convertirse a PWA o integrar una función vital como las capacidades fuera de línea en su PWA, mayor será el costo de oportunidad para usted y su negocio.

Aún así, siempre hay proveedores de soluciones fácilmente disponibles, como SimiCart, que pueden atender todas sus necesidades. Si, por casualidad, eres un comerciante en línea y buscas una solución Magento PWA perfecta y completa, estás en el lugar correcto. Somos un proveedor de soluciones conocido para sitios web de comercio electrónico de Magento con más de 5 años de experiencia en PWA y aplicaciones nativas.