Enviando actualizaciones

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

Helí Fernando Jerez Rincón

student•

en un proyecto en que trabaje, actualizar automáticamente no es buena idea... la razón es que el usuario puede estar haciendo algo y le cortas el flujo. Lo mejor es mostrar un prompt, la otra es en el momento de ejecutar un acción como guardar, reiniciar si hay update.

Ivan Ariel Lencina

student•

Interesante tener en cuenta!

Juan Carlos Barcinilla Alarcon

student•

Buena forma de actualizar el service worker.

Kevin Costa

student•

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ó!

Vladyslav Kuchmenko

student•

¿Y como sabe el service worker que se ha hecho un deploy en el servidor?

Ricardo Moisen

student•

lo explico en los primeros videos, se supone que cada build que tu hagas en angular crea los archivos de nuevos y con un id diferente es por eso que el service worker detecta los cambios con el simple id de lo que tiene en cache con los nuevos

Jose Luis Rosado Cardenas

student•

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();
    });```

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()
          })
      })

Enviando actualizaciones

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