In vielen Browsern kannst du die Installation deiner progressiven Web-App (PWA) direkt über die Benutzeroberfläche aktivieren und aktivieren. Mit 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 eines Nutzers hinzugefügt, sodass sie wie jede andere installierte App ausgeführt werden kann.
Zusätzlich zur für den Browser bereitgestellten Installation kannst du direkt in deiner App einen eigenen benutzerdefinierten Installationsablauf bereitstellen.
Überlegen Sie, wie Nutzer Ihre PWA normalerweise verwenden. Wenn beispielsweise eine Gruppe von Nutzern Ihre PWA mehrmals pro Woche verwendet, können diese Nutzer von dem zusätzlichen Komfort profitieren, indem Sie die App über den Startbildschirm eines Smartphones oder über das Startmenü eines Desktop-Betriebssystems starten. Einige Produktivitäts- und Unterhaltungsanwendungen profitieren auch von dem zusätzlichen Platz auf dem Bildschirm, der durch Entfernen der Browsersymbolleisten aus dem Fenster im installierten standalone- oder minimal-ui-Modus entsteht.
Voraussetzungen
Prüfen Sie zuerst, ob Ihre PWA die Anforderungen an die Installierbarkeit erfüllt. Dazu gehört in der Regel ein Manifest für Web-Apps.
Installation fördern
So zeigst du an, dass deine progressive Web-App installierbar ist, und bietest einen benutzerdefinierten In-App-Installationsablauf:
- Warten Sie auf das Ereignis
beforeinstallprompt. - Speichere das
beforeinstallprompt-Ereignis, damit es den Installationsvorgang später auslösen kann. - Weisen Sie Nutzer darauf hin, dass Ihre PWA installierbar ist, und geben Sie eine Schaltfläche oder ein anderes Element an, um den In-App-Installationsvorgang zu starten.
Auf das Ereignis beforeinstallprompt warten
Wenn deine 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 so, dass Nutzer Ihre PWA installieren können.
// 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.`);
});
Ablauf der In-App-Installation
Wenn du eine In-App-Installation ermöglichen möchtest, stelle eine Schaltfläche oder ein anderes Oberflächenelement bereit, auf das der Nutzer klicken oder tippen kann, um deine App zu installieren. Wenn auf das Element geklickt oder getippt wird, muss prompt() für das gespeicherte beforeinstallprompt-Ereignis aufgerufen werden. Dieses Element wird in der Variablen deferredPrompt gespeichert. Der Nutzer sieht ein modales Installationsdialogfeld, in dem er bestätigen muss, dass er die 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 Versprechen, das entsprechend der Auswahl des Nutzers aufgelöst wird.
Sie können prompt() bei dem verzögerten Ereignis nur einmal aufrufen. Wenn der Nutzer es schließt, müssen Sie warten, bis das beforeinstallprompt-Ereignis wieder ausgelöst wird, in der Regel direkt, nachdem das Attribut userChoice aufgelöst wurde.
Erkennen, wann die PWA erfolgreich installiert wurde
Mit dem Attribut userChoice können Sie feststellen, ob der Nutzer die App über die Benutzeroberfläche installiert hat. Installiert der Nutzer die PWA über die Adressleiste oder eine andere Browserkomponente, hilft userChoice aber nicht.
Warten Sie stattdessen auf das Ereignis appinstalled, das immer dann ausgelöst wird, wenn Ihre PWA installiert wird, unabhängig davon, über welchen Mechanismus sie installiert 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');
});
Ermitteln, wie die PWA gestartet wurde
Die CSS-Medienabfrage display-mode gibt an, wie die PWA gestartet wurde, entweder auf einem Browsertab oder als installierte PWA. Dadurch können verschiedene Stile angewendet werden, je nachdem, wie die App gestartet wurde. Sie können sie beispielsweise so konfigurieren, dass die Installationsschaltfläche immer ausgeblendet und eine Schaltfläche „Zurück“ bereitgestellt wird, wenn sie als installierte PWA gestartet wird.
Nachverfolgen, wie die PWA gestartet wurde
Wenn Sie wissen möchten, wie Nutzer Ihre PWA starten, testen Sie mit matchMedia() die Medienabfrage display-mode. Safari auf iOS-Geräten unterstützt dies noch nicht. Deshalb müssen Sie stattdessen navigator.standalone aktivieren, das einen booleschen Wert zurückgibt, der angibt, ob der Browser im eigenständigen Modus ausgeführt wird.
function getPWADisplayMode() {
const isStandalone = window.matchMedia('(display-mode: standalone)').matches;
if (document.referrer.startsWith('android-app://')) {
return 'twa';
} else if (navigator.standalone || isStandalone) {
return 'standalone';
}
return 'browser';
}
Änderungen des Anzeigemodus erfassen
Wenn Sie erfassen möchten, ob der Nutzer zwischen standalone und browser tab wechselt, warten Sie auf Änderungen an der display-mode-Medienabfrage.
window.matchMedia('(display-mode: standalone)').addEventListener('change', (evt) => {
let displayMode = 'browser';
if (evt.matches) {
displayMode = 'standalone';
}
// Log display mode change to analytics
console.log('DISPLAY_MODE_CHANGED', displayMode);
});
UI basierend auf dem aktuellen Anzeigemodus aktualisieren
Wenn Sie für eine PWA eine andere Hintergrundfarbe festlegen möchten, wenn sie als installierte PWA gestartet wird, können Sie bedingtes CSS verwenden:
@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 bereitstellen müssen? Unter Wie Chrome mit Aktualisierungen des Web-App-Manifests umgeht erfahren Sie, wann und wie diese Änderungen in Chrome angezeigt werden.