Crear botón de instalación automática

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

Victor Alfredo Matzar Say

student•

  installEvent:any=null;

  @HostListener('window: beforeinstallprompt', ['$event'])
  onBeforeInstallPrompt(event:Event){
    console.log(event);
    event.preventDefault();
    this.installEvent = event;
  }
  installByUser(){
    if(this.installEvent){
      this.installEvent.prompt();
      this.installEvent.userChoice
      .then((rta: any)=>{
        if (rta.outcome === 'accepted') {
          console.log('User accepted the A2HS prompt');
        } else {
          console.log('User dismissed the A2HS prompt');
        }
      });
    }
  }

Logre implementarlo casi igual, solo agregando tipado por las últimas versiones de ts. Saludos :)

Ricardo Exequiel De Angelis

student•

Y como lo hacemos compatible con Firefox u otro navegador?

Jose Daniel Barría Reyes

student•

al dia de hoy no esta disponible el evento en todos los navegadores, aqui tienes una lista de navegadores que lo soportan.

https://developer.mozilla.org/en-US/docs/Web/API/BeforeInstallPromptEvent Hay una seccion llamada browser compatibility

Rodrigo Rodriguez

student•

Simplemente con el mismo codigo no pude hacer que funcione, siempre installEvent tiene el valor null ?

Mario Andres Ospino Romero

student•

lo implementé tal cual y aun no funciona , creo que debo buscar nuevas formas de hacerlo.

Rodrigo Rodriguez

student•

Me pasa igual

Crear botón de instalación automática

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