Installationsaufforderung

Nutzer sind möglicherweise nicht mit dem Installationsvorgang für PWAs vertraut. Als Entwickler wissen Sie, wann Sie den Nutzer zur Installation der App einladen sollten. Die Aufforderungen zur Installation des Standardbrowsers können ebenfalls verbessert werden. Sehen wir uns die verfügbaren Tools an.

Installationsdialogfeld wird optimiert

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

Aufforderung zur Installation von Microsoft Edge.

Bei einigen Browsern wird die Aufforderung zur Installation mithilfe der Werbefelder im Manifest verbessert, darunter description, categories und screenshots. Wenn deine PWA beispielsweise in Chrome unter Android Werte für die Felder description und screenshots bereitstellt, wird das Dialogfeld für die Installation von einer kleinen Infoleiste mit Zum Startbildschirm hinzufügen in ein größeres, detaillierteres Dialogfeld umgewandelt, ähnlich den Installationsaufforderungen aus einem App-Shop.

Beispiele für Werbefelder in Aktion:

Das Ereignis „beforeinstallprompt“

Die Installationsaufforderung im Browser ist der erste Schritt, um Nutzer zur Installation Ihrer PWA zu bewegen. Damit Sie Ihre eigene Installation implementieren können, muss Ihre App die Installationskriterien erfüllen: Wenn der Browser erkennt, dass Ihre App installierbar ist, löst er das Ereignis beforeinstallprompt aus. Sie müssen diesen Event-Handler implementieren, um die Nutzererfahrung anzupassen. Das geht so:

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

Der folgende Code zeigt ein Beispiel für einen Event-Listener für das beforeinstallprompt-Ereignis, seine Erfassung und eine 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, verwenden Sie das zuvor gespeicherte deferredPrompt und rufen Sie seine prompt()-Methode auf, da der Nutzer zum Installieren Ihrer App immer noch den Prozess des Browsers durchlaufen muss. Sie haben das Ereignis verzögert, bis Sie dem Nutzer den richtigen Kontext gegeben haben, um ihn zur Installation der PWA zu bewegen.

Wenn Sie das Ereignis aufzeichnen, haben Sie die Möglichkeit, Nutzern Hinweise und Anreize hinzuzufügen, Ihre App zu installieren, und sie zur Installation auffordern, wenn Sie wissen, dass die Nutzer mehr Interesse haben.

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

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

Der beste Ort für einen Prompt

Wo genau angegeben wird, hängt von Ihrer Anwendung ab und davon, wann Nutzer am meisten mit Ihren Inhalten und Diensten interagieren. Wenn du die beforeinstallprompt aufnimmst, kannst du Nutzern erklären, warum sie deine App weiterhin verwenden sollten und welche Vorteile die Installation bietet. Sie können überall in Ihrer App Installationshinweise anzeigen lassen. Einige gängige Muster sind im seitlichen Menü, nach einem wichtigen Nutzerpfad, z. B. nach dem Abschluss einer Bestellung, oder nach einer Registrierungsseite. Weitere Informationen dazu finden Sie unter Muster zum Fördern der PWA-Installation.

Analysen sammeln

Mithilfe von Analytics können Sie besser verstehen, wo und wann Sie Ihre Prompts präsentieren sollten. Du kannst die userChoice-Property 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

Probier 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 diese Anleitung jedoch anzeigen.

Sie sollten diese Anleitung 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

Sehen Sie sich diese Bibliotheken an, um Hilfe beim Rendern einer benutzerdefinierten Installationsaufforderung zu erhalten:

Ressourcen