Las dos formas de utilizar installMode:
- prefetch (Toma todos los archivos definidos (css / js) y los guarda en cache automáticamente)
- lazy (Cuando el usuario lo solicita se guarda en cache)
Apropiar el concepto de PWA
Cómo crearás una PWA con Angular
¿Qué son las PWA?
Características de una PWA
PWA vs Híbrido vs Nativo
Los Services Workers
Proyecto del curso: Platzi Store
Entender PWA en Angular
Generando la primer PWA
Caché local y pruebas offline
Pruebas con Lighthouse
Caché de assets
Caché de requests
Construir una PWA luciendo como nativa
Poniendo tu app en el Homescreen
Crear botón de instalación automática
Probar funcionalidad del botón de instalación
Enviando actualizaciones
Implementando flujo de notificaciones
Gestionando notificaciones
Implementación y recomendaciones para IOS
Integrar continuamente
Aplicando Lighthouse Bot a tu proceso de integración continua
Conclusiones
No tienes acceso a esta clase
¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera
Aportes 8
Preguntas 2
Las dos formas de utilizar installMode:
Lo que no se cachea por defecto son las peticiones hacia una URL, hacia una API.
Ja ja, yo soy lazy, cuando me detectan , me alisto.
Que pasa con los módulos que se cargan con lazy loading en angular, estos archivos igual son cacheados la primera vez que se ingresa a la aplicación?
Como funciona la cache en los assets,
configuración por defecto:
{
"index": "/index.html",
"assetGroups": [ // indica como hacer la cache de los archivos estáticos
{
"name": "app", // nombre del grupo de cache
"installMode": "prefetch",
"resources": {
"files": [ // archivos en cache
"/favicon.ico",
"/index.html",
"/*.css",
"/*.js"
]
}
}, {
"name": "assets",
"installMode": "lazy",
"updateMode": "prefetch",
"resources": {
"files": [
"/assets/**",
"/font/*"
]
}
}],
"dataGroups": [
{
"name": "api-product",
"urls": ["/api/products"],
"cacheConfig" : {
"maxSize": 100,
"maxAge": "5d"
}
}],
"navigationUrls": [
"/**"
]
}
prefetch: Precargas los archivos de una vez, desventaja consume ancho de banda desde el principio, esto es recomendado para archivos js css
lazy: a modo que detecta que lo solicita el usuario, va guardandolo en cache, esto es recomendado para imágenes.
Cada vez que compilamos la compilacion de webpack generar un id unico en los archivos, asi detecta que debe descargarlos.
Algunos assets no tienen hash, como imagenes, se debe utilizar la técnica lazy, que permite que se haha cache cuando detecte que lo solicita el usuario.
osea cachea todo lo que accedemos.
archivo: ngsw-config.json
assetGroups: Indica como hacer cache de los archivos estaticos
El codigo y contenido requerido necesarios para la aplicación sea cacheados y actualizado cuando hay una nueva version disponible, asegurarse que las actualizaciones son aplicadas consistentemente cuando esta disponible, usando la configuracion de la sección assetsGroups, del archivo de configuracion.
Para la instalacion(installMode) y actualizacion(updateMode) de la cache puedes elegir estas dos opciones
prefetch: Precargas los archivos de una vez, desventaja consume ancho de banda desde el principio, esto es recomendado para archivos del primer grupo que conforma la aplicacion, ( js css), ya que cada vez que compilamos la compilacion de webpack generar un id unico en los archivos, asi detecta que debe descargarlos.
lazy: a modo que detecta que lo solicita el usuario, va guardandolos en cache, esto es recomendado para los assets que no tienen hash, como imagenes, se debe utilizar la técnica lazy, que permite que se haga cache cuando detecte que lo solicita el usuario.
¿Quieres ver más aportes, preguntas y respuestas de la comunidad?