Caché de requests

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

Jose Luis Rosado Cardenas

student•

CORRECCION definió bien maxSize al principio pero al explicarlo como que confunde, ya que efectivamente indica la cantidad de peticiones a almacenar, es decir, si ponemos 3, solo 3 request se van a cachear, segun la politica de angular, es decir si se queda offline, y ya habías navegado antes, solo 3 request son obtenidos de la cache del service worker, y los demás no habría respuesta

Rodrigo Rodriguez

student•

Vale la aclaracion, gracias!

Formacion1 Formacion1

student•

Configuración de cache: "dataGroups": [ { "name": "api", "urls": [ "https://platzi-store.herokuapp.com/**" ], "cacheConfig": { "maxSize": 3, "maxAge": "5m", "strategy": "performance", "timeout": "2s" } } ]

Luis Abdel Rangel Castro

student•

"dataGroups": [
    {
      "name": "api",
      "urls": ["https://platzi-store.herokuapp.com/**"],
      "cacheConfig": {
        "maxSize": 3,
        "maxAge": "5m",
        "strategy": "performance",
        "timeout": "3s"
      }
    }
  ]

Carlos Andres Carvajal

student•

Strategy: perfomance: saca del caché la información primero, si no hay consulta internet freshness: primero va a internet, si es una red lenta va a caché.

Arturo Munoz Cantor

student•

"maxAge": "5m", => d-days - h-hour - m-min - s -sec - u-msec

Diosnel Enrique Velázquez Escobar

student•

perfomance: saca del cache primero
freshness: pide al servidor primero

Michael Camargo

student•

tengo este error sin conexion

ngsw-worker.js:851 Uncaught (in promise) TypeError: Failed to fetch at DataGroup.safeFetch (ngsw-worker.js:851:27) at DataGroup.handleFetch (ngsw-worker.js:708:23) at async AppVersion.handleFetch (ngsw-worker.js:924:20) at async Driver.handleFetch (ngsw-worker.js:1432:19)

Juan Luna

student•

yo también

Ezequiel Saldaña

student•

A veces dice que performance toma de la red primero y a veces dice que primero toma de caché. Lo mismo pasa cuando habla de freshness. Se vuelve todo confuso.

Anthony Hurtado

student•

Me parece que el tema de strategy es:

perfomance: saca del cache primero la información
freshness: pide al servidor primero la información

Brayan Alexis Valdes Gallego

student•

También es admisible pasar como dataGroups las respuestas que da las apis de google en cuanto a letras o iconos? tipo https://fonts.googleapis.com/** ?

Luis Abdel Rangel Castro

student•

Que bonito es lo bonito!!!

DANIEL ARIAS VÁZQUEZ

student•

necesito ayuda por favor ya no pude instalar correctamente la documentación para firebase, gracias.

Gerardo Manuel Reyes Fernández

student•

El maxSize no lo veo como intentos, es el numero de request almacenadas, como lo entiendo es, puedes hacer 3 peticiones, cambiando algún parámetro y solo guarda esas 3 después va liberando espacio en memoria.

Juan Luna

student•

Buenas tardes Nicolás, tengo problemas para hacer funcionar la app, no se si es que la url de la API, no funciona o es un tema de permisos, de firebase, el caso es que mirando el archivo 'firebase-messaging-sw.js', veo que está configurado para la app de platzi y no para la mía, ¿cómo debo hacer esta configuración?, ¿quizás hayan archivos en vuestro github que no se deberían haber subido, para generarlos desde firebase init?

Bueno el caso es que lo estoy configurando, poniendo los datos sacados de firebase de mi proyecto alí, pero no encuentro dos cosas, la apiKey y el appId, y el storageBucket, me lo he inventado ¿Alguna sugerencia, gracias?

Un saludo y enhorabuena por tus cursos.

Jose Luis Rosado Cardenas

student•

¿Puedo usar alguna variable del archivo environment.ts en el archivo ngsw-config.json, para definir las urls??

Johan Rujano

student•

Tengo la misma duda lograste; hacerlo?

Jose Luis Rosado Cardenas

student•

no, sigo con la duda

Rafael

student•

¿como hago para guardar en el navegador un formulario y que se mande a guardar cuando tenga conexion a internet?

Michael Camargo

student•

tango este error

Mariela de Jesus Rivas Hernandez

student•

Tengo un error, al parecer no me reconoce el services worker pero no entiendo el porqué, si alguien sabe que es lo que podría estar mal.

esto es lo que tengo dentro del archivo enviroments.ts

Rafael

student•

si tengo un dominio con varios subdominios pero el final de la url es el mismo entonces lo puedo obtener desde el environment o tengo que agregar uno por uno en el datagroup

Xavier Medina Veintimilla

student•

¡Hola! :D

¿Cuál es el problema que tienes?, ¿en qué te puedo ayudar?

Nunca pares de aprender 💚

Andres Gallardo

student•

El cache es por sesion de navegador ? O como funciona ?

Nicolas Molina

teacher•

Hola!

Este cache queda guardado al navegador directamente y no queda asociando a la sesión del usuario en la pagina.

Aunque si manejas la sincronización dentro de Google Chrome con tu Gmail esto si se mantiene por cada usuario.

Fernando Garcia

student•

Tiempo de vida de cache: nombre: maxAge formato: d (días) , h (horas), m (minutos) ej: 1d (este cache durará un días)

Fernando Garcia

student•

assetsGroups : para archivos estaticos dataGroups : para requests a servidores

"dataGroups": [
    {
      "name": "api",
      "urls": ["https://platzi-store.herokuapp.com/**"],
      "cacheConfig": {
        "maxSize": 3,
        "maxAge": "5m",
        "strategy": "performance",
        "timeout": "3s"
      }
    }
  ]

Caché de requests

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