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:
- Né l'app web né l'app nativa attualmente installate sul dispositivo.
- Include un file manifest dell'app web che include:
short_name
name
(utilizzato nel prompt del banner)icons
, inclusa una versione da 192 px e una da 512 pxprefer_related_applications
ètrue
- Oggetto
related_applications
con informazioni sull'app
- Pubblicato tramite HTTPS
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"
}
]
prefer_related_applications
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
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:
- Ascolta l'evento
beforeinstallprompt
. - 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.
- Mostra il prompt chiamando
prompt()
nell'eventobeforeinstallprompt
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.