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 nerviges Interstitial zu zeigen.

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.
  • Ein Web-App-Manifest enthält, das Folgendes enthält:
  • Ü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 den zu Ihrer bevorzugten nativen Anwendung. Jedes Objekt muss Folgendes enthalten: eine platform- und eine id-Property. Wenn der platform-Wert play ist und id Ihre Play Store-App-ID ist.

Installationsaufforderung anzeigen

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

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

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 eine Aufforderung um sie zu installieren.

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 informieren, dass Ihre App installiert werden kann

Am besten benachrichtigen Sie Nutzer, wenn Ihre App installiert werden kann, indem Sie eine Schaltfläche hinzufügen. oder ein anderes Element zu Ihrer Benutzeroberfläche hinzufügen. Kein ganzseitiges Interstitial anzeigen oder andere Elemente, die Sie stören oder ablenken.

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

Rufe prompt() für das gespeicherte Ereignis auf, um die Installationsaufforderung anzuzeigen mit einer Geste des Nutzers. Ein modales Dialogfeld wird angezeigt, in dem der Nutzer , um Ihre App zu ihrem Startbildschirm hinzuzufügen.

Warte dann auf das von der Property userChoice zurückgegebene Promise. Das Promise gibt ein Objekt mit einer outcome-Property zurück, nachdem der Prompt angezeigt 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 die müssen Sie warten, bis das beforeinstallprompt-Ereignis zur nächsten Seitennavigation.

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.