App web progressive: richiesta e misurazione dell'installazione

1. Ti diamo il benvenuto

In questo lab, prenderai una PWA installabile esistente e aggiungerai un pulsante di installazione in-app personalizzato. Questo è il quinto di una serie di codelab complementari per il workshop sulle app web progressive. Il codelab precedente era From Tab to Taskbar. Questa serie include altri tre codelab.

Obiettivi didattici

  • Creare un pulsante di installazione PWA in-app personalizzato

Che cosa devi sapere

  • JavaScript

Che cosa ti serve

2. Configurazione

Inizia clonando o scaricando il codice iniziale necessario per completare questo codelab:

Se cloni il repository, assicurati di trovarti nel ramo pwa04--prompt-measure-install. Il file zip contiene anche il codice per questo ramo.

Questo codebase richiede Node.js 14 o versioni successive. Una volta disponibile il codice, esegui npm ci dalla riga di comando nella cartella del codice per installare tutte le dipendenze necessarie. Poi, esegui npm start per avviare il server di sviluppo per il codelab.

Il file README.md del codice sorgente fornisce una spiegazione per tutti i file distribuiti. Inoltre, i seguenti sono i file esistenti chiave con cui lavorerai durante questo codelab:

File delle chiavi

  • js/main.js - File JavaScript dell'applicazione principale

3. Configurare il pulsante Installa

Prima di aggiungere i prompt di installazione e acquisire gli eventi di installazione, è necessario eseguire alcune configurazioni. Innanzitutto, crea un file js/lib/install.js e aggiungi il seguente codice:

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';
    }
  }
}

Poi, in js/main.js in fondo all'evento DOMContentLoaded, aggiungi il seguente codice:

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

Spiegazione

Questo codice configura una classe di installazione che verrà utilizzata nel passaggio successivo e la collega all'applicazione in esecuzione.

4. Aggiungere listener di prompt di installazione

Per utilizzare il trigger del pulsante di installazione per attivare l'installazione della tua PWA, devi acquisire la richiesta di installazione. Una volta installato, devi reimpostare il prompt di installazione acquisito. Per farlo, scrivi il codice per eseguire le seguenti operazioni in constructor nella classe Install in js/lib/install.js:

Acquisizione della richiesta di installazione

  • Ascolta l'evento beforeinstallprompt su window.
  • Impedire l'attivazione dell'evento
  • Acquisire il prompt
  • Mostra l'attivazione del pulsante Installa

Reimpostare la richiesta all'installazione

  • Ascolta l'evento appinstalled su window.
  • Reimposta il prompt acquisito
  • Nascondere il trigger del pulsante Installa

5. Attivare l'installazione dal pulsante in-app

Una volta acquisito il prompt, il pulsante di installazione della PWA deve essere in grado di attivarlo. Per farlo, aggiungi quanto segue alla classe Install in js/lib/install.js:

  • Un metodo async per attivare l'installazione che
    • Utilizza il prompt acquisito per richiedere l'installazione
    • await la scelta del prompt da parte dell'utente
    • Reimpostare il prompt
    • Nascondi il pulsante Installa se l'utente ha accettato la richiesta di installazione
  • Aggiungi un listener di eventi click al pulsante di installazione nel constructor della classe che chiama il trigger di installazione.

6. Complimenti!

Hai appena scoperto come attivare l'installazione di una PWA dal tuo pulsante di installazione in-app.

Il prossimo codelab della serie è Empowering Your PWA