Progressive Web-Apps: Aufforderung zur Installation und Messung der Installation

1. Willkommen

In diesem Lab fügen Sie einer vorhandenen installierbaren PWA eine benutzerdefinierte Schaltfläche für die In-App-Installation hinzu. Dies ist das fünfte in einer Reihe von Codelabs für den Workshop zu progressiven Web-Apps. Das vorherige Codelab hieß From Tab to Taskbar (Vom Tab zur Taskleiste). Diese Reihe umfasst drei weitere Codelabs.

Lerninhalte

  • Benutzerdefinierte Schaltfläche zum Installieren von PWAs in Apps erstellen

Wichtige Informationen

  • JavaScript

Voraussetzungen

2. Einrichtung

Klonen oder laden Sie zuerst den Starter-Code herunter, der für dieses Codelab benötigt wird:

Wenn Sie das Repository klonen, achten Sie darauf, dass Sie sich im pwa04--prompt-measure-install-Branch befinden. Die ZIP-Datei enthält auch den Code für diesen Zweig.

Für diese Codebasis ist Node.js 14 oder höher erforderlich. Sobald Sie den Code haben, führen Sie npm ci über die Befehlszeile im Ordner des Codes aus, um alle erforderlichen Abhängigkeiten zu installieren. Führen Sie dann npm start aus, um den Entwicklungsserver für das Codelab zu starten.

Die README.md-Datei des Quellcodes enthält eine Erklärung für alle verteilten Dateien. Außerdem sind die folgenden Dateien wichtig, mit denen Sie in diesem Codelab arbeiten werden:

Schlüsseldateien

  • js/main.js – JavaScript-Datei der Hauptanwendung

3. Schaltfläche „Installieren“ einrichten

Bevor Sie die Installationsaufforderungen hinzufügen und die Installationsereignisse erfassen können, müssen Sie einige Einrichtungsschritte ausführen. Erstellen Sie zuerst eine Datei js/lib/install.js und fügen Sie den folgenden Code hinzu:

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

Fügen Sie dann in js/main.js unten im DOMContentLoaded-Ereignis den folgenden Code hinzu:

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

Erklärung

Mit diesem Code wird eine Installationsklasse eingerichtet, die im nächsten Schritt verwendet wird, und an die laufende Anwendung angehängt.

4. Listener für Installationsaufforderungen hinzufügen

Damit die Installation Ihrer PWA tatsächlich ausgelöst wird, wenn der Nutzer auf die Schaltfläche „Installieren“ klickt, müssen Sie den Installationsaufforderung abfangen. Nach der Installation müssen Sie die erfasste Installationsaufforderung zurücksetzen. Schreiben Sie dazu Code, der Folgendes in constructor in der Klasse Install in js/lib/install.js ausführt:

Installationsaufforderung erfassen

  • Warten Sie auf das beforeinstallprompt-Ereignis auf window.
  • Auslösen des Ereignisses verhindern
  • Prompt erfassen
  • Auslöser für die Schaltfläche „Installieren“ anzeigen

Aufforderung bei der Installation zurücksetzen

  • Warten Sie auf das appinstalled-Ereignis auf window.
  • Erfassten Prompt zurücksetzen
  • Installationsschaltfläche ausblenden

5. Installation über In-App-Schaltfläche auslösen

Sobald der Prompt erfasst wurde, muss er über die Schaltfläche „Installieren“ der PWA ausgelöst werden können. Fügen Sie dazu der Klasse Install in js/lib/install.js Folgendes hinzu:

  • Eine async-Methode zum Auslösen der Installation, die
    • Verwendet den erfassten Prompt, um zur Installation aufzufordern
    • await die Auswahl des Nutzers für den Prompt
    • Prompt zurücksetzen
    • Installationsschaltfläche ausblenden, wenn der Nutzer die Installationsaufforderung akzeptiert hat
  • Fügen Sie der Installationsschaltfläche in der constructor der Klasse einen click-Event-Listener hinzu, der den Installationsauslöser aufruft.

6. Glückwunsch!

Sie haben gerade gelernt, wie Sie die PWA-Installation über eine eigene In-App-Installationsschaltfläche auslösen.

Das nächste Codelab in der Reihe ist PWA optimieren.