Da quando abbiamo lanciato per la prima volta il banner Aggiungi alla schermata Home, ci siamo adoperati per etichettare le Progressive Web App in modo più chiaro e semplificare il modo in cui gli utenti possono installarle. Il nostro obiettivo finale è fornire un pulsante di installazione nell'omnibox su tutte le piattaforme e in Chrome 68 stiamo apportando modifiche in tal senso.
Che cosa cambia
A partire da Chrome 68 su Android (versione stabile a luglio 2018), Chrome non mostrerà più il banner Aggiungi alla schermata Home. Se il sito soddisfa i criteri di aggiunta alla schermata Home, Chrome mostrerà la mini barra delle informazioni. Se l'utente fa clic sulla mini barra informativa o se chiami prompt() nell'evento beforeinstallprompt da un gesto dell'utente, Chrome mostrerà una finestra di dialogo modale per l'aggiunta alla schermata Home.
Banner A2HS Chrome 67 e versioni precedenti
Viene visualizzato automaticamente quando il sito soddisfa i criteri di aggiunta alla schermata Home e il sito non chiama preventDefault() nell'evento beforeinstallprompt
OPPURE
Viene visualizzato chiamando prompt() nell'evento
beforeinstallprompt.
Mini barra delle informazioni Chrome 68 e versioni successive
Se viene ignorata da un utente, non verrà mostrata finché non sarà trascorso un periodo di tempo sufficiente (~3 mesi).
Viene visualizzato indipendentemente dal fatto che preventDefault() sia stato chiamato
nell'evento beforeinstallprompt.
Questo trattamento dell'interfaccia utente verrà rimosso in una versione futura di Chrome quando verrà introdotto il pulsante di installazione nell'omnibox.
Dialogo A2HS
Viene visualizzato chiamando prompt() da un gesto dell'utente nell'evento beforeinstallprompt in Chrome 68 e versioni successive.
OPPURE
Viene visualizzata quando un utente tocca la mini barra delle informazioni in Chrome 68 e versioni successive.
OPPURE
Viene visualizzato dopo che l'utente fa clic su "Aggiungi alla schermata Home" nel menu di Chrome in tutte le versioni di Chrome.
La mini barra delle informazioni
La mini barra delle informazioni è un componente dell'interfaccia utente di Chrome e non è controllabile dal sito, ma può essere facilmente ignorata dall'utente. Una volta ignorato dall'utente, non verrà visualizzato di nuovo finché non sarà trascorso un periodo di tempo sufficiente (attualmente 3 mesi). La mini barra delle informazioni viene visualizzata quando il sito soddisfa i criteri di aggiunta alla schermata Home, indipendentemente dal fatto che tu abbia preventDefault() o meno nell'evento beforeinstallprompt.
Anziché chiedere all'utente di confermare al caricamento della pagina (un anti-pattern per le richieste di autorizzazione), puoi indicare che la tua app può essere installata con un po' di UI, che poi mostrerà la richiesta di installazione modale. Ad esempio, questa PWA per computer aggiunge un pulsante "Installa app" appena sopra il nome del profilo dell'utente.
La richiesta di installare la tua app in base a un gesto dell'utente sembra meno spam e aumenta la probabilità che l'utente faccia clic su "Aggiungi" anziché su "Annulla". Se incorpori un pulsante Installa nella tua app, anche se l'utente sceglie di non installarla oggi, il pulsante sarà ancora disponibile domani o quando sarà pronto per l'installazione.
Ascolto dell'evento beforeinstallprompt
Se il tuo sito soddisfa i criteri di aggiunta alla schermata Home, Chrome attiverà un evento beforeinstallprompt, salverà un riferimento all'evento e aggiornerà l'interfaccia utente per indicare che l'utente può aggiungere la tua app alla schermata Home.
let installPromptEvent;
window.addEventListener('beforeinstallprompt', event => {
// Prevent Chrome <= 67 from automatically showing the prompt
event.preventDefault();
// Stash the event so it can be triggered later.
installPromptEvent = event;
// Update the install UI to notify the user app can be installed
document.querySelector('#install-button').disabled = false;
});
L'evento beforeinstallprompt non verrà attivato se l'app è già installata (vedi i criteri di aggiunta alla schermata Home).
Tuttavia, se in un secondo momento l'utente disinstalla l'app, l'evento beforeinstallprompt verrà nuovamente attivato a ogni navigazione nella pagina.
Visualizzazione della finestra di dialogo con prompt()
Per visualizzare la finestra di dialogo Aggiungi alla schermata Home, chiama prompt() sull'evento salvato da un gesto dell'utente. Chrome mostrerà la finestra di dialogo modale, chiedendo all'utente di aggiungere la tua app alla schermata Home. Poi, ascolta la promessa restituita dalla proprietà userChoice dell'evento beforeinstallprompt. La promessa
restituisce un oggetto con una proprietà outcome dopo che la richiesta è stata visualizzata e
l'utente ha risposto.
btnInstall.addEventListener('click', () => {
// Update the install UI to remove the install button
document.querySelector('#install-button').disabled = true;
// Show the modal add to home screen dialog
installPromptEvent.prompt();
// Wait for the user to respond to the prompt
installPromptEvent.userChoice.then(choice => {
if (choice.outcome === 'accepted') {
console.log('User accepted the A2HS prompt');
} else {
console.log('User dismissed the A2HS prompt');
}
// Clear the saved prompt since it can't be used again
installPromptEvent = null;
});
});
Puoi chiamare prompt() nell'evento differito una sola volta. Se l'utente fa clic su Annulla nella finestra di dialogo, dovrai attendere che l'evento beforeinstallprompt venga attivato nella navigazione alla pagina successiva. A differenza delle richieste di autorizzazione tradizionali, fare clic su Annulla non bloccherà le chiamate future a prompt() perché questa chiamata deve essere eseguita all'interno di un gesto dell'utente.
Risorse aggiuntive
Consulta Banner di installazione di app per ulteriori informazioni, tra cui:
- Dettagli sull'evento
beforeinstallprompt - Monitoraggio della risposta dell'utente alla richiesta di aggiunta alla schermata Home
- Monitoraggio dell'installazione dell'app
- Determinare se la tua app è in esecuzione come app installata