Aufforderung zur Installation einer nativen App

Mit der Aufforderung zur Installation einer nativen App können Nutzer Ihre native App schnell und nahtlos direkt aus dem App Store auf ihrem Gerät installieren, ohne den Browser verlassen zu müssen und ohne eine störende Interstitial-Anzeige einzublenden.

Was sind die Kriterien?

Damit Nutzern die Aufforderung zur Installation der nativen App angezeigt wird, muss Ihre Website folgende Kriterien erfüllen:

  • Weder die Web-App noch die native App, die momentan auf dem Gerät installiert ist.
  • Enthält ein Web-App-Manifest, das Folgendes enthält:
  • Über HTTPS bereitgestellt

Ein beforeinstallprompt-Ereignis wird ausgelöst, wenn Sie diese Kriterien erfüllen. Sie können damit den Nutzer auffordern, Ihre native App zu installieren.

Erforderliche Manifestattribute

Wenn du den Nutzer auffordern möchtest, deine native App zu installieren, musst du dem Manifest deiner Web-App zwei Attribute hinzufügen: prefer_related_applications und related_applications.

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

Über das Attribut prefer_related_applications wird dem Browser mitgeteilt, dass der Nutzer die native Anwendung anstelle der Web-App aufrufen soll. Wenn Sie diesen Wert oder false nicht festlegen, wird der Nutzer vom Browser aufgefordert, stattdessen die Web-App zu installieren.

related_applications ist ein Array mit einer Liste von Objekten, die den Browser über Ihre bevorzugte native Anwendung informieren. Jedes Objekt muss die Attribute platform und id enthalten. Dabei ist platform play und id die ID Ihrer Play Store App.

Installationsaufforderung anzeigen

So wird das Installationsdialogfeld angezeigt:

  1. Warten Sie auf das Ereignis beforeinstallprompt.
  2. Teilen Sie dem Nutzer mit, dass Ihre native App mit einer Schaltfläche oder einem anderen Element installiert werden kann, das ein Nutzergesten-Ereignis generiert.
  3. Sie können die Aufforderung anzeigen lassen, indem Sie prompt() für das gespeicherte beforeinstallprompt-Ereignis aufrufen.

Auf beforeinstallprompt warten

Wenn die Kriterien erfüllt sind, löst Chrome ein beforeinstallprompt-Ereignis aus. Sie können damit angeben, dass Ihre Anwendung installiert werden kann, und den Nutzer dann auffordern, sie zu installieren.

Wenn das beforeinstallprompt-Ereignis ausgelöst wurde, speichern Sie einen Verweis auf das Ereignis und aktualisieren Sie die Benutzeroberfläche, damit 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 benachrichtigen, dass Ihre App installiert werden kann

Am besten benachrichtigen Sie den Nutzer, wenn Ihre App installiert werden kann, indem Sie Ihrer Benutzeroberfläche eine Schaltfläche oder ein anderes Element hinzufügen. Verwenden Sie keine ganzseitigen Interstitials oder andere Elemente, die störend 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 Installationsaufforderung anzeigen lassen möchten, rufen Sie mit einer Nutzergeste prompt() für das gespeicherte Ereignis auf. Es wird ein modales Dialogfeld angezeigt, in dem der Nutzer aufgefordert wird, die App zum Startbildschirm hinzuzufügen.

Warten Sie dann auf das Promise, das vom Attribut userChoice zurückgegeben wird. Das Versprechen gibt ein Objekt mit einem outcome-Attribut zurück, nachdem die Eingabeaufforderung 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;
    });
});

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

Besondere Überlegungen bei der Verwendung der Content Security Policy

Wenn Ihre Website eine restriktive Content Security Policy hat, müssen Sie *.googleusercontent.com in die Anweisung img-src aufnehmen, 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 durch Remote-Debugging auf einem Android-Gerät eingrenzen, um die URL des App-Symbols zu ermitteln.