Richiesta di installazione di app native

La richiesta di installazione dell'app nativa ti consente di consentire agli utenti di installare rapidamente e senza problemi la tua app nativa sul loro dispositivo direttamente dall'app store, senza uscire dal browser e senza mostrare un fastidioso popup.

Quali sono i criteri?

Per mostrare all'utente la richiesta di installazione dell'app nativa, il tuo sito deve soddisfare i seguenti criteri:

Quando soddisfi questi criteri, viene attivato un evento beforeinstallprompt. Puoi usarlo per chiedere all'utente di installare la tua app nativa.

Proprietà manifest obbligatorie

Per chiedere all'utente di installare la tua app nativa, devi aggiungere due proprietà al manifest dell'app web: prefer_related_applications e related_applications.

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

La proprietà prefer_related_applications indica al browser di chiedere all'utente di utilizzare la tua app nativa anziché l'app web. Se lasci questo valore non impostato o false, il browser chiederà all'utente di installare l'app web.

related_applications è un array con un elenco di oggetti che indicano al browser la tua applicazione nativa preferita. Ogni oggetto deve includere una proprietà platform e una proprietà id. dove platform è play e id è il tuo ID app del Play Store.

Mostrare la richiesta di installazione

Per visualizzare la finestra di dialogo di installazione, devi:

  1. Ascolta l'evento beforeinstallprompt.
  2. Comunica all'utente che la tua app nativa può essere installata con un pulsante o un altro elemento che genererà un evento gesto dell'utente.
  3. Per mostrare il prompt, chiama prompt() sull'evento beforeinstallprompt salvato.

Ascolta beforeinstallprompt

Se vengono soddisfatti i criteri, Chrome attiva un evento beforeinstallprompt. Puoi utilizzarlo per indicare che la tua app può essere installata e poi chiedere all'utente di installarla.

Una volta attivato l'evento beforeinstallprompt, salva un riferimento all'evento e aggiorna l'interfaccia utente per indicare che l'utente può installare l'app.

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

Comunica all'utente che la tua app può essere installata

Il modo migliore per informare l'utente che la tua app può essere installata è aggiungere un pulsante o un altro elemento all'interfaccia utente. Non mostrare un interstitial di pagina intera o altri elementi che potrebbero essere fastidiosi o distrarre.

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

Mostrare il prompt

Per mostrare la richiesta di installazione, chiama prompt() sull'evento salvato da un gesto dell'utente. Viene visualizzata una finestra di dialogo modale che chiede all'utente di aggiungere la tua app alla schermata Home.

Poi esamina la promessa restituita dalla proprietà userChoice. La promessa restituisce un oggetto con una proprietà outcome dopo che il prompt è stato visualizzato e l'utente ha risposto.

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

Puoi chiamare prompt() nell'evento differito una sola volta. Se l'utente lo ignora, dovrai attendere che venga attivato l'evento beforeinstallprompt al passaggio alla pagina successiva.

Considerazioni speciali per l'utilizzo dei criteri di sicurezza del contenuto

Se il tuo sito ha norme sulla sicurezza dei contenuti restrittive, assicurati di aggiungere *.googleusercontent.com alla direttiva img-src in modo che Chrome possa scaricare l'icona associata alla tua app dal Play Store.

In alcuni casi *.googleusercontent.com potrebbe essere più dettagliato del previsto. È possibile restringere la ricerca eseguendo il debug da remoto su un dispositivo Android per determinare l'URL dell'icona dell'app.