Installationsaufforderung

Nutzer sind möglicherweise nicht mit der Installation von PWAs vertraut. Als Entwickler wissen Sie, wann der richtige Zeitpunkt ist, den Nutzer zur Installation der App einzuladen. Die Standardaufforderungen zur Browserinstallation können ebenfalls optimiert werden. Sehen wir uns die verfügbaren Tools an.

Installationsdialogfeld optimieren

Browser stellen standardmäßige Installationsaufforderungen bereit, wenn PWAs die Installationskriterien erfüllen. Der Browser verwendet die Eigenschaften name und icons aus Ihrem Web-App-Manifest, um den Prompt zu erstellen.

Aufforderung zur Installation von Microsoft Edge

Einige Browser optimieren die Aufforderung zur Installation mithilfe der Werbefelder im Manifest, darunter description, categories und screenshots. Wenn Sie beispielsweise Chrome unter Android verwenden und Ihre PWA Werte für die Felder description und screenshots bereitstellt, wird das Installationsdialogfeld von einer kleinen Infoleiste Zum Startbildschirm hinzufügen in ein größeres, detaillierteres Dialogfeld umgewandelt, das den Installationsaufforderungen aus einem App-Shop ähnelt.

Das Ereignis „beforeinstallprompt“

Die Installationsaufforderungen des Browsers sind der erste Schritt, um Nutzer dazu zu bringen, Ihre PWA zu installieren. Wenn Sie eine eigene Installationsumgebung implementieren möchten, muss Ihre App weiterhin die Installationskriterien erfüllen: Wenn der Browser erkennt, dass Ihre App installiert werden kann, wird das beforeinstallprompt-Ereignis ausgelöst. Sie müssen diesen Ereignishandler implementieren, um die Nutzererfahrung anzupassen. So gehts:

  1. Warten Sie auf das Ereignis beforeinstallprompt.
  2. Speichern Sie sie, da Sie sie später benötigen.
  3. Sie können sie über Ihre Benutzeroberfläche auslösen.

Im folgenden Code finden Sie ein Beispiel für einen Ereignis-Listener für das beforeinstallprompt-Ereignis, die Erfassung und die spätere benutzerdefinierte Verwendung.

// This variable will save the event for later use.
let deferredPrompt;
window.addEventListener('beforeinstallprompt', (e) => {
  // Prevents the default mini-infobar or install dialog from appearing on mobile
  e.preventDefault();
  // Save the event because you'll need to trigger it later.
  deferredPrompt = e;
  // Show your customized install prompt for your PWA
  // Your own UI doesn't have to be a single element, you
  // can have buttons in different locations, or wait to prompt
  // as part of a critical journey.
  showInAppInstallPromotion();
});

Wenn der Nutzer dann auf die angepasste Schaltfläche „Installieren“ klickt, verwenden Sie das zuvor gespeicherte deferredPrompt und rufen Sie die Methode prompt() auf, da der Nutzer weiterhin den Prozess des Browsers durchlaufen muss, um Ihre App zu installieren. Sie haben das Ereignis nur verzögert, bis Sie dem Nutzer den richtigen Kontext gegeben haben, um ihn zur Installation der PWA zu ermutigen.

Wenn Sie das Ereignis erfassen, können Sie Hinweise und Anreize für Nutzer hinzufügen, damit sie Ihre App installieren. Außerdem können Sie die Installation zu einem Zeitpunkt anstoßen, zu dem die Nutzer aktiver sind.

Das Ereignis wird nicht ausgelöst, wenn:

  • Der Nutzer hat die aktuelle PWA bereits installiert (gilt nur für Desktop und WebAPK unter Android).
  • Die App erfüllt die Installationskriterien für PWAs nicht.
  • Die PWA kann aus anderen Gründen nicht auf dem aktuellen Gerät installiert werden, z. B. weil sich das Gerät im Kioskmodus befindet oder keine Berechtigungen vorhanden sind.

Der beste Ort für Prompts

Wo Sie die Aufforderung einblenden, hängt von Ihrer Anwendung und davon ab, wann Ihre Nutzer am meisten mit Ihren Inhalten und Diensten interagieren. Wenn Sie die beforeinstallprompt erfassen, können Sie Nutzern erklären, warum sie Ihre App weiterhin verwenden sollten und welche Vorteile sie durch die Installation erhalten. Sie können Installationshinweise an beliebiger Stelle in Ihrer App einblenden. Einige gängige Muster sind: im Seitenmenü, nach einem wichtigen Nutzerablauf wie dem Abschluss einer Bestellung oder nach einer Registrierungsseite. Weitere Informationen dazu finden Sie unter Patterns for promoting PWA installation.

Analysen erfassen

Mithilfe von Analysen können Sie besser nachvollziehen, wo und wann Sie Ihre Aufforderungen präsentieren sollten. Sie können die userChoice-Eigenschaft aus dem beforeinstallprompt-Ereignis verwenden. userChoice ist ein Promise, das mit der Aktion aufgelöst wird, die der Nutzer ausgeführt hat.

// Gather the data from your custom install UI event listener
installButton.addEventListener('click', async () => {
  // deferredPrompt is a global variable we've been using in the sample to capture the `beforeinstallevent`
  deferredPrompt.prompt();
  // Find out whether the user confirmed the installation or not
  const { outcome } = await deferredPrompt.userChoice;
  // The deferredPrompt can only be used once.
  deferredPrompt = null;
  // Act on the user's choice
  if (outcome === 'accepted') {
    console.log('User accepted the install prompt.');
  } else if (outcome === 'dismissed') {
    console.log('User dismissed the install prompt');
  }
});

Fallback

Wenn der Browser beforeinstallprompt nicht unterstützt oder das Ereignis nicht ausgelöst wird, gibt es keine andere Möglichkeit, den Installationsaufforderung des Browsers auszulösen. Auf Plattformen, auf denen Nutzer PWAs manuell installieren können, z. B. iOS, können Sie dem Nutzer diese Anleitung jedoch anzeigen.

Diese Anleitung sollte nur im Browsermodus gerendert werden. Bei anderen Anzeigeoptionen wie standalone oder fullscreen hat der Nutzer die App bereits installiert.

Wenn Sie das Element nur im Browsermodus rendern möchten, verwenden Sie die Media-Anfrage display-mode:

#installInstructions {
   display: none
}
@media (display-mode: browser) {
   #installInstructions {
     display: block
   }
}

Codelab

Bibliotheken

Diese Bibliotheken können Ihnen beim Rendern einer benutzerdefinierten Installationsaufforderung helfen:

Ressourcen