Richiesta di installazione di app native

La richiesta di installazione dell'app nativa offre la possibilità di consentire agli utenti di installare in modo rapido e senza interruzioni la tua app nativa sul loro dispositivo direttamente dall'app store, senza uscire dal browser e senza mostrare un fastidioso interstitial.

Quali sono i criteri?

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

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

Proprietà manifest obbligatorie

Per richiedere all'utente di installare la tua app nativa, devi aggiungere due proprietà al file 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 richiedere all'utente con la tua app nativa anziché con l'app web. Se non imposti questo valore o false, il browser chiederà all'utente di installare l'app web.

related_applications è un array con un elenco di oggetti che comunicano al browser la tua applicazione nativa preferita. Ogni oggetto deve includere una proprietà platform e una proprietà id. Dove platform è play e id è l'ID dell'app del Play Store.

Mostra 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 di gesto dell'utente.
  3. Mostra la richiesta chiamando prompt() nell'evento beforeinstallprompt salvato.

Ascolta beforeinstallprompt

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

Quando l'evento beforeinstallprompt è stato attivato, 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 consiste nell'aggiungere un pulsante o un altro elemento all'interfaccia utente. Non mostrare un interstitial a 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';
});

Mostra la richiesta

Per mostrare la richiesta di installazione, chiama prompt() nell'evento salvato da un gesto dell'utente. Verrà mostrata una finestra di dialogo modale in cui viene chiesto all'utente di aggiungere la tua app alla schermata Home.

Quindi, ascolta la promessa restituita dalla proprietà userChoice. La promessa restituisce un oggetto con una proprietà outcome dopo che la richiesta è stata visualizzata 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() solo una volta nell'evento differito. Se l'utente lo ignora, dovrai attendere fino all'attivazione dell'evento beforeinstallprompt nella navigazione nella pagina successiva.

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

Se il tuo sito ha norme sulla sicurezza del contenuto restrittive, assicurati di aggiungere *.googleusercontent.com all'istruzione img-src per consentire a Chrome di scaricare l'icona associata alla tua app dal Play Store.

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