Implementando Workbox

Actualmente hay otra manera de definir una estrategia por defecto:

workbox.routing.setDefaultHandler(
  new workbox.strategies.NetworkFirst(),
);

Ahora bien, la que presenta el profesor también funciona:

workbox.routing.registerRoute(
  /^https?.*/,
  new workbox.strategies.NetworkFirst()
);

El curso en realidad esta muy bueno, sin embargo ya le pegaron los años el archivo de service worker actualmente ha cambiado los métodos como se configuran las cosas:

1. workbox.precaching.suppressWarnings() -> No es reconocido ya.
2. workbox.routing.registerNavigationRoute -> Ya no es una función se debe utilizar registerRoute
3. workbox.strategies.networkFirst() -> Ya no funciona de esta manera, se debe instanciar la clase.

para esta clase el segmento del service worker que explica el profesor quedaría así:

    workbox.routing.registerRoute('/index.html', new workbox.strategies.NetworkFirst(), 'GET');
    workbox.routing.registerRoute(/^http?.*/, new workbox.strategies.NetworkFirst(), 'GET');

Solo para los que esten por aqui en estos dias. Han ocurrido varios cambios en la forma de usar workbox, les recomiendo leer la documentación en:

Workbox-Strategies

Ahora cuando hacemos un registerRoute debemos instanciar usando new y reescribiendo el método usando PascalCase.

Por ejemplo:

Usar NetworkFirst en vez de networkFirst.

workbox.routing.registerRoute(
  /^https?.*/,
  new workbox.strategies.NetworkFirst()
);

En el siguiente video, tambien deben tener estos consejos.

Espero les sirva de mucho.

Les dejo el offline cookbook de Jake Archibald, es un googler que ha hecho varios materiales acerca de SW, ahí tiene a detalle como funcionan las estrategias de carga

tengo un problema, el latest.php no me llega por service worker por mas que lo intento… a alguien le ha pasado lo mismo?

por que usan react create app? eso si no me gusto veo que lo comentan mucho en el curso

solución al error Can’t find self.__WB_MANIFEST in your SW source. aquí

Al que le aparezca el siguiente error, es porque a partir de la versión 4.3 de workbox ya no hace falta workbox.precaching.suppressWarnings()

Tuve problemas con la implementación actual del curso. Al 2022, está fue la solución que encontré después de mucho buscar:

import { registerRoute, NavigationRoute, Route } from 'workbox-routing';
import {
  CacheFirst,
  StaleWhileRevalidate,
  NetworkFirst,
} from 'workbox-strategies';
import { precacheAndRoute, createHandlerBoundToURL } from 'workbox-precaching';

precacheAndRoute(self.__WB_MANIFEST);

const handler = createHandlerBoundToURL('/index.html');
const navigationRoute = new NavigationRoute(handler);

// Handle API:
registerRoute(new RegExp(/^https?.*/), new NetworkFirst());

registerRoute(navigationRoute);

Al dia de hoy 29/10/2021 create-react-app no crea el serviceWorker por defecto, para eso tienes que hacerlo con este cli.

npx create-react-app my-app --template pwa

Luego en index, cambiar el

serviceWorkerRegistration.unregister();

por

serviceWorkerRegistration.register();

el service-worker.js debe quedar así

// App Shell
new NavigationRoute('/index.html')

// La API usa Stale While Revalidate para mayor velocidad
registerRoute(/^https?:\/\/www.themealdb.com\/api\/.*/, new StaleWhileRevalidate({}),
 'GET')




// Last fuentes van con Cache First y vencen al mes
registerRoute(/^https:\/\/fonts.(?:googleapis|gstatic).com\/(.*)/, 
  new CacheFirst({
    cacheName: 'google-fonts-cache',
    plugins: [
      new ExpirationPlugin({  maxAgeSeconds: 30 * 24 * 60 * 60 })
    ]
  }),
  'GET')

// Todo lo demás usa Network First
registerRoute(/^https?.*/,
  new NetworkFirst(), 'GET')

Al momento de hacer build me arroja este error:
Can’t find self.__WB_MANIFEST in your SW source.

Alguien sabe de alguna solución para ese problema?

¡Ya lo estoy probando! Me encanta esto de los service-workers

Que buena clase!!! tantas ideas se me vienen a la cabeza para aplicar!

¿Es posible modificar las estrategias de carga en las diferentes versiones de la app y que esto sea reconocido automáticamente en el browser?
Por ejemplo, usar en la primer versión la estrategia networkOnly para un recurso y en la próxima versión cacheFirst o visceversa.
¿Cómo se actualiza el cache y las modificaciones en el service-worker entre versión y versión?

revisar el comentario https://platzi.com/comentario/2916090/

Hola, estoy con el tutorial, en este modulo me sale al correr el npm rub build && npm start, el siguiente error:

