Experimentar con Workbox

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

Contenido del curso

Introducción a PWA

Service Workers

Funcionalidades Avanzadas

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.
```

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?

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