Aufforderung zur Installation einer nativen App

Mit der Aufforderung zur Installation nativer Apps können Sie Nutzern die Möglichkeit geben, Ihre native App direkt über den App-Shop auf ihrem Gerät schnell und nahtlos zu installieren, ohne den Browser zu verlassen und ohne ein störendes Interstitial zu präsentieren.

Welche Kriterien gelten?

Damit Nutzern die Aufforderung zur Installation der nativen App angezeigt werden kann, muss Ihre Website die folgenden Kriterien erfüllen:

  • Weder die Web-App noch die derzeit auf dem Gerät installierte native App.
  • Enthält ein Web-App-Manifest mit folgenden Elementen:
  • Über HTTPS bereitgestellt

Wenn diese Kriterien erfüllt sind, wird das Ereignis beforeinstallprompt ausgelöst. Sie können damit Nutzer auffordern, Ihre native App zu installieren.

Erforderliche Manifest-Properties

Wenn Sie Nutzer zum Installieren Ihrer nativen App auffordern möchten, müssen Sie Ihrem Webanwendungsmanifest zwei Properties hinzufügen: prefer_related_applications und related_applications.

"prefer_related_applications": true,
"related_applications": [
    {
    "platform": "play",
    "id": "com.google.samples.apps.iosched"
    }
]

Die Property prefer_related_applications weist den Browser an, den Nutzer zur Installation Ihrer nativen App anstelle der Webanwendung aufzufordern. Wenn Sie diesen Wert nicht festlegen oder false angeben, wird der Nutzer vom Browser aufgefordert, stattdessen die Webanwendung zu installieren.

related_applications ist ein Array mit einer Liste von Objekten, die dem Browser Ihre bevorzugte native Anwendung mitteilen. Jedes Objekt muss eine platform- und eine id-Property enthalten. Dabei ist platform = play und id = Ihre Play Store-App-ID.

Installationsaufforderung anzeigen

Damit das Installationsdialogfeld angezeigt wird, müssen Sie Folgendes tun:

  1. Warten Sie auf das Ereignis beforeinstallprompt.
  2. Informieren Sie den Nutzer darüber, dass Ihre native App mit einer Schaltfläche oder einem anderen Element installiert werden kann, das ein Nutzerereignis generiert.
  3. Blenden Sie die Aufforderung ein, indem Sie prompt() für das gespeicherte beforeinstallprompt-Ereignis aufrufen.

Erfasst beforeinstallprompt

Wenn die Kriterien erfüllt sind, löst Chrome ein beforeinstallprompt-Ereignis aus. Du kannst damit angeben, dass deine App installiert werden kann, und dann den Nutzer zur Installation auffordern.

Wenn das Ereignis beforeinstallprompt ausgelöst wurde, speichern Sie eine Referenz auf das Ereignis und aktualisieren Sie die Benutzeroberfläche, um anzugeben, dass der Nutzer Ihre App installieren kann.

let deferredPrompt;

window.addEventListener('beforeinstallprompt', (e) => {
  // Prevent Chrome 67 and earlier from automatically showing the prompt
  e.preventDefault();
  // Stash the event so it can be triggered later.
  deferredPrompt = e;
});

Nutzer darüber informieren, dass Ihre App installiert werden kann

Am besten informieren Sie Nutzer darüber, dass Ihre App installiert werden kann, indem Sie Ihrer Benutzeroberfläche eine Schaltfläche oder ein anderes Element hinzufügen. Zeigen Sie keine Interstitials auf voller Seite oder andere Elemente, die Nutzer stören oder ablenken könnten.

window.addEventListener('beforeinstallprompt', (e) => {
  // Prevent Chrome 67 and earlier from automatically showing the prompt
  e.preventDefault();
  // Stash the event so it can be triggered later.
  deferredPrompt = e;
  // Update UI notify the user they can add to home screen
  btnAdd.style.display = 'block';
});

Aufforderung anzeigen

Wenn Sie die Aufforderung zur Installation anzeigen lassen möchten, rufen Sie prompt() für das gespeicherte Ereignis über eine Nutzergeste auf. Es wird ein modales Dialogfeld angezeigt, in dem der Nutzer aufgefordert wird, Ihre App auf dem Startbildschirm hinzuzufügen.

Warten Sie dann auf das Promise, das von der userChoice-Property zurückgegeben wird. Die Versprechen gibt ein Objekt mit dem Attribut outcome zurück, nachdem die Aufforderung angezeigt wurde und der Nutzer darauf geantwortet hat.

btnAdd.addEventListener('click', (e) => {
  // hide our user interface that shows our A2HS button
  btnAdd.style.display = 'none';
  // Show the prompt
  deferredPrompt.prompt();
  // Wait for the user to respond to the prompt
  deferredPrompt.userChoice
    .then((choiceResult) => {
      if (choiceResult.outcome === 'accepted') {
        console.log('User accepted the A2HS prompt');
      } else {
        console.log('User dismissed the A2HS prompt');
      }
      deferredPrompt = null;
    });
});

Du kannst prompt() für das verzögerte Ereignis nur einmal aufrufen. Wenn der Nutzer das Fenster schließt, müssen Sie warten, bis das Ereignis beforeinstallprompt bei der nächsten Seitennavigation ausgelöst wird.

Besondere Hinweise zur Verwendung der Richtlinie zur Sicherheit von Inhalten

Wenn Ihre Website eine restriktive Content Security Policy hat, fügen Sie der Richtlinie img-src das Attribut *.googleusercontent.com hinzu, damit Chrome das mit Ihrer App verknüpfte Symbol aus dem Play Store herunterladen kann.

In einigen Fällen ist *.googleusercontent.com möglicherweise ausführlicher als gewünscht. Sie können dies eingrenzen, indem Sie ein Android-Gerät per Fernzugriff debuggen, um die URL des App-Symbols zu ermitteln.