Veröffentlicht: 14. Februar 2020
In vielen Browsern können Sie die Installation Ihrer progressiven Web-App (PWA) direkt über die Benutzeroberfläche aktivieren und bewerben. Mit der Installation (früher „Zum Startbildschirm hinzufügen“) können Nutzer Ihre PWA auf ihrem Mobilgerät oder Computer installieren. Wenn eine PWA installiert wird, wird sie dem Launcher eines Nutzers hinzugefügt und kann wie jede andere installierte App ausgeführt werden.
Zusätzlich zur vom Browser bereitgestellten Installationsfunktion können Sie einen eigenen benutzerdefinierten Installationsablauf direkt in Ihrer App bereitstellen.
Wenn Sie überlegen, ob Sie die Installation bewerben möchten, sollten Sie berücksichtigen, wie Nutzer Ihre PWA normalerweise verwenden. Wenn beispielsweise eine Gruppe von Nutzern Ihre PWA mehrmals pro Woche verwendet, profitieren diese Nutzer möglicherweise von der zusätzlichen Benutzerfreundlichkeit, die sich ergibt, wenn sie Ihre App über den Startbildschirm eines Smartphones oder über das Startmenü eines Desktopbetriebssystems starten können. Einige Produktivitäts- und Unterhaltungsanwendungen profitieren ebenfalls von dem zusätzlichen Bildschirmplatz, der durch das Entfernen der Browser-Symbolleisten aus dem Fenster im installierten standalone-, minimal-ui- oder window-control-overlay-Modus entsteht.
Vorbereitung
Bevor Sie beginnen, sollten Sie prüfen, ob Ihre PWA die Anforderungen an die Installierbarkeit erfüllt. Dazu gehört in der Regel ein Web-App-Manifest.
Installation bewerben
So zeigen Sie, dass Ihre progressive Web-App installiert werden kann, und stellen einen benutzerdefinierten In-App-Installationsvorgang bereit:
- Warten Sie auf das Ereignis
beforeinstallprompt. - Speichern Sie das
beforeinstallprompt-Ereignis, damit es den Installationsvorgang später auslösen kann. - Informieren Sie den Nutzer, dass Ihre PWA installiert werden kann, und stellen Sie eine Schaltfläche oder ein anderes Element bereit, um den In-App-Installationsvorgang zu starten.
Auf das beforeinstallprompt-Ereignis warten
Wenn Ihre progressive Web-App die erforderlichen Installationskriterien erfüllt, löst der Browser ein beforeinstallprompt-Ereignis aus. Speichern Sie einen Verweis auf das Ereignis und aktualisieren Sie die Benutzeroberfläche, um anzugeben, dass der Nutzer Ihre PWA installieren kann.
// Initialize deferredPrompt for use later to show browser install prompt.
let deferredPrompt;
window.addEventListener('beforeinstallprompt', (e) => {
// Prevent the mini-infobar from appearing on mobile
e.preventDefault();
// Stash the event so it can be triggered later.
deferredPrompt = e;
// Update UI notify the user they can install the PWA
showInstallPromotion();
// Optionally, send analytics event that PWA install promo was shown.
console.log(`'beforeinstallprompt' event was fired.`);
});
In-App-Installationsvorgang
Wenn Sie die In-App-Installation anbieten möchten, stellen Sie eine Schaltfläche oder ein anderes Interface-Element bereit, auf das ein Nutzer klicken oder tippen kann, um Ihre App zu installieren. Wenn auf das Element geklickt oder getippt wird, rufen Sie prompt() für das gespeicherte beforeinstallprompt-Ereignis auf (das in der Variablen deferredPrompt gespeichert ist). Dem Nutzer wird ein modaler Installationsdialog angezeigt, in dem er aufgefordert wird, die Installation Ihrer PWA zu bestätigen.
buttonInstall.addEventListener('click', async () => {
// Hide the app provided install promotion
hideInstallPromotion();
// Show the install prompt
deferredPrompt.prompt();
// Wait for the user to respond to the prompt
const { outcome } = await deferredPrompt.userChoice;
// Optionally, send analytics event with outcome of user choice
console.log(`User response to the install prompt: ${outcome}`);
// We've used the prompt and can't use it again, throw it away
deferredPrompt = null;
});
Die userChoice-Property ist ein Promise, das mit der Auswahl des Nutzers aufgelöst wird.
Sie können prompt() nur einmal für das verzögerte Ereignis aufrufen. Wenn der Nutzer die Benachrichtigung schließt, müssen Sie warten, bis das beforeinstallprompt-Ereignis noch einmal ausgelöst wird. Das geschieht in der Regel unmittelbar nach der Auflösung der userChoice-Eigenschaft.
Erkennen, wann die PWA erfolgreich installiert wurde
Mit dem Attribut userChoice können Sie ermitteln, ob der Nutzer Ihre App über Ihre Benutzeroberfläche installiert hat. Wenn der Nutzer Ihre PWA jedoch über die Adressleiste oder eine andere Browserkomponente installiert, hilft userChoice nicht.
Stattdessen sollten Sie auf das Ereignis appinstalled warten, das immer ausgelöst wird, wenn Ihre PWA installiert wird, unabhängig davon, welcher Mechanismus für die Installation verwendet wird.
window.addEventListener('appinstalled', () => {
// Hide the app-provided install promotion
hideInstallPromotion();
// Clear the deferredPrompt so it can be garbage collected
deferredPrompt = null;
// Optionally, send analytics event to indicate successful install
console.log('PWA was installed');
});
Erkennen, wie die PWA gestartet wurde
Die CSS-Media-Query display-mode gibt an, wie die PWA gestartet wurde, entweder in einem Browser-Tab oder als installierte PWA. So können je nach Start der App unterschiedliche Stile angewendet werden. Sie können sie beispielsweise so konfigurieren, dass die Schaltfläche „Installieren“ immer ausgeblendet und eine Schaltfläche „Zurück“ angezeigt wird, wenn sie als installierte PWA gestartet wird.
Nachverfolgen, wie die PWA gestartet wurde
Wenn Sie erfassen möchten, wie Nutzer Ihre PWA starten, verwenden Sie matchMedia(), um die Media-Anfrage display-mode zu testen.
function getPWADisplayMode() {
if (document.referrer.startsWith('android-app://'))
return 'twa';
if (window.matchMedia('(display-mode: browser)').matches)
return 'browser';
if (window.matchMedia('(display-mode: standalone)').matches || navigator.standalone)
return 'standalone';
if (window.matchMedia('(display-mode: minimal-ui)').matches)
return 'minimal-ui';
if (window.matchMedia('(display-mode: fullscreen)').matches)
return 'fullscreen';
if (window.matchMedia('(display-mode: window-controls-overlay)').matches)
return 'window-controls-overlay';
return 'unknown';
}
Änderungen des Anzeigemodus verfolgen
Wenn Sie nachverfolgen möchten, ob der Nutzer zwischen browser und anderen Anzeigemodi wechselt, achten Sie auf Änderungen an der Media-Query display-mode.
// Replace "standalone" with the display mode used in your manifest
window.matchMedia('(display-mode: standalone)').addEventListener('change', () => {
// Log display mode change to analytics
console.log('DISPLAY_MODE_CHANGED', getPWADisplayMode());
});
Benutzeroberfläche basierend auf dem aktuellen Anzeigemodus aktualisieren
Wenn Sie beim Start einer PWA als installierte PWA eine andere Hintergrundfarbe verwenden möchten, verwenden Sie bedingtes CSS:
@media all and (display-mode: standalone) {
body {
background-color: yellow;
}
}
Symbol und Name Ihrer App aktualisieren
Was ist, wenn Sie den Namen Ihrer App aktualisieren oder neue Symbole bereitstellen müssen? Unter So werden Updates des Web-App-Manifests in Chrome verarbeitet erfahren Sie, wann und wie sich diese Änderungen in Chrome auswirken.