Installationsaufforderung

Nutzer sind möglicherweise nicht mit dem Installationsprozess von PWAs vertraut. Als Entwickler wissen Sie, zu welchem Zeitpunkt Sie Nutzer einladen sollten, die App zu installieren. Die Aufforderungen für die Installation des Standardbrowsers können ebenfalls optimiert werden. Sehen wir uns die verfügbaren Tools an.

Installationsdialogfeld optimieren

Browser stellen standardmäßige Aufforderungen zur Installation bereit, wenn PWAs die Installationskriterien erfüllen. Der Browser verwendet die Properties name und icons aus deinem Web App Manifest, um den Prompt zu erstellen.

Installationsaufforderung von Microsoft Edge.

Einige Browser verbessern die Installationsaufforderung mithilfe von Werbefeldern im Manifest, z. B. description, categories und screenshots. Wenn Ihre PWA beispielsweise in Chrome unter Android Werte für die Felder description und screenshots bereitstellt, wird das Dialogfeld für die Installation von der kleinen Infoleiste Zum Startbildschirm hinzufügen zu einem größeren, detaillierteren Dialogfeld verwandelt, ähnlich wie bei den Aufforderungen zur Installation aus einem App-Shop.

Aktionsfelder in Aktion sehen:

Das „beforeinstallprompt“-Ereignis

Die Aufforderungen zur Installation des Browsers sind der erste Schritt, um Nutzer zur Installation Ihrer PWA zu bewegen. Um Ihre eigene Installationsmethode zu implementieren, muss Ihre App dennoch die Installationskriterien erfüllen: Wenn der Browser erkennt, dass Ihre App installierbar ist, wird das Ereignis beforeinstallprompt ausgelöst. Sie müssen diesen Event-Handler implementieren, um die Nutzererfahrung anzupassen. So gehts:

  1. Warte auf das Ereignis beforeinstallprompt.
  2. Speichern Sie ihn. Sie benötigen ihn später.
  3. Lösen Sie sie über Ihre Benutzeroberfläche aus.

Im Code unten finden Sie ein Beispiel eines Ereignis-Listeners für das beforeinstallprompt-Ereignis, dessen Erfassung und 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 benutzerdefinierte Installationsschaltfläche klickt, verwende die zuvor gespeicherte deferredPrompt und rufe die zugehörige prompt()-Methode auf, da der Nutzer zur Installation der App noch den Browserprozess durchlaufen muss. Sie haben den Vorgang so lange verzögert, bis Sie dem Nutzer den richtigen Kontext gegeben haben, um ihn zur Installation der PWA anzuregen.

Wenn Sie das Ereignis erfassen, können Sie Nutzern Hinweise und Anreize zur Installation Ihrer App geben und sie zur Installation auffordern, wenn Sie wissen, dass sie aktiver sind.

Das Ereignis wird in folgenden Fällen nicht ausgelöst:

  • Der Nutzer hat bereits die aktuelle PWA installiert (nur für Computer und WebAPK unter Android gültig).
  • Die App erfüllt die Kriterien für die PWA-Installation nicht.
  • Die PWA kann aus anderen Gründen nicht auf dem aktuellen Gerät installiert werden, z. B. auf einem Gerät im Kioskmodus oder ohne Berechtigungen.

Der beste Ort, um

Wo Sie eine Aufforderung erhalten, hängt von Ihrer Anwendung ab und davon, wann Ihre Nutzer am meisten mit Ihren Inhalten und Diensten interagieren. Wenn du die beforeinstallprompt aufnimmst, kannst du Nutzern zeigen, warum sie deine App immer wieder verwenden und welche Vorteile sie daraus ziehen. Sie können festlegen, dass Installationshinweise überall in Ihrer App angezeigt werden. Einige gängige Muster sind: im seitlichen Menü, nach einer kritischen User Journey wie dem Abschluss einer Bestellung oder nach einer Anmeldeseite. Weitere Informationen dazu finden Sie unter Muster zum Bewerben der PWA-Installation.

Analysedaten erfassen

Mithilfe von Analysen kannst du besser verstehen, wo und wann du deine Aufforderungen präsentieren solltest. Du kannst das Attribut userChoice aus dem beforeinstallprompt-Ereignis verwenden. userChoice ist ein Versprechen, das mit der vom Nutzer ausgeführten Aktion aufgelöst wird.

// 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');
  }
});

Beispiele ansehen

Probieren Sie das folgende Beispiel in einem Chromium-Browser (Computer oder Android) aus.

Fallback

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

Sie sollten diese Anweisungen nur im Browsermodus rendern. Andere Anzeigeoptionen wie standalone oder fullscreen bedeuten, dass der Nutzer die App bereits installiert hat.

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

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

Codelab

Bibliotheken

In den folgenden Bibliotheken finden Sie Hilfe zum Rendern einer benutzerdefinierten Installationsaufforderung:

Ressourcen