Introducción a Workbox

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

Resumen

En esta clase vamos a ver como implementar service workers en nuestra aplicación.

Los service workers solo funcionan en producción.

Una recomendación siempre que trabajemos con service workers es ir a Clear Storage en la tab de Application de las DevTools, y limpiar la información del sitio. Esto desinstalara todo lo que es cache y limpiara los service workers.

Quienes habrán prestado atención a la documentación de create-react-app habrán leído que este incluye un service worker.
El service worker de Create React App hace algo llamado “SW Precache“, lo que hace es precargar y dejar disponibles offline todos los archivos necesarios para correr la aplicación. Una recomendación a la hora de hacer debugging es refrescar el sitio pues un service worker por lo general se inicializa después de la primera carga.

NUNCA conviene escribir nuestro propio service worker especialmente con herramientas de bajo nivel.

Para implementar nuestro propio service worker usaremos Workbox, una librería creada por Google para crear Service Workers.

Hay un pequeño detalle al momento de implementar Workbox en nuestro proyecto y es que estamos yendo en contra de los principios de Create React App y esto solo significa una cosa “eject”, esto nos llenaría de archivos que no nos sirven. Para evitar hacer eject vamos a instalar react-app-rewired y el plugin para webpack de workbox.

npm add workbox-webpack-plugin react-app-rewire-workbox react-app-rewired

Julio J Yépez

student•

ADEVERTENCIA:

Nunca conviene escribir nuestro propio ServiceWorker, especialmente con herramientas de bajo nivel. Esto no tiene que ver con un tema de confianza, sino con cómo funciona un SW y sobre todo lo qué un SW tiene control
Una vez que el ServiceWorker se instala en el cliente, el sitio queda fuertemente cacheado cómo está y es muy difícil corregir bugs en este contexto.

RECOMENDACIÓN:

Siempre conviene confiar o utilizar alguna herramienta que esté muy testeada y probada, y que tenga buenas herramientas de testing. Y … NO intentar crear nuestros propios Service Workers.

¡Workbox es un ejemplo de estas herramientas probadas! y es by Google.

Julio J Yépez

student•

Workbox es una librería hecha por Google para crear ServiceWorkers, y tiene una API fácil de usar. Muy bien pensada.

Julio J Yépez

student•

npm install react-app-rewired react-app-rewire-workbox workbox-weppack-plugin

silvana murgo

student•

Octubre 2020 para que funcione como lo indica el profesor hay instalar estas versiones

"react-app-rewire-workbox”: “2.0.1”,
“react-app-rewired”: “2.1.6”,
“workbox-webpack-plugin”: “4.3.1”

El comando seria el siguiente:

npm add workbox-webpack-plugin@4.3.1 react-app-rewire-workbox@2.0.1 react-app-rewired@2.1.6 -E -D

