Da quando abbiamo lanciato il banner Aggiungi alla schermata Home, abbiamo lavorato per etichettare le app web progressive in modo più chiaro e semplificare la modalità di installazione per gli utenti. Il nostro obiettivo finale è fornire un pulsante di installazione nella omnibox su tutte le piattaforme e in Chrome 68 stiamo apportando 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 di aggiunta alla schermata Home,
Chrome mostrerà la mini barra delle informazioni. Se l'utente fa clic sulla
mini-barra delle informazioni o se chiami prompt() sull'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
Visualizzato automaticamente quando il sito soddisfa i criteri di aggiunta alla schermata Home
e il sito non chiama preventDefault() sull'evento
beforeinstallprompt
OPPURE
Mostrato chiamando prompt() all'evento
beforeinstallprompt.
Mini-barra delle informazioni Chrome 68 e versioni successive
Se viene ignorato da un utente, non verrà mostrato finché non sarà trascorso un periodo di tempo sufficiente (~3 mesi).
Visualizzato indipendentemente dal fatto che preventDefault() sia stato chiamato
nell'evento beforeinstallprompt.
Questo trattamento della UI verrà rimosso in una versione futura di Chrome quando verrà introdotto il pulsante di installazione della omnibox.
A2HS Dialog
Visualizzato chiamando prompt() dall'interno di un gesto dell'utente sull'evento beforeinstallprompt in Chrome 68 e versioni successive.
OPPURE
Viene visualizzato quando un utente tocca la mini-barra delle informazioni in Chrome 68 e versioni successive.
OPPURE
Visualizzato dopo che l'utente ha fatto clic su "Aggiungi a schermata Home" dal 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 chiusa dall'utente. Una volta chiuso dall'utente, non verrà più visualizzato 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 preventDefault() sull'evento beforeinstallprompt
o meno.
Anziché chiedere all'utente di installare l'app al caricamento della pagina (un anti-pattern per le richieste di autorizzazione), puoi indicare che l'app può essere installata con una determinata UI, che mostrerà il prompt 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 installazione dell'app in seguito a un gesto dell'utente risulta meno spam e aumenta la probabilità che l'utente faccia clic su "Aggiungi" anziché su "Annulla". L'incorporamento di un pulsante Installa nell'app significa che, anche se l'utente sceglie di non installare l'app oggi, il pulsante sarà comunque presente domani o quando 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
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 l'utente disinstalla l'app in un secondo momento, l'evento beforeinstallprompt verrà
nuovamente attivato a ogni navigazione della pagina.
Visualizzazione della finestra di dialogo con prompt()
Per mostrare la finestra di dialogo Aggiungi alla schermata Home, chiama prompt() sull'evento salvato da
all'interno di 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 il prompt è stato mostrato 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() sull'evento posticipato una sola volta. Se l'utente fa clic su
Annulla nella finestra di dialogo, devi attendere l'attivazione dell'evento beforeinstallprompt
alla successiva navigazione della pagina. A differenza delle richieste di autorizzazione tradizionali, se fai clic su Annulla, le chiamate future a prompt() non verranno bloccate perché
la chiamata deve essere chiamata all'interno di un gesto dell'utente.
Risorse aggiuntive
Per saperne di più, consulta Banner di installazione delle app, dove troverai informazioni su:
- Dettagli sull'evento
beforeinstallprompt - Monitoraggio della risposta dell'utente al prompt di aggiunta alla schermata Home
- Monitoraggio dell'installazione dell'app
- Determinare se l'app viene eseguita come app installata