In vielen Browsern können Sie die Installation Ihrer progressiven Web-App (PWA) direkt auf der Benutzeroberfläche aktivieren und bewerben. Bei der 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 Installation durch den Browser kannst du direkt in der App einen eigenen benutzerdefinierten Installationsablauf 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 in einer Woche verwendet, können diese Nutzer den zusätzlichen Komfort nutzen, um Ihre App über den Startbildschirm eines Smartphones oder über das Startmenü in einem Desktop-Betriebssystem 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
Prüfen Sie zuerst, 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 den Installationsvorgang später 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 einen Verweis zum 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
Für die In-App-Installation müssen Sie eine Schaltfläche oder ein anderes Oberflächenelement angeben, auf das der Nutzer klicken oder tippen kann, um Ihre App zu installieren. Wenn auf das Element geklickt oder angetippt 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;
});
Das Attribut userChoice ist ein Promise, das mit der Auswahl des Nutzers aufgelöst 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 dem Attribut userChoice lässt sich feststellen, ob der Nutzer die Anwendung über die Benutzeroberfläche installiert hat. Wenn der Nutzer deine PWA jedoch über die Adressleiste oder eine andere Browserkomponente installiert, hilft userChoice nicht.
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. Dadurch ist es möglich, verschiedene Stile anzuwenden, je nachdem, wie die App gestartet wurde. 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 verfolgen
Wenn Sie nachvollziehen möchten, wie Nutzer Ihre PWA starten, können Sie mit matchMedia() die Medienabfrage display-mode 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
Warten Sie auf Änderungen an der Medienabfrage display-mode, um nachzuvollziehen, ob der Nutzer zwischen browser und anderen Anzeigemodi wechselt.
// 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 einer PWA beim Starten als installierte PWA eine andere Hintergrundfarbe zuweisen möchten, verwenden Sie bedingten CSS-Code:
@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 werden Aktualisierungen des Web-App-Manifests in Chrome gehandhabt erfährst du, wann und wie diese Änderungen in Chrome übernommen werden.