In vielen Browsern können Sie die Installation Ihrer progressiven Webanwendung (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 Sie eine PWA installieren, wird sie dem Launcher des Nutzers hinzugefügt, sodass sie wie jede andere installierte App ausgeführt werden kann.
Neben der Installation im Browser können Sie direkt in Ihrer App Ihren 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 z. B. eine Gruppe von Nutzern Ihre PWA mehrfach verwendet,
pro Woche können diese Nutzer den zusätzlichen Komfort nutzen,
Starten Ihrer App über den Startbildschirm eines Smartphones oder über das Startmenü auf einem Desktop-Computer
Betriebssystem. Einige Produktivitäts- und Unterhaltungsanwendungen
des zusätzlichen Bildschirmbereichs, der durch Entfernen der Browser-Symbolleisten aus der
Fenster im installierten standalone-, minimal-ui- oder window-control-overlay-Modus.
Vorbereitung
Prüfen Sie zuerst, ob Ihre PWA den Anforderungen an die Installierbarkeit, die in der Regel die Bereitstellung eines Web-App-Manifests beinhalten.
Installation bewerben
So zeigen Sie an, dass Ihre progressive Webanwendung installierbar ist, und stellen einen benutzerdefinierten Installationsvorgang für die App bereit:
- Warte auf das Ereignis
beforeinstallprompt. - Speichern Sie das Ereignis
beforeinstallprompt, damit es später den Installationsvorgang auslösen kann. - Weisen Sie den Nutzer darauf hin, dass Ihre PWA installierbar ist, und stellen Sie eine Schaltfläche oder andere 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 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
um zu bestätigen, dass sie Ihre PWA installieren möchten.
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 sie 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, wann die PWA installiert wurde
Mit dem Attribut userChoice kannst du feststellen, ob der Nutzer
Benutzeroberfläche für Ihre App zu erstellen. Wenn der Nutzer die PWA jedoch installiert,
aus der Adressleiste oder einer anderen Browserkomponente entfernen, hilft userChoice hier nicht.
Sie sollten stattdessen auf das appinstalled-Ereignis warten, das immer ausgelöst wird, wenn
ob Ihre PWA installiert ist, unabhängig davon, mit welchem Mechanismus sie installiert wurde.
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-Medienabfrage display-mode gibt an, wie die PWA gestartet wurde, entweder in
als Browser-Tab
oder als installierte PWA. So können je nach Start der App unterschiedliche Stile angewendet werden. Sie können ihn beispielsweise
um die Installationsschaltfläche immer auszublenden und eine Zurück-Schaltfläche bereitzustellen, wenn sie als
PWA installiert haben.
Einführung der PWA im Blick behalten
Wenn du nachverfolgen möchtest, wie Nutzer deine PWA starten, verwende matchMedia(), um die
display-mode Medienabfrage.
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';
}
Erfassen, wenn sich der Anzeigemodus ändert
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 basierend auf dem aktuellen Anzeigemodus aktualisieren
So wenden Sie eine andere Hintergrundfarbe für eine PWA an, wenn sie als installierte PWA gestartet wird: PWA verwenden, 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 verarbeitet Chrome Updates des Web-App-Manifests erfahren Sie, wann und wie diese Änderungen in Chrome übernommen werden.