In vielen Browsern können Sie die Installation Ihrer progressiven Webanwendung (PWA) direkt über die Benutzeroberfläche aktivieren und bewerben. Über die Installation (früher „Zum Startbildschirm hinzufügen“) können Nutzer Ihre PWA auf ihrem Mobilgerät oder Computer installieren. Wenn Sie eine PWA installieren, wird sie dem Launcher des Nutzers hinzugefügt, sodass sie wie jede andere installierte App ausgeführt werden kann.
Zusätzlich zur vom Browser bereitgestellten Installation können Sie direkt in Ihrer App einen eigenen benutzerdefinierten Installationsvorgang bereitstellen.
Berücksichtigen Sie bei der Entscheidung, ob Sie die Installation bewerben möchten, wie Nutzer Ihre PWA in der Regel verwenden. Wenn beispielsweise eine Gruppe von Nutzern Ihre PWA mehrmals pro Woche verwendet, profitieren diese Nutzer von der zusätzlichen Bequemlichkeit, Ihre App über den Startbildschirm eines Smartphones oder über das Startmenü eines Desktop-Betriebssystems zu starten. Einige Produktivitäts- und Unterhaltungsanwendungen profitieren auch vom zusätzlichen Bildschirmplatz, der durch das Entfernen der Browsersymbolleisten aus dem Fenster im installierten Modus standalone, minimal-ui oder window-control-overlay entsteht.
Vorbereitung
Bevor Sie beginnen, prüfen Sie, 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 an, dass Ihre progressive Web-App installierbar ist, und stellen einen benutzerdefinierten Installationsvorgang für die App bereit:
- Warten Sie auf das Ereignis
beforeinstallprompt. - Speichern Sie das Ereignis
beforeinstallprompt, damit es später den Installationsvorgang auslösen kann. - Informieren Sie den Nutzer darüber, 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 Ereignis beforeinstallprompt warten
Wenn Ihre progressive Web-App die erforderlichen Installationskriterien erfüllt, löst der Browser ein beforeinstallprompt-Ereignis aus. Speichern Sie eine Referenz 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-Installationsablauf
Wenn Sie die In-App-Installation anbieten möchten, müssen Sie eine Schaltfläche oder ein anderes Benutzeroberflächenelement einfügen, auf das Nutzer klicken oder tippen können, 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 modales Installationsdialogfeld angezeigt, in dem er bestätigen muss, dass er Ihre PWA installieren möchte.
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 Property userChoice ist ein Versprechen, das anhand der Auswahl des Nutzers erfüllt wird.
Du kannst prompt() für das verzögerte Ereignis nur einmal aufrufen. Wenn der Nutzer das Fenster schließt, müssen Sie warten, bis das Ereignis beforeinstallprompt wieder ausgelöst wird. Das ist in der Regel sofort nach der Behebung des Problems mit der Property userChoice der Fall.
Erkennen, ob die PWA erfolgreich installiert wurde
Mit der Property userChoice können Sie feststellen, 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 weiter.
Stattdessen sollten Sie auf das Ereignis appinstalled warten, das ausgelöst wird, wenn Ihre PWA installiert wird, unabhängig davon, welcher Mechanismus dafür 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-display-mode-Medienabfrage gibt an, wie die PWA gestartet wurde, entweder in einem Browsertab oder als installierte PWA. So können je nach Start der App unterschiedliche Stile angewendet werden. Sie können beispielsweise konfigurieren, dass die Schaltfläche „Installieren“ immer ausgeblendet wird und eine Schaltfläche „Zurück“ angezeigt wird, wenn die PWA als installiert gestartet wird.
Einführung der PWA im Blick behalten
Wenn Sie nachvollziehen möchten, wie Nutzer Ihre PWA starten, verwenden Sie matchMedia(), um die display-mode-Medienabfrage 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 am Anzeigemodus erfassen
Wenn du verfolgen möchtest, ob der Nutzer zwischen browser und anderen Anzeigemodi wechselt, musst du auf Änderungen an der display-mode-Medienabfrage achten.
// 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 anhand des aktuellen Anzeigemodus aktualisieren
Wenn Sie eine andere Hintergrundfarbe für eine PWA anwenden möchten, wenn sie als installierte PWA gestartet wird, verwenden Sie bedingtes CSS:
@media all and (display-mode: standalone) {
body {
background-color: yellow;
}
}
Symbol und Namen der App aktualisieren
Was ist, wenn Sie den Namen Ihrer App aktualisieren oder neue Symbole angeben müssen? Unter So verarbeitet Chrome Updates des Web-App-Manifests erfahren Sie, wann und wie diese Änderungen in Chrome übernommen werden.