A煤n no tienes acceso a esta clase

Crea una cuenta y contin煤a viendo este curso

Service Workers

23/42
Recursos

Sirven para hacer que nuestras aplicaciones funcionen Offline.

Muy usados en las Progressive Web Apps (PWA) los ServiceWorkers son una capa que vive entre el navegador y el Internet.

Parecido a como lo hacen los proxys van a interceptar peticiones para guardar el resultado en cache y la pr贸xima vez que se haga la petici贸n tomar del cache ese resultado.

Aportes 118

Preguntas 62

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad? Crea una cuenta o inicia sesi贸n.

  '/',
'/index.html',
'/assets/index.js',
'/assets/MediaPlayer.js',
'/assets/plugins/AutoPlay.js',
'/assets/plugins/AutoPause.js',
'/assets/index.css',
'/assets/BigBuckBunny.mp4',

Service Worker API

Los Service workers act煤an esencialmente como proxy servers asentados entre las aplicaciones web, el navegador y la red (cuando est谩 accesible). Est谩n destinados, entre otras cosas, a permitir la creaci贸n de experiencias offline efectivas, interceptando peticiones de red y realizando la acci贸n apropiada si la conexi贸n de red est谩 disponible y hay disponibles contenidos actualizados en el servidor. Tambi茅n permitir谩n el acceso a notificaciones tipo push y APIs de sincronizaci贸n en segundo plano.

Descarga, instalaci贸n y activaci贸n

En este punto, su service worker observar谩 el siguiente ciclo de vida:

  1. Descarga
  2. Instalaci贸n
  3. Activaci贸n

El service worker se descaga inmediatamente cuando un usuario accede por primera vez a un sitio controlado por el mismo.

Despu茅s de esto se descarga cada 24 horas aproximadamente. Se puede descargar con m谩s frecuencia, pero debe ser descargado cada 24 horas para prevenir que una mala programaci贸n sea molesta durante mucho tiempo.

ServiceWorkerContainer.register()

Par谩metros

   	 ServiceWorkerContainer.register(scriptURL, options)
   	  .then(function(ServiceWorkerRegistration) { ... });

scriptURL

La URL del script de trabajador de servicio.

options Optional

Un objeto que contiene opciones de registro. Las opciones disponibles actualmente son:

  • alcance: USVString representa una URL que define el alcance de registro de un 鈥渟ervice worker鈥; es decir, qu茅 rango de URL puede controlar un 鈥渟ervice worker鈥. Esto es generalmente una URL relativa. El valor predeterminado es la URL que obtendr铆a si resolviera 鈥./鈥 utilizando la ubicaci贸n de la p谩gina web como base. No es, como se cree com煤nmente, relativo a la ubicaci贸n del 鈥渟ervice worker鈥. Vea la secci贸n de Ejemplos para m谩s informaci贸n sobre c贸mo funciona.

Ejemplo

if ('serviceWorker' in navigator) {
  // Register a service worker hosted at the root of the
  // site using the default scope.
  navigator.serviceWorker.register('/sw.js').then(function(registration) {
    console.log('Service worker registration succeeded:', registration);
  }).catch(function(error) {
    console.log('Service worker registration failed:', error);
  });
} else {
  console.log('Service workers are not supported.');
}

CacheStorage.open()

The open() method of the CacheStorage interface returns a Promise that resolves to the Cache object matching the cacheName.

Ejemplo

var cachedResponse = caches.match(event.request).catch(function() {
  return fetch(event.request);
}).then(function(response) {
  caches.open('v1').then(function(cache) {
    cache.put(event.request, response);
  });  
  return response.clone();
}).catch(function() {
  return caches.match('/sw-test/gallery/myLittleVader.jpg');
});

Cache

