Experimentar con Workbox

Clase 12 de 16 • Curso de Progressive Web Apps con React.js

Resumen

Para que experimentes con las diferentes estrategias de carga que ofrece workbox realiza el siguiente reto:

   Las imágenes deben tener una estrategia Cache First.

   Las imágenes guardadas en cache deben tener un vencimiento de 1 semana.

```
   Probar Plugins y Estrategias.
```

Hector Jose Flores Colmenarez

student•

Mi solucion, espero les sea de ayuda.

workbox.routing.registerRoute(
  /^https?:\/\/www.themealdb.com\/images\/.*/,
  new workbox.strategies.CacheFirst({
    cacheName: 'image-cache',
    plugins: [
      new workbox.expiration.Plugin({
        maxAgeSeconds: 7 * 24 * 60 * 60,
        maxEntries: 20
      })
    ]
  })
)

Bernardo Aguayo Ortega

student•

omg, hermoso

lucasmoyano.ar Moyano

student•

Mmm y si tengo que crear, modificar y eliminar entidades estando offline y después persistir cuando esté online... ¿Cuál sería la mejor estrategia?

lucasmoyano.ar Moyano

student•

Me autorespondo jeje... Estuve investigando mucho acerca de este tema... Se me hizo bastante complejo, pero encontré una solución bastante simple. Actualmente lo estoy solucionando de la siguiente forma... En las entidades que quiero que funcionen offline, en vez de utilizar un id autoincrement en la base de datos, utilizo UUID. De esta forma puedo crear los ids desde el frontend sin problemas. Después, a la hora de hacer un post requests, voy almacenando todas las request en un array en LocalStorage... devolviendo una respuesta mockeada... y cuando vuelve la conexión a internet ejecuto todos las request en el orden en que fueron almacenadas... La verdad esto me esta funcionando muy bien y me esta cubriendo casi todos los casos.

Yasniel Fajardo Egues

student•

Mi solucion:

import { clientsClaim } from 'workbox-core';
import { ExpirationPlugin } from 'workbox-expiration';
import { precacheAndRoute, createHandlerBoundToURL } from 'workbox-precaching';
import { registerRoute } from 'workbox-routing';
import { NetworkFirst, StaleWhileRevalidate } from 'workbox-strategies';

const config = {
    maxEntries: 5000,
    maxAgeSeconds: 60 * 60 * 24 * 30,
};

clientsClaim();
precacheAndRoute(self.__WB_MANIFEST);
const fileExtensionRegexp = new RegExp('/[^/?]+\\.[^/]+$');
registerRoute(({ request, url }) => {
    if (request.mode !== 'navigate') {
        return false;
    }
    if (url.pathname.startsWith('/_')) {
        return false;
    }
    if (url.pathname.match(fileExtensionRegexp)) {
        return false;
    }
    return true;
}, createHandlerBoundToURL(`${process.env.PUBLIC_URL}/index.html`));

// Images
registerRoute(
    ({ url }) => url.origin === self.location.origin && url.pathname.endsWith('.png'),
    new StaleWhileRevalidate({
        cacheName: 'images',
        plugins: [new ExpirationPlugin(config)],
    }),
);

registerRoute(
    ({ url }) => url.origin === self.location.origin && url.pathname.endsWith('.svg'),
    new StaleWhileRevalidate({
        cacheName: 'images',
        plugins: [new ExpirationPlugin(config)],
    }),
);

registerRoute(
    ({ url }) => url.origin === self.location.origin && url.pathname.endsWith('.jpg'),
    new StaleWhileRevalidate({
        cacheName: 'images',
        plugins: [new ExpirationPlugin(config)],
    }),
);

// API
registerRoute(
    /^https?:\/\/training-dev-api.lexawise.com\/zenith\/.*/,
    new StaleWhileRevalidate({
        cacheName: 'all-https',
        plugins: [new ExpirationPlugin(config)],
    }),
    'GET',
);

// Default
registerRoute(
    /^https?.*/,
    new NetworkFirst({
        cacheName: 'all-https',
        plugins: [new ExpirationPlugin(config)],
    }),
    'GET',
);
registerRoute(
    /^http?.*/,
    new NetworkFirst({
        cacheName: 'all-http',
        plugins: [new ExpirationPlugin(config)],
    }),
    'GET',
);

self.addEventListener('message', (event) => {
    if (event.data && event.data.type === 'SKIP_WAITING') {
        self.skipWaiting();
    }
});

Javier Alejandro Albornoz Pérez

student•

Podrías pasar el repo?

Eduardo Rasgado Ruiz

student•

