Native app-installatieprompt

De native app-installatieprompt biedt u de mogelijkheid om gebruikers uw native app snel en naadloos rechtstreeks vanuit de app store op hun apparaat te laten installeren, zonder de browser te verlaten en zonder een vervelende interstitial te tonen.

Wat zijn de criteria?

Om de native app-installatieprompt aan de gebruiker te tonen, moet uw site aan de volgende criteria voldoen:

  • Noch de web-app, noch de native app die momenteel op het apparaat is geïnstalleerd.
  • Bevat een webapp-manifest met het volgende:
  • Geserveerd via HTTPS

Er wordt een beforeinstallprompt gebeurtenis geactiveerd als u aan deze criteria voldoet. U kunt het gebruiken om de gebruiker te vragen uw eigen app te installeren.

Vereiste manifeste eigenschappen

Om de gebruiker te vragen uw systeemeigen app te installeren, moet u twee eigenschappen toevoegen aan uw web-app-manifest, prefer_related_applications related_applications . 

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

De eigenschap prefer_related_applications vertelt de browser om de gebruiker te vragen uw eigen app te gebruiken in plaats van de web-app. Als u deze waarde niet instelt, of false , vraagt ​​de browser de gebruiker om in plaats daarvan de web-app te installeren.

related_applications is een array met een lijst met objecten die de browser vertellen over uw favoriete native applicatie. Elk object moet een platform en een id eigenschap bevatten. Waar het platform play is en de id uw Play Store-app-ID is.

Toon de installatieprompt

Om het installatiedialoogvenster weer te geven, moet u:

  1. Luister naar de beforeinstallprompt gebeurtenis.
  2. Laat de gebruiker weten dat uw native app kan worden geïnstalleerd met een knop of ander element dat een gebruikersgebaargebeurtenis genereert.
  3. Toon de prompt door prompt() aan te roepen voor de opgeslagen beforeinstallprompt gebeurtenis.

Luister naar beforeinstallprompt

Als aan de criteria wordt voldaan, activeert Chrome een beforeinstallprompt gebeurtenis. U kunt het gebruiken om aan te geven dat uw app kan worden geïnstalleerd en vervolgens de gebruiker vragen deze te installeren.

Wanneer de beforeinstallprompt gebeurtenis is geactiveerd, slaat u een verwijzing naar de gebeurtenis op en werkt u uw gebruikersinterface bij om aan te geven dat de gebruiker uw app kan installeren. 

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

Informeer de gebruiker dat uw app kan worden geïnstalleerd

De beste manier om de gebruiker te laten weten dat uw app kan worden geïnstalleerd, is door een knop of ander element aan uw gebruikersinterface toe te voegen. Geef geen interstitial of andere elementen op de volledige pagina weer die vervelend of afleidend kunnen zijn.

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

Laat de prompt zien

Om de installatieprompt weer te geven, roept u prompt() op voor de opgeslagen gebeurtenis vanuit een gebruikersgebaar. Er wordt een modaal dialoogvenster weergegeven waarin de gebruiker wordt gevraagd uw app aan zijn startscherm toe te voegen.

Luister vervolgens naar de belofte die wordt geretourneerd door de eigenschap userChoice . De belofte retourneert een object met een outcome nadat de prompt is weergegeven en de gebruiker erop heeft gereageerd.

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

U kunt prompt() slechts één keer aanroepen voor de uitgestelde gebeurtenis. Als de gebruiker deze negeert, moet u wachten tot de gebeurtenis beforeinstallprompt wordt geactiveerd in de navigatie op de volgende pagina.

Speciale overwegingen bij het gebruik van inhoudbeveiligingsbeleid

Als uw site een restrictief inhoudsbeveiligingsbeleid heeft, zorg er dan voor dat u *.googleusercontent.com toevoegt aan de img-src richtlijn, zodat Chrome het pictogram dat aan uw app is gekoppeld, kan downloaden uit de Play Store.

In sommige gevallen kan *.googleusercontent.com uitgebreider zijn dan gewenst. U kunt dit beperken door op afstand fouten op te sporen op een Android-apparaat om de URL van het app-pictogram te bepalen.