In vielen Browsern können Sie die Installation aktivieren und bewerben. der progressiven Web-App (PWA) direkt in der Benutzeroberfläche. Bei der Installation (früher „Zum Startbildschirm hinzufügen“) können Nutzer PWA auf ihrem Mobilgerät oder Computer. Wenn Sie eine PWA installieren, wird sie dem damit sie wie jede andere installierte App ausgeführt werden kann.
Zusätzlich zur Installation im Browser können Sie direkt in Ihrer App Ihren eigenen benutzerdefinierten Installationsablauf bereitstellen.
<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">Wenn Sie überlegen, ob Sie die Installation bewerben, überlegen Sie, wie Nutzende
Ihre PWA verwenden. Wenn z. B. eine Gruppe von Nutzern
Ihre PWA mehrere Male 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- oder minimal-ui-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
Um nachzuweisen, dass Ihre progressive Web-App installierbar ist, und eine benutzerdefinierte In-App-Installation:
- Warte auf das Ereignis
beforeinstallprompt. - Speichere das
beforeinstallprompt-Ereignis, damit der Installationsvorgang ausgelöst werden 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 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-Installationsablauf
Um eine In-App-Installation zu ermöglichen, stelle eine Schaltfläche oder ein anderes Oberflächenelement bereit
auf die Nutzer klicken oder tippen können, um Ihre App zu installieren. Wenn auf das Element geklickt oder
angetippt: Rufen Sie prompt() für das gespeicherte Ereignis beforeinstallprompt an (gespeichert im
deferredPrompt). 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 beforeinstallprompt-Ereignis
wird noch einmal ausgelöst, in der Regel direkt nach der Eigenschaft userChoice
behoben.
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 Sie unterschiedliche
je nachdem, wie die App auf den Markt gebracht wurde. 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 verfolgen
Wenn du nachverfolgen möchtest, wie Nutzer deine PWA starten, verwende matchMedia(), um die
display-mode Medienabfrage. Diese Option wird von Safari unter iOS noch nicht unterstützt. Sie müssen sich daher zuerst anmelden.
prüfen Sie stattdessen navigator.standalone. Dadurch wird ein boolescher Wert zurückgegeben, der angibt,
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';
}
Erfassen, wenn sich der Anzeigemodus ändert
Um nachzuverfolgen, ob der Nutzer zwischen standalone und browser tab wechselt, warten Sie auf
Änderungen an der Medienabfrage display-mode.
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);
});
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 Ihren App-Namen aktualisieren oder neue Symbole zur Verfügung stellen müssen? Weitere Informationen finden Sie unter Wie Chrome Updates für das Web-App-Manifest verarbeitet. um zu sehen, wann und wie diese Änderungen in Chrome übernommen werden.