Apps web progresivas: Mensajes y medición de la instalación

1. Te damos la bienvenida

En este lab, tomarás una AWP existente que se puede instalar y le agregarás un botón de instalación personalizado en la app. Este es el quinto de una serie de codelabs complementarios para el taller de apps web progresivas. El codelab anterior se tituló De la pestaña a la barra de tareas. Hay tres codelabs más en esta serie.

Qué aprenderás

  • Crea un botón de instalación de AWP integrado en la aplicación personalizado

Lo que debe saber

  • JavaScript

Lo que necesitarás

2. Prepárate

Para comenzar, clona o descarga el código de partida necesario para completar este codelab:

Si clonas el repositorio, asegúrate de estar en la rama pwa04--prompt-measure-install. El archivo ZIP también contiene el código de esa rama.

Este código base requiere Node.js 14 o una versión posterior. Una vez que tengas el código disponible, ejecuta npm ci desde la línea de comandos en la carpeta del código para instalar todas las dependencias que necesitarás. Luego, ejecuta npm start para iniciar el servidor de desarrollo del codelab.

El archivo README.md del código fuente proporciona una explicación de todos los archivos distribuidos. Además, los siguientes son los archivos existentes clave con los que trabajarás a lo largo de este codelab:

Archivos de claves

  • js/main.js: Archivo JavaScript principal de la aplicación

3. Configura el botón de instalación

Antes de agregar los mensajes de instalación y registrar los eventos de instalación, se debe realizar una configuración. Primero, crea un archivo js/lib/install.js y agrega el siguiente código:

export class Install {
  /**
   * @param {DOMElement} trigger - Triggering element
   */
  constructor(trigger) {
    this._prompt;
    this._trigger = trigger;
  }

  /**
   * Toggle visibility of install button
   * @param {string} action
   */
  toggleInstallButton(action = 'hide') {
    if (action === 'hide') {
      this._trigger.style.display = 'none';
    } else {
      this._trigger.style.display = 'block';
    }
  }
}

Luego, en js/main.js, en la parte inferior del evento DOMContentLoaded, agrega el siguiente código:

// Set up install prompt
const { Install } = await import('./lib/install.js');
new Install(document.querySelector('#install'));

Explicación

Este código configura una clase Install que se usará en el siguiente paso y la adjunta a la aplicación en ejecución.

4. Agrega objetos de escucha de mensajes de instalación

Para usar el activador del botón de instalación y, de hecho, activar la instalación de tu PWA, debes capturar el mensaje de instalación. Cuando se instale, deberás restablecer el mensaje de instalación capturado. Para ello, escribe código para hacer lo siguiente en constructor en la clase Install en js/lib/install.js:

Captura el mensaje de instalación

  • Detecta el evento beforeinstallprompt en window.
  • Evita que se active el evento
  • Cómo capturar la instrucción
  • Mostrar el activador del botón de instalación

Restablece la instrucción durante la instalación

  • Detecta el evento appinstalled en window.
  • Cómo restablecer la instrucción capturada
  • Oculta el activador del botón de instalación

5. Activa la instalación desde el botón integrado en la app

Una vez que se capture el mensaje, el botón de instalación de la PWA debe poder activarlo. Para ello, agrega lo siguiente a la clase Install en js/lib/install.js:

  • Un método async para activar la instalación que
    • Usa la instrucción capturada para solicitar la instalación
    • await la elección del usuario de la instrucción
    • Restablece la instrucción.
    • Oculta el botón de instalación si el usuario aceptó el mensaje de instalación.
  • Agrega un objeto de escucha de eventos click al botón de instalación en el constructor de la clase que llama al activador de instalación.

6. ¡Felicitaciones!

Acabas de aprender a activar la instalación de la PWA desde tu propio botón de instalación en la app.

El siguiente codelab de la serie es Potencia tu PWA.