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:

Un evento beforeinstallprompt viene attivato quando soddisfi questi criteri. Tu 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 chiedere all'utente di installare 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 è l'ID app del Play Store.

Mostra richiesta di installazione

Per poter mostrare 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'altra app che genererà un evento gesto dell'utente.
  3. Mostra il prompt chiamando prompt() nell'evento beforeinstallprompt salvato.

Ascolta beforeinstallprompt

Se i criteri sono 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 viene attivato l'evento beforeinstallprompt, salva un riferimento all'evento e aggiorna l'interfaccia utente per indicare che l'utente può installare la tua 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 annuncio 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';
});

Mostrare il prompt

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

Poi, ascolta 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 un Content Security Policy restrittivo, 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 il campo tramite il debug remoto. un dispositivo Android per determinare l'URL dell'icona dell'app.