PWA - Aplicaciones Web Progresivas 2/2 - Workbox

Publicado: 27 Mayo 2021 por José Luis García Martínez

Categorías:
Tutorial 26

Tutorial de uso de Workbox para agilizar la creación de PWA, aplicaciones web progresivas.

Qué es?

Es un set de bibliotecas creadas cómo no, por Google, que ayudan a la creación de service workers para las PWA. Dispone de varias estrategias de cacheado ya predefinidas para poder manejar html, css,js, imágenes, etc. Es importar y usar, de una forma fácil.

Realmente se hace obligatorio su uso, ya que hacerlo todo manual como ya expuse en el anterior post, se hace un tanto difícil con un alto índice de fallos que hace perder mucho más tiempo XD.

Demo y código fuente

Para hacerlo más amigable he creado un proyecto cool en github para que no sea una experiencia perturbadora.

Código fuente lo puedes descargar en github.com/jolugama/notification-push-firebase. Dale like si te gusta, es bonito ver que tu trabajo servío para algo.
Demo en jolugama.github.io/notification-push-firebase/public.

Si deambulas en los escabrosos archivos, puedes ver en firebase-messaging-sw.js que está todo workbox en él, en muy pocas lineas. Usa jquery, sin frameworks.

Dispone de firebase para notificaciones push, pero no vas a poderlo ver, ya que el único que puede mandar esas notificaciones soy yo, y no voy a envíar notificaciones a diario para chequearlo. Así amigo, te animo a que con unos pequeños pasos lo hagas tú mismo, lo explicaré, o quizás ya lo veas explicado, en futuros o presentes posts. Buscar por firebase.

Este ejemplo usa la estrategia más habitual, que es servir la web con todo su contenido, cachear hasta un máximo prefijado (se puede cambiar) y si falta internet lo muestra como si estuvieras con ella.

Para que se active el service worker, debes pasar al 100% del scroll para que salte. Acepta. Para eliminarlo luego pulsa en el candado de la izquierda en la barra de direcciones.

Importante, antes de empezar

La guía oficial developers.google.com/web/tools/workbox/guides/get-started nos explica como crearlas de una manera fácil y cómoda, salvo que en mi opinión, a fecha de hoy (está en continuo cambio), no está en órden y faltan algunos datos, por eso este post.

Todo ejemplo en dicha web está preparada para usarlo con módulos. Qué pasa con los modules en javascript? Que javascript vanilla no puede usarlo y si tu proyecto está en jquery o similar, deberás cargarlo de otra forma (mediante CDN, y con this.workbox, como indico más adelante.)

Importación, instalación, uso

Hay 2 formas de importarlo.

Usando CDN, la alternativa a los módulos

La pongo primera ya que el tutorial oficial lo deja un poco de lado, pero su uso es menor, ya que está pensada para proyectos pequeños que no usen webpack, ni frameworks como angular.

Crea un archivo sw.js, impórtalo en el html. Debe estar importado en todos los html.

importa por cdn workbox

importScripts('https://storage.googleapis.com/workbox-cdn/releases/6.1.5/workbox-sw.js');

Todos los ejemplos de la web usan los métodos sin el nombre de la clase, ni el namespace, por lo que hay que incluirlo.

ejemplo:
```
registerRoute(
```
debe ser reemplazado por: (es decir, incluir clase y namespace)
```
this.workbox.routing.registerRoute(
```
También puedes importarlo localmente, e igualmente importarlo con importScripts.

Método por default con importación de módulos, uso plugins

Seguir los ejemplos tal cual de la web anterior descrita.
Todo va por módulos, si algo quieres, antes debes instalarlo mediante npm. Aquí tienes todas los módulos actuales para instalar: developers.google.com/web/tools/workbox/modules. Tan fácil como hacer npm install workbox-core
Si quieres instalarte los módulos más importantes, y guardarlos en package.json
```
npm install --save workbox-core workbox-background-sync workbox-expiration workbox-google-analytics workbox-navigation-preload workbox-precaching workbox-routing workbox-strategies
```
Con estos módulos, creo que no me falta ninguno importante, puedes hacer casi cualquier cosa. Si te falta alguno, instala de nuevo con --save.
Un ejemplo casi completo que puedes mejorar es el que te viene en la primera sección Get Started.

Manifest.json

Todo service worker necesita su propio archivo manifest.json en raíz. Debes de crearlo. Esto ya lo explico detalladamente en el anterior post.

Página offline e imágen por defecto

Cuando se va internet en casa o falta de cobertura en móvil, nos interesa que si hay una imágen que no tenemos, nos muestre una por defecto ya cacheada y si el link que queremos acceder no lo tenemos cacheado, que nos responda con una página por defecto. Difícil? Con workbox no!.

this.workbox.precaching.precacheAndRoute([{
        url: 'offline.html',
        revision: null
    },
    {
        url: 'images2/no-image.png',
        revision: null
    },
    // ... other entries ...
]);

// Catch routing errors, like if the user is offline
this.workbox.routing.setCatchHandler(async ({
    event
}) => {
    console.log('event', event);
    console.log('event.request.destination', event.request.destination);
    // Return the precached offline page if a document is being requested
    if (event.request.destination === 'document') {
        return this.workbox.precaching.matchPrecache('offline.html');
    } else if (event.request.destination === 'image') {
        return this.workbox.precaching.matchPrecache('images2/no-image.png');
    }
    return Response.error();
});

Si usas módulos, quita this.workbox.precaching y this.workbox.routing

Solución de problemas y depuración (debug) desde Chrome

En herramientas de desarrollo de Chrome, tab Application.

Verifica tab Manifest, si todo está correcto, pruébalo en móvil. Borra cookies si te falla, instala app.
Una manera de levantar un proyecto público y fácil, es desde github pages, o firebase hosting.
Usa el panel de service worker para cancelar registro, actualizar servicio, emular eventos push, detener service worker.
Verifica, borra y manipula el cache del service worker.
Borra service worker, todo el almacenamiento y cachés en un sólo click desde el panel storage.

Todo esto y mucho más en developer.chrome.com/docs/devtools/progressive-web-apps.

... y finalmente... Si te ha gustado, difúndelo. Es solo un momento. escríbe algo en comentarios 😉 Gracias.