No tienes acceso a esta clase

¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera

Experimentar con Workbox

12/16
Recursos

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

  1.    Las imágenes deben tener una estrategia Cache First.
    
  2.    Las imágenes guardadas en cache deben tener un vencimiento de 1 semana.
    
  3.    Probar Plugins y Estrategias.
    

Aportes 8

Preguntas 2

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad?

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
      })
    ]
  })
)

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();
    }
});

Excelente curso!, muchas gracias

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?

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

b