Eigene In-App-Installationskampagnen bereitstellen

Pete LePage

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> Schaltfläche „App installieren“ in der Spotify-PWA <ph type="x-smartling-placeholder">
</ph> Die Schaltfläche „App installieren“ in der Spotify-PWA zur Verfügung.

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:

  1. Warte auf das Ereignis beforeinstallprompt.
  2. Speichere das beforeinstallprompt-Ereignis, damit der Installationsvorgang ausgelöst werden kann .
  3. 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.