que puede ser?

Error: Cannot find module '/home/smorales/Documentos/Proyectos/pwa-platzi/platzi-pwa/config-overrides'
    at Function.Module._resolveFilename (internal/modules/cjs/loader.js:668:15)
    at Function.Module._load (internal/modules/cjs/loader.js:591:27)
    at Module.require (internal/modules/cjs/loader.js:723:19)
    at require (internal/modules/cjs/helpers.js:14:16)
    at Object.<anonymous> (/home/smorales/Documentos/Proyectos/pwa-platzi/platzi-pwa/node_modules/react-app-rewired/config-overrides.js:5:18)
    at Module._compile (internal/modules/cjs/loader.js:816:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:827:10)
    at Module.load (internal/modules/cjs/loader.js:685:32)
    at Function.Module._load (internal/modules/cjs/loader.js:620:12)
    at Module.require (internal/modules/cjs/loader.js:723:19)```

Me volví loco con lo del archivo LATEST.PHP que no aparecía la ruedita.
cambie el código como comentaron más abajo.
Pero aparte en mi caso, para que funcione, tuve que navegar por la web normal como lo muestra, pero antes de volver a recargar la página tuve que poner en modo offline primero.
Entonces en pasos sería: (Siempre borrando el cache primero como lo viene haciendo)
1: Navegar
2: poner modo offline*
3: Si navegamos en offline sigue funcionando. No hace falta recargar
En otra situacion, si ponemos modo offline y queremos navegar nos diría que no hay conexión a internet.
Despues de navegar en modo offline, recargo y funciona todo correcto. Pero no sé ahi si eso es normal hoy en 2020. Sin duda hace falta actualizarlo al curso

buscando un poco encontre este ejemplo
https://codelabs.developers.google.com/codelabs/workbox-lab/#1

realmente nome esta funcionand nada

Hola, estoy siguiendop la clase y no importa cuánto le mueva no logro hacer que la API cargue en el service worker, anexo el codigo de mi service-worker.js

// Precarga la app
self.__precacheManifest = [].concat(self.__precacheManifest || []);
workbox.precaching.precacheAndRoute(self.__precacheManifest, {});

// App shell
workbox.routing.registerNavigationRoute(
  workbox.precaching.getCacheKeyForURL('./index.html')
);

// Todo lo demás usa Network First
workbox.routing.registerRoute(
  new RegExp(/^https?.*/),
  new workbox.strategies.NetworkFirst(),
  'GET'
);

¿Alguien puede ayudarme?

con esta implementacion de Worbox es muy util para el user final

Hola, estoy teniendo problemas al hacer el build de la app y me sale este error, cual puede ser la solucion?

npm run build && npm start

> platzi-recetas@0.1.0 build /home/stiwar/Stiwar A'/ReactJS Platzi/platzi-
pwa-master
> react-app-rewired build

internal/modules/cjs/loader.js:775
    throw err;
    ^

Error: Cannot find module '/home/stiwar/Stiwar A'/ReactJS Platzi/platzi-pw
a-master/config-overrides'
Require stack:
- /home/stiwar/Stiwar A'/ReactJS Platzi/platzi-pwa-master/node_modules/react-app-rewired/config-overrides.js
- /home/stiwar/Stiwar A'/ReactJS Platzi/platzi-pwa-master/node_modules/react-app-rewired/scripts/build.js
    at Function.Module._resolveFilename (internal/modules/cjs/loader.js:772:15)
    at Function.Module._load (internal/modules/cjs/loader.js:677:27)
    at Module.require (internal/modules/cjs/loader.js:830:19)
    at require (internal/modules/cjs/helpers.js:68:18)
    at Object.<anonymous> (/home/stiwar/Stiwar A'/ReactJS Platzi/platzi-pwa-master/node_modules/react-app-rewired/config-overrides.js:5:18)
    at Module._compile (internal/modules/cjs/loader.js:936:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:947:10)
    at Module.load (internal/modules/cjs/loader.js:790:32)
    at Function.Module._load (internal/modules/cjs/loader.js:703:12)
    at Module.require (internal/modules/cjs/loader.js:830:19) {
  code: 'MODULE_NOT_FOUND',
  requireStack: [
    "/home/stiwar/Stiwar A'/ReactJS Platzi/platzi-pwa-master/node_modules/react-app-rewired/config-overrides.js",
    "/home/stiwar/Stiwar A'/ReactJS Platzi/platzi-pwa-master/node_modules/react-app-rewired/scripts/build.js"
  ]

En vardad estoy probando el codigo y no me funciona 😦

A los que les sale error al ejecutar npm run build && npm run start
simplemente cambien:

    "start": "serve ./build -s -p ${-5000}",```
 por

"start": "serve ./build -s"

n