In Chrome 76 puoi nascondere la mini-barra delle informazioni della schermata Aggiungi a Home

Penny McLachlan
Penny McLachlan
X GitHub

Informazioni generali sulle app web progressive e sulla mini barra delle informazioni

Le app web progressive (PWA) sono un modello per la creazione di siti web simili a quelli di un'app, a caricamento istantaneo, affidabili e installabili.

Quando la PWA supera l'elenco di controllo per l'installazione su Android, nella parte inferiore della finestra del browser viene visualizzata una finestra di dialogo del sistema Chrome denominata mini barra delle informazioni.

Oggi la mini-barra delle informazioni di Aggiungi alla schermata Home viene mostrata contemporaneamente all'evento beforeinstallprompt.

Modifiche in Chrome 76

Dopo aver ascoltato la nostra community, gli sviluppatori hanno bisogno di un maggiore controllo su quando chiedere agli utenti di installare una PWA. Abbiamo ascoltato gli utenti.

A partire da Chrome 76, puoi impedire la mini-barra delle informazioni chiamando preventDefault() durante l'evento beforeinstallprompt.

L'evento beforeinstallprompt può aiutarti a promuovere l'installazione della tua app web progressiva, consentendo agli utenti di aggiungerla facilmente alla schermata Home. La nostra community ha comunicato che gli utenti che installano una PWA sulla schermata Home sono molto coinvolti, con più visite ripetute, tempo trascorso nell'app e, se possibile, tassi di conversione più elevati.

Esempio di Pinterest che utilizza un banner di installazione per promuovere l'installabilità della sua PWA.
Esempio di Pinterest che utilizza un banner di installazione per promuovere l'installabilità della sua PWA. Per i dettagli completi sul flusso di aggiunta alla schermata Home, tra cui esempi di codice e altre best practice, consulta la sezione Aggiunta alla schermata Home.

Per promuovere la tua app web senza la mini-infobar, ascolta l'evento beforeinstallprompt, quindi salvalo. A questo punto, aggiorna l'interfaccia utente per indicare che la PWA può essere installata, ad esempio aggiungendo un pulsante di installazione, mostrando un banner di installazione, utilizzando promozioni in-feed o un'opzione di menu. Quando l'utente fa clic sull'elemento di installazione, chiama prompt() sull'evento beforeinstallprompt salvato per visualizzare la finestra di dialogo modale di Aggiungi alla schermata Home.

Mini-infobar del futuro della schermata Aggiungi a Home

L'utilizzo della barra delle informazioni per l'aggiunta alla schermata Home è ancora una misura temporanea. Stiamo sperimentando nuovi pattern di interfaccia utente che continueranno a offrire agli utenti delle app web progressive la possibilità di installarli, riducendo l'ingombro nell'esperienza di navigazione.