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
Nicolas Molina
Aportes 5
Preguntas 0
Buena forma de actualizar el service worker.
Actualizar service worker 2022 (Angular 14.x)
Agregar esto en ngOnInit ANTES de mandar a producción
this.swUpdate.versionUpdates
.pipe(
filter((evt: any): evt is VersionReadyEvent => evt.type === 'VERSION_READY'),
tap((evt: VersionReadyEvent) => {
console.info(`currentVersion=[${evt.currentVersion?.hash} | latestVersion=[${evt.latestVersion?.hash}]`)
})
)
.subscribe(evt => {
const snack = this.snackBar.open('Update Available', 'Reload.', { duration: 0 })
snack.onAction()
.subscribe(() => {
window.location.reload()
})
})
Si hiciste mal la tarea como yo y ahora todos tus usuarios de producción ven la versión antigua, intentá cambiar los routings del login y el index.html… al menos por unos meses. Esto me funcionó!
¿Y como sabe el service worker que se ha hecho un deploy en el servidor?
Para actualizar el service worker, se necesita del componente SwUpdate el cual puedes escuchar si tiene nueva versiones con pieza de codigo:
this.swUpdate.available.subscribe(value=>{
console.log('update:', value);
window.location.reload();
});```
¿Quieres ver más aportes, preguntas y respuestas de la comunidad?