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
- Ein Browser, der Service Worker unterstützt
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 aufwindow
. - 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 aufwindow
. - 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 einenclick
-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.