De lo contrario nada funciona :( #CursoNecesitaUpdate

Bruno Kamiche

student•

Sos capo! Y es cierto que el curso necesita update

Iván Darío Sánchez Jiménez

student•

Aunque el proyecto esta desactualizado a nivel de dependencias, para que funcione deben copiar las versiones del package.json utilizadas en el curso

&quot;workbox-webpack-plugin&quot;: &quot;^3.3.1&quot;,
    &quot;react-app-rewire-workbox&quot;: &quot;^2.0.1&quot;,
    &quot;react-app-rewired&quot;: &quot;^1.5.2&quot;

e instalar las dependencias de la forma

npm install --exact

Y funcionando hoy 2020/05/04 a pesar del versionamiento

Cesar Galvis Leon

student•

No funciona, mi versión de react es la 16.12.0

Willy David Da Conceicao Lozada

student•

Muchas gracias amigo me funciono hoy sábado, 1 de agosto de 2020 estuve viendo tu repo me toco copiar y pegar el package.json en mi proyecto y instalar las dependencias.

Por si otra persona tiene el mismo problema de correr los npm run build && npm start y le sale un error les recomiendo copiar el package.json de @cosmosoftroot y remplazarlo por su package y instalar nuevamente las dependencias link aqui

Muchas gracias @cosmosoftroot ya no sabia que hacer jeje

Jorge Méndez Ortega

student•

nada de lo que esta en el curso funciona, tal cual es necesario actualizar, de hecho ni el codigo de ejemplo esta al 100 le faltan algunas dependencias que utilizan y no existen jeje,

Ramiro Calo

student•

Buenas!! no sé si alguno le pasó que cunado limpiaban el cache, refrescaban y ponían la aplicación offline chrome mostraba un error y no se veía la página.

Si veían la consola les mostraba el siguiente error

service-worker.js:11 Uncaught TypeError: workbox.precaching.suppressWarnings is not a function
    at service-worker.js:11

Error during service worker registration: TypeError: Failed to register a ServiceWorker: ServiceWorker script evaluation failed

Si da este problema cuando limpian el cache y como muestra el segundo error, no se registra el service worker por lo tanto no cachea nada.

Leyendo un poco lo que hace el método suppressWarnings es generar un log de precaching.

En la documentación de workbox https://developers.google.com/web/tools/workbox/reference-docs/latest/workbox.precaching ya no vi que estuviera ese método por lo tanto lo comenté de mi código en services-worker.js

/**
 * The workboxSW.precacheAndRoute() method efficiently caches and responds to
 * requests for URLs in the manifest.
 * See https://goo.gl/S9QRab
 */

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

a partir de ahí empezó a registrarme el cache sin problemas y cuando dejo la app offline, me muestra el header o lo cacheado en la home.

espero que sirva de algo.

Saludos.

Daniel Vaca

student•

Excelente! justo tuve el mismo problema y tu ayuda me ahorro mucho tiempo!!

Luis Rodriguez

student•

gracias, hermano! se agradece tu aporte. :D

Manuel Rivera

student•

Ya hace falta actualizar el curso, hay cosas que han cambiado, incluso otras no estan , y nos encontramos con problemas que lleva algo de tiempo solucionar

Santiago Ventura

student•

ya pasaron mas de 24 meses, INCREIBLE que no actualizen

andrés eduardo betancourt bescanza

student•

Al dia de hoy 26/10/2020 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();

Octavio Villavicencio Cruz

student•

para los que lo hacen en sepriembre del 2021

el service-worker.js debe quedar asi

/* eslint-disable no-restricted-globals */

// This service worker can be customized!
// See https://developers.google.com/web/tools/workbox/modules
// for the list of available Workbox modules, or add any other
// code you'd like.
// You can also remove this file if you'd prefer not to use a
// service worker, and the Workbox build step will be skipped.

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

clientsClaim();

// Precache all of the assets generated by your build process.
// Their URLs are injected into the manifest variable below.
// This variable must be present somewhere in your service worker file,
// even if you decide not to use precaching. See https://cra.link/PWA
precacheAndRoute(self.__WB_MANIFEST);


// Set up App Shell-style routing, so that all navigation requests
// are fulfilled with your index.html shell. Learn more at
// https://developers.google.com/web/fundamentals/architecture/app-shell
const fileExtensionRegexp = new RegExp('/[^/?]+\\.[^/]+$');
registerRoute(
  // Return false to exempt requests from being fulfilled by index.html.
  ({ request, url }) => {
    // If this isn't a navigation, skip.
    if (request.mode !== 'navigate') {
      return false;
    } // If this is a URL that starts with /_, skip.

    if (url.pathname.startsWith('/_')) {
      return false;
    } // If this looks like a URL for a resource, because it contains // a file extension, skip.

    if (url.pathname.match(fileExtensionRegexp)) {
      return false;
    } // Return true to signal that we want to use the handler.

    return true;
  },
  createHandlerBoundToURL(process.env.PUBLIC_URL + '/index.html')
);

// An example runtime caching route for requests that aren't handled by the
// precache, in this case same-origin .png requests like those from in public/
registerRoute(
  // Add in any other file extensions or routing criteria as needed.
  ({ url }) => url.origin === self.location.origin && url.pathname.endsWith('.png'), // Customize this strategy as needed, e.g., by changing to CacheFirst.
  new StaleWhileRevalidate({
    cacheName: 'images',
    plugins: [
      // Ensure that once this runtime cache reaches a maximum size the
      // least-recently used images are removed.
      new ExpirationPlugin({ maxEntries: 50 }),
    ],
  })
);


registerRoute(
  // Add in any other file extensions or routing criteria as needed.
  ({ url }) => url.origin === self.location.origin && url.pathname.endsWith('.png'), // Customize this strategy as needed, e.g., by changing to CacheFirst.
  new StaleWhileRevalidate({
    cacheName: 'images',
    plugins: [
      // Ensure that once this runtime cache reaches a maximum size the
      // least-recently used images are removed.
      new ExpirationPlugin({ maxEntries: 50 }),
    ],
  })
);

// This allows the web app to trigger skipWaiting via
// registration.waiting.postMessage({type: 'SKIP_WAITING'})
self.addEventListener('message', (event) => {
  if (event.data && event.data.type === 'SKIP_WAITING') {
    self.skipWaiting();
  }
});

// Any other custom service worker logic can go here.



// 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')

Irungaray Agustin

student•

El curso y el profesor son muy buenos, lastima que esté tan desactualizado

jose avila

student•

Para quienes vean este curso, deben tomar en cuenta las siguientes notas debido a recientes actualizaciones.

Actualizar react-scripts en el proyecto ya que esta en la v1.1.4. ypara la fecha van por el 4.0.3
La API de themealDB ahora requiere un key (cuesta 2$ en su patreon)
NO USAR react-app-rewire, ya que esta esta desactualizada y casi deprecada, en su lugar usar craco es de muy facil y similar configuración
Ya no se ejecutan las estrategias como funciones, ahora son clases aqui dejo un ejemplo de como implementar una al registrar una ruta

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

y bonus aqui un ejemplo para interceptar los request tipo POST con background sync

const bgSyncPlugin = new BackgroundSyncPlugin('myQueueName', {
  maxRetentionTime: 24 * 60 // Retry for max of 24 Hours (specified in minutes)
});

registerRoute(({url}) => 
  /^https?:\/\/www.themealdb.com\/api\/.*/,
  new NetworkOnly({
    cacheName: 'api',
    plugins:[bgSyncPlugin]
  }), "POST"
)

PD: las nuevas versiones de CRA incluyen workbox y un template basico (service-worker.js) para el registro en cache del app shell cuando se registra el serviceworker, solo queda de parte uno agregar rutas adicionales (api, assets, etc...)

espero esto sea de ayuda para alguien en la comunidad.

Arantxa Giovanna Rosas Del Valle

student•

Hubiera preferido que en lugar de create-react-app se hiciera la app desde cero, en la vida real, los proyectos grandes eso es lo que hacen y aquí nos estamos amarrando mucho al boilerplate de CRA.

Andres Gazui

student•

En el curso avanzado de react en el ultimo modulo te enseñan a hacer exactamente eso, utilizando webpack para agregar el manifest y el serviceWorker con workbox :D

Cristian Iñiguez

student•

Can't find self.__WB_MANIFEST in your SW source.

¿A alguién más le aparece este error al ejecutar la aplicación?

Octavio Villavicencio Cruz

student•

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í

/* eslint-disable no-restricted-globals */

// This service worker can be customized!
// See https://developers.google.com/web/tools/workbox/modules
// for the list of available Workbox modules, or add any other
// code you'd like.
// You can also remove this file if you'd prefer not to use a
// service worker, and the Workbox build step will be skipped.

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

clientsClaim();

// Precache all of the assets generated by your build process.
// Their URLs are injected into the manifest variable below.
// This variable must be present somewhere in your service worker file,
// even if you decide not to use precaching. See https://cra.link/PWA
precacheAndRoute(self.__WB_MANIFEST);

// Set up App Shell-style routing, so that all navigation requests
// are fulfilled with your index.html shell. Learn more at
// https://developers.google.com/web/fundamentals/architecture/app-shell
const fileExtensionRegexp = new RegExp('/[^/?]+\\.[^/]+$');
registerRoute(
  // Return false to exempt requests from being fulfilled by index.html.
  ({ request, url }) => {
    // If this isn't a navigation, skip.
    if (request.mode !== 'navigate') {
      return false;
    } // If this is a URL that starts with /_, skip.

    if (url.pathname.startsWith('/_')) {
      return false;
    } // If this looks like a URL for a resource, because it contains // a file extension, skip.

    if (url.pathname.match(fileExtensionRegexp)) {
      return false;
    } // Return true to signal that we want to use the handler.

    return true;
  },
  createHandlerBoundToURL(process.env.PUBLIC_URL + '/index.html')
);

// An example runtime caching route for requests that aren't handled by the
// precache, in this case same-origin .png requests like those from in public/
registerRoute(
  // Add in any other file extensions or routing criteria as needed.
  ({ url }) => url.origin === self.location.origin && url.pathname.endsWith('.png'), // Customize this strategy as needed, e.g., by changing to CacheFirst.
  new StaleWhileRevalidate({
    cacheName: 'images',
    plugins: [
      // Ensure that once this runtime cache reaches a maximum size the
      // least-recently used images are removed.
      new ExpirationPlugin({ maxEntries: 50 }),
    ],
  })
);

registerRoute(
  // Add in any other file extensions or routing criteria as needed.
  ({ url }) => url.origin === self.location.origin && url.pathname.endsWith('.png'), // Customize this strategy as needed, e.g., by changing to CacheFirst.
  new StaleWhileRevalidate({
    cacheName: 'images',
    plugins: [
      // Ensure that once this runtime cache reaches a maximum size the
      // least-recently used images are removed.
      new ExpirationPlugin({ maxEntries: 50 }),
    ],
  })
);

// This allows the web app to trigger skipWaiting via
// registration.waiting.postMessage({type: 'SKIP_WAITING'})
self.addEventListener('message', (event) => {
  if (event.data && event.data.type === 'SKIP_WAITING') {
    self.skipWaiting();
  }
});

// Any other custom service worker logic can go here.

// 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')

Luis Alejandro Vera Hernandez

student•

Gracias por la aclaracion

Andrea Montaño

student•

Hola chiquill@s... me salía el siguiente error al hacer build: Can't find self.__WB_MANIFEST in your SW source.

se soluciona modificando el service-worker.js: self.__precacheManifest = [].concat(self.__precacheManifest || []) //workbox.precaching.suppressWarnings() workbox.precaching.precacheAndRoute(self.__WB_MANIFEST)

Andres Roberto Coello Goyes

student•

Pase 2 horas creando mi service workers.. -_- pero lo logre

Algun usuario de Colombia

student•

Sería bueno compartir

Eduardo Rasgado Ruiz

student•

Que gran curso!

andrés eduardo betancourt bescanza

student•

Configura workbox con webpack

En esta clase pueden ver como se configura el workbox con webpack.

https://platzi.com/clases/1601-react-avanzado/21299-pwa-soporte-offline/

Juan Pablo Celiz

student•

¡Muy bien aporte!

Cristian Caraballo

student•

Excelente referencia! 👊

Cristian Caballero

student•

QUe hago si no me aparecen los service-worker entre los archivos mostrados en Network?

Juan Castro

teacher•

¡Hola! ¿Tienes tu código publicado en alguna parte? Así sin verlo está un poco difícil ayudarte. :sweat_smile:

Te recomiendo descargar los archivos de la clase y compararlos con los tuyos, así puedes ver si te faltó algo o escribiste alguna línea de código diferente. :wink:

andrés eduardo betancourt bescanza

student•

Esto pasa porque de seguro lo tienes solo para JS, debes seleccionar All.

Joel Alejandro Morales García

student•

Los archivos que vienen en la clase no estan actualizados, alguien sabe si estan en algun repositorio de github, gracias 😃

Roberto Gonzalez

teacher•

Tenemos el repo subido en GitHub (Hay un branch por cada clase para que sea más fácil de navegar): https://github.com/Aerolab/platzi-pwa

Joel Alejandro Morales García

student•

Muchas gracias profe 😃

Julio J Yépez

student•

La manera de limpiar la caché y datos residuales para evitar bugs con los ServiceWorkers, es ir al tab de Aplication, a la opción Clear Storage, y hacer click en el boton Clear Site Data.

Tip importante. Gracias!

William Velázquez

student•

En el caso de que no utilicemos create-react-app y trabajemos con un Framework como Next.js ¿Cúal sería la forma de agregar Workbox? o en ese caso ¿Conviene utilizar alguna otra librería/biblioteca?
Saludos 😃

Roberto Gonzalez

teacher•

Para Next el mejor plugin es next-offline, que utiliza workbox detrás de escena.
Igualmente aviso que tiene un bug documentado, que es que el app shell (navigationRoute) no funciona bien, así que solamente funciona offline correctamente si entrás a la app por una home sin getInitialProps (o que maneje las requests por IndexedDB o similar).
En sí tener soporte offline con server side rendering es bastante rebuscado en general ya que usualmente necesitás un storage local de datos además del manejo de red.

William Velázquez

student•

Muchas gracias Roberto! Investigaré más acerca de ello.
Saludos.