webreactiva-devs / reto-pwa

Reto de aprendizaje para aprender a crear una PWA
https://www.webreactiva.com/audios/como-empezar-deslumbrar-pwa
2 stars 1 forks source link

2ª contienda - Sergi Edo #9

Open sergioedo opened 1 year ago

sergioedo commented 1 year ago

Service workers para trabajar offline al rescate!

Con el service worker, se cachean los recursos (html + recurso svg) y los assets que se piden mediante "fetch". He tirado por la solución rápida, de pedir todos los audios al cargar la app (no es muy eficiente pero aeguramos que funciones sin conexión de forma completa). A nivel de service worker, he usado al estrategia de SWR, que tira de cache de entrada y vuelve a pedir los recursos para tenerlos refrescados en la próxima carga de la app (esto se podría afinar para este caso concreto).

Para la extra-ball, he usado el proyecto idb-keyval, para usar indexedDB como un clave valor (más como funciona el localStorage), para poder guardar el último podcast seleccionado y el último instante de reproducción de cada audio.

sergioedo commented 1 year ago

He añadido una optimización en el prefetch, consultando la cache, para evitar cargar todos los audios al cargar la app (en online te fundo la tarifa 🔥 ), sólo aquellos que aún no se han cacheado.