Da quando abbiamo lanciato per la prima volta il banner per l'aggiunta alla schermata Home, abbiamo lavorato per etichettare le app web progressive in modo più chiaro e semplificare il modo in cui gli utenti possono installarle. Il nostro obiettivo finale è quello di fornire un pulsante per l'installazione nella omnibox su tutte le piattaforme. In Chrome 68 apporteremo delle modifiche per raggiungere questo obiettivo.
Che cosa cambia
A partire da Chrome 68 su Android (stabile a luglio 2018), Chrome non mostrerà più il banner Aggiungi alla schermata Home. Se il sito soddisfa i
criteri Aggiungi alla schermata Home,
Chrome mostrerà la mini-barra delle informazioni. Dopodiché, se l'utente fa clic sulla mini-barra delle informazioni o chiami prompt() sull'evento beforeinstallprompt da un gesto dell'utente, Chrome mostrerà una finestra di dialogo modale di aggiunta alla schermata Home.
Banner A2HS Chrome 67 e versioni precedenti
Visualizzato automaticamente quando il sito soddisfa i criteri di aggiunta alla schermata Home
e il sito non chiama preventDefault() all'evento
beforeinstallprompt
OPPURE
Mostrato chiamando prompt()
per l'evento beforeinstallprompt.
Mini-bar delle informazioni Chrome 68 e versioni successive
Se ignorata da un utente, non verrà mostrata finché non sarà trascorso un periodo di tempo sufficiente (circa 3 mesi).
Visualizzato indipendentemente dal fatto che preventDefault() sia stato chiamato
all'evento beforeinstallprompt.
Questa opzione di interfaccia utente verrà rimossa in una versione futura di Chrome quando verrà introdotto il pulsante di installazione nella omnibox.
Finestra di dialogo A2HS
Visualizzato chiamando prompt() dall'interno di un gesto dell'utente nell'evento beforeinstallprompt in Chrome 68 e versioni successive.
OPPURE
Queste notifiche vengono mostrate quando un utente tocca la mini-infobar in Chrome 68 e versioni successive.
OPPURE
Visualizzato dopo che l'utente fa clic su "Aggiungi a schermata Home" dal menu Chrome in tutte le versioni di Chrome.
La mini-infobar
La mini-infobar è 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à più visualizzato finché non sarà trascorso un periodo di tempo sufficiente (attualmente 3 mesi). La mini-infobar viene visualizzata quando il sito soddisfa i
criteri di aggiunta alla schermata Home,
indipendentemente dal fatto che tu preventDefault() o meno
all'evento beforeinstallprompt.
Invece di chiedere all'utente durante il caricamento della pagina (un anti-pattern per le richieste di autorizzazione), puoi indicare che la tua app può essere installata con una UI, che mostrerà la richiesta di installazione modale. Ad esempio, questa PWA desktop aggiunge un pulsante "Installa app" appena sopra il nome del profilo dell'utente.
La richiesta di installazione dell'app con un gesto dell'utente genera meno spam per l'utente e aumenta la probabilità che l'utente faccia clic su "Aggiungi" anziché su "Annulla". L'integrazione di un pulsante Installa nell'app significa che, anche se l'utente sceglie di non installare l'app oggi, il pulsante sarà comunque disponibile domani o ogni volta che sarà pronto per l'installazione.
In 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 propria 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 Aggiungi alla schermata Home).
Tuttavia, se in un secondo momento l'utente disinstalla l'app, l'evento beforeinstallprompt verrà riattivato a ogni navigazione nelle pagine.
Visualizzazione della finestra di dialogo con prompt()
Per mostrare 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, invitando
l'utente ad aggiungere la tua app alla schermata Home. Poi esamina la promessa restituita dalla proprietà userChoice dell'evento beforeinstallprompt. La promessa restituisce un oggetto con una proprietà outcome dopo la visualizzazione del prompt e la risposta dell'utente.
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 richiamare prompt() sull'evento differito solo una volta. Se l'utente fa clic su Annulla nella finestra di dialogo, dovrai attendere fino a quando l'evento beforeinstallprompt non verrà attivato nella navigazione nella pagina successiva. A differenza delle
richieste di autorizzazione tradizionali, facendo clic su Annulla non bloccherai le chiamate future a prompt(), perché
la chiamata deve essere richiamata tramite un gesto dell'utente.
Altre risorse
Consulta i banner di installazione di app per ulteriori informazioni, tra cui:
- Dettagli sull'evento
beforeinstallprompt - Monitoraggio della risposta dell'utente alla richiesta di aggiunta della schermata Home
- Monitoraggio dell'eventuale installazione dell'app
- Determinare se l'app è installata come app installata