No tienes acceso a esta clase

隆Contin煤a aprendiendo! 脷nete y comienza a potenciar tu carrera

Implementando Workbox

9/16
Recursos

En esta clase vamos a ver como implementar estrategias de carga con Workbox.

El funcionamiento de un service worker por defecto toma una lista de assets para precargarlos y si la ruta coincide exactamente con un asset entonces lo tomara de cache.

Workbox tiene una caracter铆stica llamada registerNavigationRoute la cual se encarga de hacer el funcionamiento por defecto de un service worker m谩s aparte si encuentra una url que no conoce va a buscar una url, en este caso index.html y que el se encargue de lo que va a mostrar.

Existen diferentes estrategias de carga.
La primera y fundamental se llama Network Only. Esta se encarga checar si hay conexi贸n a internet, si existe una conexi贸n realiza la petici贸n de informaci贸n, en caso de no haber conexi贸n se rompe la p谩gina.

驴Cu谩ndo usar Network Only?
Por defecto si no queremos cache o manejamos informaci贸n en tiempo real.

Network First es otra estrategia de carga, se encarga mandar la petici贸n a internet, si la conexi贸n a internet esta ca铆da entonces tomara la informaci贸n que tenga almacenada en cache.

驴Cu谩ndo usar Network First?
Cuando queremos la 煤ltima versi贸n de un asset y tener soporte offline.

Aportes 25

Preguntas 3

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad?

o inicia sesi贸n.

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鈥檛 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鈥檛 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

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