Configuración del Service Worker y Caching Policy

Clase 10 de 31 • Curso de PWA con Angular 2018

Resumen

Contemplar performance y freshness

IA Interactive

student•

**prefetch **- Cuando las imágenes no van a cambiar muy seguido.
**freshness **- Siempre se van a traer las nuevas fotos, si el servicios esta tardando en responder se queda con las que tiene en cache.

Jesús Mur Fontanals

student•

lazy Hasta que el browser no necesite el recurso, no lo cargue.

Carlos Uriel de Jesus Sánchez González

student•

ngsw-config.json

"dataGroups": [
    {
      "name": "RedditAPI",
      "urls": [
        "https://reddit.com/r/pics.json",
        "https://reddit.com/r/**",
      ],
      "cacheConfig":{
        "strategy": "performance",
        "maxAge": "1d",
        "maxSize": 100,
        "timeout": "3s"
      }
    }
  ]

Luis Fernando Javier Morales Moreno

student•

el archivo ngsw-config no existe en mi proyecto. tengo que crearlo? y de ser así desde que otro archivo tengo que mandarlo a llamar?

Astrid Alcaraz

student•

En mi caso el archivo se encontraba fuera de la carpeta src (mas no se porque esta asi ni si es correcto)

Wilfredo Vladimir Guillen Vides

student•

A mi tampoco me aparece el archivo ngsw-confi, ni afuera del la carpeta src
quien me puede ayudar??

tengo la version, Angular CLI: 7.0.6

Fabiola Dayana Acarapi Alvarez

student•

https://www.youtube.com/watch?v=4XT23X0Fjfk este tutorial esta más actualizado que este curso

Jonnathan Ramiro Juma Jara

student•

gracias

Carlos Enrique Ramírez Flores

student•

PARA GUARDAR LOS DATOS EN CACHE Y LA PWA SE OPTIMICE AL MAXIMO

 "strategy": "performance"```
CUANDO ESTAMOS EN DESARROLLO USA. YA QUE ES PARA ESTAR OBTENIENDO LOS DATOS DEL SERVER AUNQUE YA ESTEN EN CACHE

“cacheConfig”: {
“strategy”: “freshness”
}```

Freddy Alejandro Leal Gonzalez

student•

Para angular 8, en mi caso en la raíz del proyecto ejecute el comando:

ng add @angular/pwa --project pwa

para crear dependencias que faltaban de los proyectos PWA, entre esos el archivo ngsw-config.json

Francisco Samuel Lesmes Fajardo

student•

Genial Curso

Juan Guillermo Perez Cardozo

student•

si buensisimo

Alex Eugenio Gavidia Donayre

student•

Buenazo

Edith Hernández Navarrete

student•

Muy bien!!!

Jonnathan Ramiro Juma Jara

student•

lazy = solo cuando solicitemos el recurso

Henry Alejandro Palacios Lemus

student•

no entiendo porque tengo este error

Diego Forero

Team Platzi•

Al parecer no esta instalado @angular/service-worker, verifica que lo tienes instalado o instala usando
npm install @angular/service-worker

Configuración del Service Worker y Caching Policy

Introducción

¡Vamos a renovar este curso!

Qué son las PWAs?

PWA vs SPA

Setup del Proyecto en Mac, Windows y Linux

Presentando el Editor de Código

Generando nuestro primer PWA

Service Worker

Correr nuestro app en modo de producción

Qué es el service worker de Angular?

Gestión de versiones del Service Worker

Configuración del Service Worker y Caching Policy

Propiciando el Click to Install banner

Estilo

Comprendiendo el concepto de responsividad

Introducción a Angular Material

Instalación de Angular Material

Configuración de Angular Material en el proyecto

Datos Dinámicos

Introducción a Acceso a Datos

Implementando Firebase

Creando un servicio de conexión a Firebase

Creando vista de lista y detalle

Guardando notas en Firebase

Obteniendo notas de Firebase

Editando notas

Implementando Caching

Push Notifications

Implementando Login

Configurando Push Notifications

Cómo instalar curl en Mac, Windows y/o Linux

Configurando Firebase Hosting y subiendo nuestro proyecto a producción

Implementando Push Notifications

Cloud Functions

NativeScript: Características Nativas en un Web App con Angular

¿Dónde Aprender Más?