La **Cache**interfaz proporciona un mecanismo de almacenamiento para [Request](http://fetch.spec.whatwg.org/#request)/ [Response](http://fetch.spec.whatwg.org/#response)pares de objetos que se almacenan en cach茅, por ejemplo, como parte del ServiceWorkerciclo de vida. Tenga en cuenta que la Cacheinterfaz est谩 expuesta a 谩mbitos con ventanas, as铆 como a los trabajadores. No tiene que usarlo junto con los trabajadores del servicio, aunque est茅 definido en la especificaci贸n del trabajador del servicio.

M茅todosSecci贸n

Cache.match(request, options)

Devuelve un Promiseque resuelve la respuesta asociada con la primera solicitud coincidente en el Cacheobjeto.

Cache.matchAll(request, options)

Devuelve un Promiseque resuelve una matriz de todas las solicitudes coincidentes en el Cacheobjeto.

Cache.add(request)

Toma una URL, la recupera y agrega el objeto de respuesta resultante a la cach茅 dada. Esto es funcionalmente equivalente a llamar fetch(), luego usar put()para agregar los resultados al cach茅.

Cache.addAll(requests)

Toma una matriz de URL, las recupera y agrega los objetos de respuesta resultantes a la cach茅 dada.

Cache.put(request, response)

Toma tanto una solicitud como su respuesta y la agrega al cach茅 dado.

Cache.delete(request, options)

Encuentra la Cache entrada cuya clave es la solicitud, devolviendo una Promiseque se resuelve truesi Cachese encuentra y elimina una entrada coincidente . Si no Cachese encuentra ninguna entrada, la promesa se resuelve false.

Cache.keys(request, options)

Devuelve un Promiseque se resuelve en una matriz de Cacheclaves.

Este es un curso en聽YouTube聽de聽PWA聽y聽Service Workers聽en espa帽ol que extiende los conceptos aqu铆 planteados as铆 como introduce nuevos y detalles importantes.
ULTRA RECOMENDADO!

En este video (capitulo 3) se habla puntualmente sobre Service Workers:
https://youtu.be/aUtWHiV3RJg

Este es el primer video del curso (12 videos)
https://youtu.be/ttwwOecPS10

Hey, braco, cuando llegues aqu铆 avisa para ver tus infograf铆as, son brutales!!!

TypeError: Failed to execute 鈥榩ut鈥 on 鈥楥ache鈥: Partial response (status code 206) is unsupported.
.
The reason this error is because the video is being partially loaded and it seems that cache.put does not support partial requests (status code 206). So, I added a ternary operator which caches only the responses which status is 200.
.

// it updates the cache given a request
async function updateCache(request) {
    const cache = await caches.open(VERSION);
    const response = await fetch(request);
    // Cache.put when status code is 200 
    // Otherwise return a simple promise 
    return response.status === 200 
        ? cache.put(request, response) 
        : new Promise((resolve, reject) => resolve(':D'));    
}

Que fastidio tener que descargar un zi峁 para tooooodas las clases, es mucho mas comodo cuando suben la carpeta

si les sale error Uncaught (in promise) lo mas seguro es que sea porque tienen mal las rutas, por ejemplo yo tenia el index css en otra carpeta diferente a assets, les recomiendo que muevan sus archivos a donde los tiene sparragus, asi queda:

    return cache.addAll([
        './index.html',
        './assets/index.js',
        './assets/MediaPlayer.js',
        './assets/plugins/AutoPause.js',
        './assets/plugins/AutoPlay.js',
        './assets/index.css',
        './assets/BigBunny.mp4'
    ])

Si tiene el siguiente error:

sw.js:41 Uncaught (in promise) TypeError: Request scheme 鈥榗hrome-extension鈥 is unsupported at updateCache (sw.js:41)

Se debe a alguna extension de chrome instalada, en mi caso fue wappalyzer.

Y las infograf铆as de Braco ???

No me hagas esto por favor.

Excelente clase, pueden complementar con este post de Google: https://developers.google.com/web/fundamentals/primers/service-workers/?hl=es

Interesante鈥 muchas gracias!

Una cuesti贸n, a lado de 鈥淪ource sw.js鈥 me aparece una x roja como si tuviera errores, sabe alguien por que sucede eso? Todo me funciona por si acaso.

La ultima feature siempre actualiza el contenido, independientemente de si es nuevo o no, algo ineficiente.

Debereiamos a帽adir alg煤n tipo de validaci贸n, con un timestamp o algo, para solo actualizar la cache si hay cambios.

Service Worker incluye alg煤n m茅todo para hacer comprobaciones?

En este punto me doy cuenta de que no sabia absolutamente nada de Javascript jaja.
Que curso tan completo

Muy complicado el curso 馃槮

Deja tu coraz贸n si extra帽aste las notas de braco 馃様馃挃

donde estas braco???

驴Por que hay que guardar el archivo sw.js sobre el resto de los archivos?驴Hay una mejor forma de referenciar todos los archivos al cache? 驴Que diferencia hay al guardar los archivos en cache de esta manera a guardarlos como lo hizo Leonidas Esteban en el Curso de jQuery Javascript?

Me hace pensar en platzi cuando descargas las clases offline y en netflix

驴Por que 鈥渃aches鈥 es as铆ncrono? 驴Por que se usa async/await en cache?

Realmente 煤til el manejo de service workers sobre todo podr铆a ser un buen caso el implementarlo para crear herramientas para la gente que no puede darse el lujo de tener una conexi贸n a internet 24/7

Hola, Richard. Te informo qu茅 el c贸digo que tienes en el github para el service worker en la l铆nea 29 tienes un error, puesto que referencias al plugin de autostop con una extensi贸n de archivo err贸nea:

'/assets/plugins/AutoPause.ts',

aunque est谩 comentada yo lo copie para seguir la clase y me estaba saltando un error al instalar el sw, pase mucho buscando que lo provocaba y espero a alguien le ayude.

Debemos tener cuidado de no tener habilitada la opci贸n Disable Cache en la pesta帽a de Network.


// Source index.js para llamar el Service Worker

if('serviceWorker' in navigator){
  navigator.serviceWorker.register('/sw.js').catch(error =>{
    console.log(error.message);
  });
}
// Source sw.js
const VERSION = "V1";

self.addEventListener("install", (event) => {
  event.waitUntil(precache());
});

self.addEventListener("fetch", (event) => {
  const request = event.request; 
  // Only GET
  if (request.method !== "GET") {
    return;
  }

  // buscamos en cache
  event.respondWith(cachedResponse(request));

  // actualizamos el cache
  event.waitUntil(updateCache(request));
});

async function precache() {
  const cache = await caches.open(VERSION);
  return cache.addAll([
    "/",
    "/index.html",
    "/assets/index.js",
    "/assets/MediaPlayer.js",
    "/assets/plugins/AutoPlay.js",
    "/assets/plugins/AutoPause.js",
    "/assets/index.css",
    "/assets/BigBuckBunny.mp4",
  ]);
}

async function cachedResponse(request) {
  const cache = await caches.open(VERSION);
  const response = await cache.match(request);
  return response || fetch(request);
}

async function updateCache(request) {
  const cache = await caches.open(VERSION);
  const response = await fetch(request);
  return cache.put(request, response);
}

El v铆deo no me lo guarda en la cache.

Ejemplo de esto tenemos la nueva versi贸n web de Twitter.com, si accedemos sin conexi贸n nos carga la interface (sin las novedades claro est谩)

En mi caso me daba error redundant para el registro del serviceWorker, me toc贸 expecificar las rutas de la siguiente manera:

return cache.addAll([
    '/',
    './index.html',
    './assets/app.css',
    './assets/app.js',
    './assets/BigBuckBunny.mp4',
    './assets/media.js',
    './assets/plugins/autopause.js',
    './assets/plugins/autoplay.js',
  ]);

Donde esta @braco ??? 馃槹馃槹馃槹

Hola, humanxs de la clase 23. Vengo del futuro (de la clase 28 exactamente) y quiero traerles un mensaje de paz y calma; no se den l谩tigo intentando solucionar el error que les va a salir (si, ese error; ya sabr谩s c煤al), en la clase 28 ya hemos encontrado la soluci贸n (en realidad Richard la explica).
Come tus vegetales; persevera, aunque a veces creas que no puedes o no entiendes la clase; practica mucho y recuerda, al que madruga dioj le ayuda. La buena pa todxs.

sean sinceros alguno de ustedes entendi贸 bien este curso ? porque yo no entend铆 nada hasta el momento.

Un service worker es un servicio intermedio entre nuestro navegador e internet que act煤a a modo de proxy y que intercepta toda la comunicaci贸n que se produce entre el dispositivo y la red. De este modo, podremos efectuar otras acciones antes de dejar pasar una petici贸n a internet

Muchachos, al ingresar la siguiente linea de codigo event.waitUntil(updateCache(request)); me salen los siguientes errores

Saben a que se debe??

Service Workers

Es una herramienta que intercepta peticiones que le hagamos y dar谩 respuestas en caso que el servidor no las de, asiendo que nuestra app funcione offline, pero no es soportada por todos los navegadores entonces comprobemos si lo est谩

if (ServiceWorker in navigator){ // si esta opcion esta habilitada 
    navigator.serviceWorker.register("./sw.js") // colocamos nuestro archivo
// de service worker, se lo tenemos que indicar, como este archivo estar谩 lleno 
// de listeners el momento que se active uno devlovera una promesa
.then(function ...)
.catch(error => console.error(error) )

El sw.js puede ser cualquier archivo, este estar谩 lleno de addEventListeners listos para actuar al escuchar una petici贸n

<h4>Ahora configuremos el serviceworker</h4>

Que es un precach茅, son cosas que le diremos 鈥渉ey manten esto en cache porque lo vamos a usar si se va el internet!!鈥

selft.addEventListener("install", callback(event)) // selft es como el this de los SW
// oye, me avisas si se instala serviceWorker para ejecutar el callback
// a este se le va a pasar el evento de ya se instalo TRUE
callback(event) {
	event.waitUntil(precache() ) // oye evento de install, esperate un momento
// a que llene el precache

驴Como abrimos un cach茅?

Con caches.open()

y le decimos que meter en el con .addAll

const cache = await caches.open("nombre del cache") // es algo asincrono entonces
// ir谩 con un await
return cache.addAll([ // a帽ademe este archivo y este y este ....
'/',
'/index.html',
'/assets/index.js',
'/assets/MediaPlayer.js',
'/assets/plugins/AutoPlay.js',
'/assets/plugins/AutoPause.js',
'/assets/index.css',
'/assets/BigBuckBunny.mp4',
]) // return porque arriba tenemos una promesa esperando respuesta

Bueno ahora que tenemos el SW funcioando y con todos nuestros archivos en cach茅 empecemos a escuchar!! 馃帶

selft.addEventListener("fetch", callback(event )) // oye avisame si hace un fech 
//y me lo pasa al event
callback(){
	const pedido = event.response // lo que pide nuestro fetch
// ahora solamente queremos intercepar el metodo GET si no es GET no hagas eso
if (pedido.method != "GET"){
	return; // no hagas nada
		
	}
// ahora buscaremos en cache a ver si lo tenemos
event.respondeWith(cacheResponse(pedido) ) // respondeme el evento con esta funcion
// y pasale la respuesta

}
async cacheResponse(pedido) {
	const cache = await caches.open("nombre del cache") // traemos el cache a la funcion
	const respuesta = caches.match(pedido)  // buscame el pedido en el cache
	return pedido || fetch(pedido) //||ponemos "fetch(pedido)" porque si este es 
// undefine osea no di贸 match con nadie  entonces se pedir谩 al servidor como 
// tenia en el principio
}
<h4>Listo!! 鈥 pero 驴que pasa si hacemos un cambio en la web, el usuario se quedar谩 con esta copia vieja? 馃</h4>

Bueno creemos una funci贸n que actualiza el cach茅

event.waitUntil(actualizarCache(pedido) ) // evento esperate que se ejecute esto

async actualizarCache(pedido) {
	const cache = await caches.open("nombre del cache") // traemos el cache a la funcion
	const respuesta = await fetch(pedido) // esperame tantito que ver a hacer una
// peticion con el pedido
cache.put(pedido, respuesta) // ya! tengo la 煤ltima versi贸n metela en el cache
	

Esta funci贸n revisar谩 y traer谩 siempre la 煤ltima versi贸n

Realmente una clase para aprender:
.
sw.js

const VERSION = 'v1';

self.addEventListener('install', (event) => {
  //Navegador instala el serviceWorker
  event.waitUntil(precache()); // promesa que espera a que ocurra la funci贸n de intercepci贸n cach茅 y resuelva o rechace
  // se crea un precache que recibe un conjunto de assets
});

self.addEventListener('fetch', (event) => {
  const request = event.request;

  if (request.method !== 'GET') {
    return;
  }

  event.respondWith(cachedResponse(request)); // Esto va a buscar en cach茅
  event.waitUntil(updateCache(request)); // Esto va a buscar priemro en cache y luego ir a netwaork y actualizar cach茅
});

async function precache() {
  const cache = await caches.open(VERSION); // nos da una nstancia de un cach茅 y regresa una promesa, por eso es as铆ncrona
  return cache.addAll([
    //conjunto de assets o archivos o recursos que recibe.
    './',
    './index.html',
    './assets/index.js',
    './assets/MediaPlayer.js',
    './assets/plugins/AutoPlay.js',
    './assets/plugins/AutoPause.js',
    './assets/index.css',
    './assets/video-2.mp4',
  ]);
}

async function cachedResponse(request) {
  const cache = await caches.open(VERSION);
  const response = await cache.match(request);
  return response || fetch(request);
}

async function updateCache(request) {
  const cache = await caches.open(VERSION);
  const response = await fetch(request);
  return cache.put(request, response);
}

Entonces se puede decir que tenemos una PWA 馃

Construye una PWA en 10 minutos

Esta es la lista de Cache

cache.addAll([
	'/',
	'/index.html',
	'/assets/index.js',
	'/assets/MediaPlayer.js',
	'/assets/plugins/AutoPlay.js',
	'/assets/pluegins/AutoPause.js',
	'/assets/index.css',
	'/assets/BigBuckBunny.mp4'
])

Recomiendo este articulo sobre Service Workers:
https://developer.mozilla.org/es/docs/Web/API/Service_Worker_API

que bien, super gracias

De lo mejor, hab铆a visto muy poco de esto, pero la verdad que este feature es de gran utilidad! siempre que le demos el uso adecuado!

No consigo cachear la app. Cuando visito el Cache Storage no me aparece la versi贸n 1 de cach茅

si les sale algun error en el cacheStorage o no les sale nada, verifiquen que el nombre del video sea el mismo que tienen en el sw.js o que esten en las carpetas como dice ahi

Services Worked, cada vez mas presente para darle la mejor expericia a los usuarios finales

Services Worked, cada vez mas presente para darle la mejor expericia a los usuarios finales

Amiguitos, tengan cuidado como escriben los eventos. sin querer escribi 鈥渇etched鈥 en vez de 鈥渇etch鈥 y me dej贸 media hora resolviendo el problema鈥

Compa帽eros, si les sale el status como 鈥渞edundat鈥 tienen que poner bien las rutas de los archivos, en mi caso empec茅 las rutas con un .
Despu茅s de corregir todas mis rutas por diferencias de nombres o en la carpeta donde se encontraban se soluciona. No olviden guardar el archivo y el index para que se apliquen los cambios

NOTA: 鈥楪ET鈥 TIENE QUE SER AJURO EN MAYUSCULA. 2 horas despu茅s me di cuenta.

Me da este error cuando se ejecuta la funci贸n updateCache

Uncaught (in promise) TypeError: Request scheme 鈥榗hrome-extension鈥 is unsupported
at updateCache (sw.js:43)

Que pasar铆a con la autenticaci贸n? Por ejemplo una vez la sesion abierta en google drive me deja ver documentos sin conexi贸n.

Buena Explicacion !!

Chicos mientras veia esta clase me tope con un monton de errores y casi que no puedo usar el service worker, pero siendo consciente y terminado la clase con todos los metodos pude terminarlo y hacerlo funcionar.

Posibles errores con los que te puedes topar:
No pasar los parametros en las functions que requieren parametros, tanto al llamarlas como al escribirlas,
no tener bien escritos los archivos al pasar la lista con los nombres de los archivos
tener el archivo sw.js en el lugar donde no es, la mejor forma de saber donde debe ir es, si tienes todo en una carpeta y dentro de la carpeta tienes otras como assets o ejercicios el archivo sw.js debe ir en la carpeta que contiene a las dos no fuera ni dentro de las dos carpetas

otro tip que les pueda dar es que si encuentran un error y dejan de ver la clase, por ver que al profesor si le funciona mientras el revisa paso a paso no se detengan y ven la clase hasta el final y ahi pueden que les sea mas facil encontrar los errores, y tambien lean los comentarios es la mejor ayuda

`<code>const VERSION = 'v1';

self.addEventListener('install', event => {
    event.waitUntil(precache());
});

self.addEventListener('fetch', event => {
    const request = event.request;

    if (request.method === "GET") {
        return;
    }

    event.respondWith(cachedResponse(request));

    event.waitUntil(updateCache(request));
})
async function precache() {
    const cache = await caches.open(VERSION);
    return cache.addAll([
        '/',
        '/index.html',
        '/assets/index.js',
        '/assets/MediaPlayer.js',
        '/assets/plugins/AutoPlay.js',
        '/assets/plugins/AutoPause.js',
        '/assets/index.css',
        '/assets/BigBuckBunny.mp4',
    ]);
}

async function cachedResponse (request) {
   const cache = await caches.open(VERSION);
   const response = await cache.match(request);
   return response || fetch(request);
}


async function updateCache (request) {
    const cache = await caches.open(VERSION);
    const response = await fetch(request);
    return cache.put(request, response);
 }

ese es el sw.js
y ahora lo que le agregamos al index.js

<code>if ('serviceWorker' in navigator) {
    navigator.serviceWorker.register('/sw.js').catch(error => {
        console.log(error.message);
    });
}

no se porque no me esta cargando el cache en el navegador, lo dejo offline ya no corre el programa

No me funciono, ni siquiera con la copia de archivos 馃槙

Pero como se hace el OPERADOR
"no es igual "
que utiliza a el 7:20

Excelente herramienta.

Incre铆ble!

genial!!! no ca铆a en cuenta la informaci贸n que se guardaba en cach茅 del navegador para funcionar offline

si les genera error y no les guarda la cache tenga en cuenta el nombre del video en sw.js

Super interesante el tema de service workers y la cache.

Esto sirve tambi茅n para aumentar la performance del site / app?

Mirando la documentacion del Service Worker API encontr茅 estas definiciones de estos m茅todos que me resultaron interesantes:

  • fetchEvent.respondWith()
    Evita el manejo de b煤squeda predeterminado del navegador y proporciona (una promesa) una respuesta usted mismo.
  • extendableEvent.waitUntil()
    Extiende el tiempo de vida del evento. Se usa para notificar al navegador las tareas que van m谩s all谩 de la devoluci贸n de una respuesta, como la transmisi贸n y el almacenamiento en cach茅.

Tambi茅n hay un ejemplo que muestra lo que hicimos en esta clase pero escrito de otra forma, para el que le interese.

creo que aprend铆 mas con esta clase de 13 minutos que leyendo tanto en internet.

Si tienen una p谩gina propia pueden practicar esta lecci贸n al tratar de sacar su PWA aunque sea de forma b谩sica. Podr谩n hacer que su web se instale en su m贸vil y entender谩n mejor la importancia y el dinamismo del SW. PD: Si alguien sabe el tema de VS que utiliza Richard 驴por favor me lo podr铆a decir? Gracias 馃ズ

buen ejemplo que ayuda entender todo lo que se puede hacer con javascript.

Ese conejo es muy perturbador鈥

Si alguien m谩s est谩 teniendo problemas con el m茅todo addAll al querer guardar los archivos en cach茅, es porque las rutas definidas no son las correctas. Si usan vscode puede que la extensi贸n Path Intellisense. Luego de instalarla vuelvan a escribir las rutas.

Soluci贸n a varios problemas en caso de que les suceda:

  1. El status del service worker se quedaba en 鈥榯rying to install鈥. Lo resolvi colocando el archivo sw.js en el nivel mas alto del proyecto, ya que yo ordeno mis carpetas con una principal llamada src debajo de la carpeta ra铆z, as铆 que tuve que sacarlo de all铆.

  2. El otro problema fue el que varios mencionan, que es un error en relaci贸n a la promesa, y eso se arregla modificando bien la ruta de los archivos.

Comparto el codigo de la clase comentado:

const VERSION = "v1";
// self es como el this de los SW
// oye, me avisas si se instala serviceWorker para ejecutar el callback
self.addEventListener('install', event => {
    // oye evento de install, esperate un momento a que llene el precache
    event.waitUntil(precache())
})

// cuando haya una peticion ir al cache a buscar las respuestas
self.addEventListener('fetch', event=>{
    // obtenemos la peticion
    const request = event.request;
    // solo nos interesa las peticiones GET
    if( request.method !== "GET"){
        // la peticion continua su camino
        return;
    } 
    // ahora buscaremos en cache a ver si lo tenemos
    // respondeme el evento con esta funcion
    event.respondWith(cachedReponse(request));

    //actualizat el cache
    event.waitUntil(updateCache(request) ) // evento esperate que se ejecute esto

});

async function precache() {
    // obtenes la instancia de un cache
    const cache = await caches.open(VERSION) // es algo asincrono entonces ir谩 con un await
    return cache.addAll([ // a帽ademe este archivo y este y este ....
    '/', // es igual a '/index.html' pero es necesario, el sw si diferencia sintaxis
    '/index.html',
    '/assets/index.js',
    '/assets/MediaPlayer.js',
    '/assets/plugins/AutoPlay.js',
    '/assets/plugins/AutoPause.js',
    '/assets/index.css',
    '/assets/BigBuckBunny.mp4',
    ]) // return porque arriba tenemos una promesa esperando respuesta
}

async function cachedReponse(request) {
    // traemos el cache a la funcion
    const cache = await caches.open(VERSION);
    // buscame el pedido en el cache
    const response = await cache.match(request);
    // ponemos "fetch(pedido)" porque si este es 
    // undefine osea no di贸 match con nadie entonces se pedir谩 al servidor como 
    // tenia en el principio
    return response || fetch(request);
}

async function updateCache(request) {
    const cache = await caches.open(VERSION);
    const response = await fetch(request);
    return cache.put(request, response);
}

Si a alguno no le funcionan los Services Workers y est谩n usando Live Server, aseg煤rense que abrieron VSCode en la carpeta donde esta el archivo sw.js e index.html. Yo ten铆a el proyecto abierto una carpeta m谩s arriba y no me funcionaba por las rutas.

cache.addAll([
        '/',
        '/index.html',
        '/assets/index.js',
        '/assets/MediaPlayer.js',
        '/assets/Plugins/AutoPlay',
        '/assets/Plugins/AutoPause',
        '/assets/index.css',
        '/assets/BigBuckBunny.mp4'
    ])

Unpopular opinion:
Los service workers deberian de tener su curso completo, por lo extenso, variados y necesarios que son.

caches

Es una instancia de Cache Storage creada cuando se registra el Service Worker.
Eso no lo explican 馃槮

Como complemento pueden consultar esta lista en yt, voy hasta el video 3 y me ha parecido interesante como se explica:
https://www.youtube.com/playlist?list=PLCKuOXG0bPi15ADMKVEYvMmBP7rFpW7Yq

No Confundir: Service Worker API con Web Workers API

驴Qu茅 es un Service Worker?
Un service worker es una secuencia de comandos que tu navegador ejecuta en segundo plano, separado de una p谩gina web, abri茅ndoles la puerta a funciones que no necesitan una p谩gina web ni interacci贸n de usuario. En la actualidad, ya incorporan funciones como notificaciones push y sincronizaci贸n en segundo plano.

Service Worker API
Los Service workers act煤an esencialmente como proxy servers asentados entre las aplicaciones web, el navegador y la red (cuando est谩 accesible).

Web Workers API
Los Web Workers hacen posible ejecutar la operaci贸n de un script en un hilo en segundo plano separado de la ejecuci贸n el hilo principal de la aplicaci贸n web. La ventaja de esto es que un proceso laborioso puede actuar en un hilo separado, permitiendo al hilo principal (normlamente la UI) ejecutarse sin ser bloqueado o ralentizado.

Si estas teniendo problemas para abrir un Cache Storage, intenta con el siguiente c贸digo:

const filesToCache = [
"/",
"/index.html",
"/assets/index.js",
"/assets/index.css",
"/assets/MediaPlayer.js",
"/assets/Video1.mp4",
"/assets/pluGins/Plugins.js",
"/assets/pluGins/AutoPause.js",
];

const staticCacheName = 鈥榩ages-cache-v1鈥;

self.addEventListener(鈥榠nstall鈥, event => {
console.log(鈥楢ttempting to install service worker and cache static assets鈥);
event.waitUntil(
caches.open(staticCacheName)
.then(cache => {
return cache.addAll(filesToCache);
})
);
});

Buena clase!

Trabajo con caches

Wooo que genial esto! 馃憦

Super genial poder continuar en modo offline y ofrecerle al usuario una mejor experiencia

D贸nde est谩 el men煤 en Firefox de los Service Workers? No lo puedo encontrar 馃槮

Pense que esto lo hacia el navegador automaticamente, 驴es como para tener mas control?

Dios mio mis sesos

Parecido a como lo hacen los proxys van a interceptar peticiones para guardar el resultado en cache y la pr贸xima vez que se haga la petici贸n tomar del cache ese resultado.

Boom 馃く

Buen curso!

Sirven para hacer que nuestras aplicaciones funcionen Offline.

Muy usados en las Progressive Web Apps (PWA) los ServiceWorkers son una capa que vive entre el navegador y el Internet.

Increible 馃槃

alguien sabe como ver la ventana de aplicacion en firefox?

esto es muy util!!!

Esto pone fin al pleito con la memoria cache 馃槂 y a la carga de versiones viejas de los archivos

Esto esta genial

increible 鈥

Lo he utilizado con workbox, esta genial esta clase.

驴El hecho de guardar mucho cache de la pagina en algun punto no afectaria al usuario en cuanto a memoria o rendimiento de su computador?

Esto de cache es muy 煤til, pero no debemos abusar de ella!

Para aquellos que deseen eliminar una versi贸n de cache anterior, una vez se haya actualizado, les dejo este link.

Tremenda clase!!!

Tengo el siguiente error usando Chromiun y Ubuntu:

service worker only works in secure mode either in https or localhost. It doesnot work in local resources like file:// or http.

and second issue was d

Me sale este error en la consola.

sw.js? [sm]:37 Uncaught ReferenceError: regeneratorRuntime is not defined
at _cachedResponse (sw.js? [sm]:37)
at cachedResponse (sw.js? [sm]:37)
at sw.js? [sm]:15

Este es el codigo de sw.js

const VERSION = "v1";

self.addEventListener('install', event => {
    event.waitUntil(precache());
});

self.addEventListener('fetch', event => {
    const request = event.request;
    // get
    if (request.method !== 'GET') {
      return;
    }
  
    // buscar en cache
    event.respondWith(cachedResponse(request));

    //Update the cache

    event.waitUntil(updateCache(request));

})

async function precache() {
    const cache = await caches.open(VERSION);
    return cache.addAll([
        '/',
        '/index.html',
        '/assets/index.js',
        '/assets/MediaPlayer.js',
        '/assets/pluggins/AutoPlay.js',
        '/assets/pluggins/AutoPause.js',
        '/assets/index.css',
        '/assets/BigBuckBunny.mp4', 
    ]);
}

async function cachedResponse( request ) {
    const cache = await caches.open(VERSION);
    const response = await cache.match(request);
    return response || fetch(request) ;
}

async function updateCache( request ) {
    const cache = await caches.open(VERSION);
    const responce = await fetch ( request );
    return cache.put(request, responce);
}

Agredeceria mucho que me ayudaran con eso.

bastante util

Esta es la soluci贸n a muchos problemas que tengo en mis apps actuales, me encant贸 esta clase sin duda.