Eigene In-App-Installationskampagnen bereitstellen

Pete LePage

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.

Die Schaltfläche „App installieren“ in der Spotify-PWA.

Ü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:

1. Warten Sie auf das Ereignis beforeinstallprompt.
2. Speichere das beforeinstallprompt-Ereignis, damit es den Installationsvorgang später auslösen kann.
3. 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.

Hinweis: Die Ereignisse beforeinstallprompt und appinstalled wurden aus der Manifestspezifikation der Web-App in ihren eigenen Inkubator verschoben. Das Chrome-Team wird sie weiterhin unterstützen und hat nicht vor, den Support einzustellen oder einzustellen. Das Web DevRel-Team von Google empfiehlt weiterhin, diese zu verwenden, um eine benutzerdefinierte Installation zu ermöglichen.

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.`);
});

Hinweis :Es gibt viele verschiedene Muster, mit denen Sie Nutzer darüber informieren können, dass Ihre App installiert werden kann, und einen In-App-Installationsvorgang bereitstellen. Dies kann eine Schaltfläche in der Kopfzeile, ein Element im Navigationsmenü oder ein Element in Ihrem Inhaltsfeed sein.

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.

Ausprobieren : Machen Sie mithilfe des Ereignisses beforeinstallprompt eine installierbare Website.

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.