Con la nueva ley europea no hay un aviso especial para nuestros usuarios para decirles que les estamos trackeando con service workers y google analytics? O va implicito en el aviso de las coockies?

Diego Forero

Team Platzi•

Tienes que informar que datos recolectas ademas dar la opción de que borren toda su información del sistema.

Carlos Loaiza

student•

Excelente curso!, muchas gracias

Omar García Betanzos

student•

Documentación

Pablo Nicolás Alonso

student•

Enlace a la documentación: https://developers.google.com/web/tools/workbox/modules/workbox-expiration

Brian Bentancourt

student•

hola, en mi aplicacion react estoy uttilizando leaflet y hace llamadas http, por lo que workbox me da errores y no carga las urls. Como puedo solucionarlo?

Fabián andres Pedraza Borhorquez

student•

workbox.routing.registerRoute( /(.*)articles(.*)\.(?:png|gif|jpg)/, workbox.strategies.cacheFirst({ cacheName: 'images-cache', plugins: [ new workbox.expiration.Plugin({ maxEntries: 50, maxAgeSeconds: 30 * 24 * 60 * 60, // 30 Days }) ] }) ); esta informacion la encuentras en la documentacion de wokbox

Naldo Duran

student•

workbox.routing.registerRoute(
  /^https?:\/\/www.themealdb.com\/images\/.*/,
  new workbox.strategies.CacheFirst({
    cacheName: 'image-cache',
    plugins: [
      new workbox.expiration.Plugin({
        maxAgeSeconds: 7 * 24 * 60 * 60,
        maxEntries: 20
      })
    ]
  })
)

import { clientsClaim } from 'workbox-core';
import { ExpirationPlugin } from 'workbox-expiration';
import { precacheAndRoute, createHandlerBoundToURL } from 'workbox-precaching';
import { registerRoute } from 'workbox-routing';
import { NetworkFirst, StaleWhileRevalidate } from 'workbox-strategies';

const config = {
    maxEntries: 5000,
    maxAgeSeconds: 60 * 60 * 24 * 30,
};

clientsClaim();
precacheAndRoute(self.__WB_MANIFEST);
const fileExtensionRegexp = new RegExp('/[^/?]+\\.[^/]+$');
registerRoute(({ request, url }) => {
    if (request.mode !== 'navigate') {
        return false;
    }
    if (url.pathname.startsWith('/_')) {
        return false;
    }
    if (url.pathname.match(fileExtensionRegexp)) {
        return false;
    }
    return true;
}, createHandlerBoundToURL(`${process.env.PUBLIC_URL}/index.html`));

// Images
registerRoute(
    ({ url }) => url.origin === self.location.origin && url.pathname.endsWith('.png'),
    new StaleWhileRevalidate({
        cacheName: 'images',
        plugins: [new ExpirationPlugin(config)],
    }),
);

registerRoute(
    ({ url }) => url.origin === self.location.origin && url.pathname.endsWith('.svg'),
    new StaleWhileRevalidate({
        cacheName: 'images',
        plugins: [new ExpirationPlugin(config)],
    }),
);

registerRoute(
    ({ url }) => url.origin === self.location.origin && url.pathname.endsWith('.jpg'),
    new StaleWhileRevalidate({
        cacheName: 'images',
        plugins: [new ExpirationPlugin(config)],
    }),
);

// API
registerRoute(
    /^https?:\/\/training-dev-api.lexawise.com\/zenith\/.*/,
    new StaleWhileRevalidate({
        cacheName: 'all-https',
        plugins: [new ExpirationPlugin(config)],
    }),
    'GET',
);

// Default
registerRoute(
    /^https?.*/,
    new NetworkFirst({
        cacheName: 'all-https',
        plugins: [new ExpirationPlugin(config)],
    }),
    'GET',
);
registerRoute(
    /^http?.*/,
    new NetworkFirst({
        cacheName: 'all-http',
        plugins: [new ExpirationPlugin(config)],
    }),
    'GET',
);

self.addEventListener('message', (event) => {
    if (event.data && event.data.type === 'SKIP_WAITING') {
        self.skipWaiting();
    }
});

Experimentar con Workbox

Introducción a PWA

¿Qué es una PWA?

Progressive Web App vs. Native App

El proyecto

Google Lighthouse

Creando un Web Manifest

Implementar el Manifest

Service Workers

¿Qué es un Service Worker?

Introducción a Workbox

Implementando Workbox

Aplicando Estrategias de Carga

Google Analytics Offline

Experimentar con Workbox

Funcionalidades Avanzadas

Web Share API

Trabajando Offline

Notificaciones

Publicando la app