Caché de assets

Clase 10 de 20 • Curso de Progressive Web Apps con Angular 8

Clase anteriorSiguiente clase

Anthony Hurtado

student•

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)

Rodrigo Rodriguez

student•

Sigo sin poder hacer aparecer el icono de instalar la pwa en chrome desktop, tengo actualizado el navegador, probe con

ng add @angular/pwa --project mi-proyecto

pero aun asi no aparece

Fernando Garcia

student•

Lo que no se cachea por defecto son las peticiones hacia una URL, hacia una API.

Diego Maldonado

student•

Ja ja, yo soy lazy, cuando me detectan , me alisto.

Carlos Villarroel

student•

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?

Nicolas Molina

teacher•

Hola! si estos ya también son ingresados al cache básicamente el revisa todos los assets (html, imgs, js, y css ) tengamos y los pone en el cache

Jose Luis Rosado Cardenas

student•

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.

Carlos Javier Bazan Huaman

student•

osea cachea todo lo que accedemos.

Anthony Hurtado

student•

Así mismo

Marcelo Gorski

student•

Hola, Si accedo a una PWA y pierdo la conexión a internet, ¿las imágenes que están en una parte la app a la cual no accedí me las cachea si las pongo en modo lazy?

Nicolas Molina

teacher•

No, el cache a estos recursos funciona una vez se hace el primer request, es decir tienes que tener que tener conexión e ir a la imagen una vez el navegador lo descargue la guarda en cache para no volver a solicitarla.

Marcelo Gorski

student•

Gracias Nico, ¿esto se resolvería con installMode prefetch, o siempre hay que ir primero a la imagen con conexión?

Fernando Garcia

student•

archivo: ngsw-config.json

assetGroups: Indica como hacer cache de los archivos estaticos

Jose Luis Rosado Cardenas

student•

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.

{
  "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": [
      "/**"
    ]
}

Caché de assets

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