Introducción a PWA
¿Qué es una PWA?
Progressive Web App vs. Native App
El proyecto
Google Lighthouse
Creando un Web Manifest
Implementar el Manifest
Service Workers
¿Qué es un Service Worker?
Introducción a Workbox
Implementando Workbox
Aplicando Estrategias de Carga
Google Analytics Offline
Experimentar con Workbox
Funcionalidades Avanzadas
Web Share API
Trabajando Offline
Notificaciones
Publicando la app
No tienes acceso a esta clase
¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera
Si ya tienes una cuenta,
Aplicando Estrategias de Carga
10/16Recursos
En esta clase vamos a analizar diferentes estrategias de carga, veremos sus ventajas y desventajas.
• Cache First.
Es una estrategia de carga que lo primero que hace es ir al cache y si encuentra el recurso lo sirve directamente. En caso de no encontrarlo va a ir a red, guardar la información en cache y servir esa versión.
Esta estrategia puede ser peligrosa y solo es recomendable cuando queremos máxima velocidad y estamos manejando un recurso que nunca cambia, como una imagen o alguna fuente.
• Stale While Revalidate
Esta es una estrategia de carga muy particular y que mejor funciona a la hora de mejorar el rendimiento. Lo que hace es ir a cache y a red al mismo tiempo, toma la versión más rápida que siempre será la de cache y en cuanto recibe la de red va a actualizar la versión de cache.
Es recomendable esta estrategia cuando queremos mucha velocidad y estamos manejando un recurso que puede estar levemente desactualizado.
Al momento de escribir nuestras estrategias en Workbox SI IMPORTA el orden en que pongamos las cosas, si queremos una estrategia o regla por defecto debemos poner esa regla hasta el final de todo.
Aportes 11
Preguntas 4
Ordenar por:
No olviden agregar el “new” antes de crear la estrategia de workbox, el profesor no lo usa en el vídeo, pero es importante para evitar errores con dicha versión.
workbox.routing.registerRoute(/^https?:\/\/www.themealdb.com\/api\/.*/,
new workbox.strategies.StaleWhileRevalidate(), 'GET')
Les dejo las Expresiones regulares que usó el profesor:
/^https?:\/\/www.themealdb.com\/api\/.*/
/^https:\/\/fonts.(?:googleapis|gstatic).com\/(.*)/
Probe la app en mi movil fisico y todo funciona bien.
para las versiones más actuales de work-box el archivo de service worker deberia quedar de la siguiente manera fijarse en la parte de workbox.expiration.ExpirationPlugin ya no sirve llamarlo como lo hace el profesor.
workbox.routing.registerRoute(
/^https:\/\/fonts.(?:googleapis|gstatic).com\/(.*)/,
new workbox.strategies.CacheFirst({
cacheName: 'google-fonts-cache',
plugins: [
new workbox.expiration.ExpirationPlugin({
maxAgeSeconds: 30 * 24 * 60 * 60,
}),
],
}),
'GET'
);```
Service Workers necesitan una conexión encriptada. Si ya tienes un server relativamente económico, puedes utilizar "Let's encrypt" para poder tener un HTTPS.
Estrategia: Stale While Revalidate
se puede crear un workbox con firebase para las consultas que se hacen en tiempo real, obviamente quitando el tiempo real.
Nose porque me esta dando este error service-worker.js:11 Uncaught TypeError: workbox.precaching.suppressWarnings is not a function
at service-worker.js:11
porque no puede ver worbox en la console ? come se activan las notificas en la console tool de workbox ?
¿Quieres ver más aportes, preguntas y respuestas de la comunidad?