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

Penny McLachlan
Penny McLachlan

Informazioni sulle app web progressive e sulla mini barra delle informazioni

Le app web progressive (PWA) sono un pattern per creare siti web affidabili, installabili e con caricamento istantaneo simili ad app.

Quando la tua PWA supera il elenco di controllo dell'installabilità su Android, nella parte inferiore della finestra del browser viene visualizzata una finestra di dialogo di sistema di Chrome chiamata mini barra delle informazioni.

Attualmente, la mini barra informativa Aggiungi a schermata Home viene visualizzata contemporaneamente all'evento beforeinstallprompt.

Modifiche in Chrome 76

Abbiamo ascoltato la nostra community e abbiamo appreso che gli sviluppatori vogliono avere 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() sull'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 ci ha comunicato che gli utenti che installano una PWA nella schermata Home sono molto coinvolti, con più visite ripetute, tempo trascorso nell'app e, se applicabile, 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 propria PWA. Consulta la sezione Aggiungi alla schermata Home per informazioni dettagliate sul flusso di aggiunta alla schermata Home, inclusi esempi di codice e altre best practice.

Per promuovere la tua app web senza la mini barra delle informazioni, ascolta l'eventobeforeinstallprompt e poi salvalo. Aggiorna poi l'interfaccia utente per indicare che la tua 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 mostrare la finestra di dialogo di dialogo di aggiunta alla schermata Home.

Futuro della mini barra delle informazioni Aggiungi alla schermata Home

L'utilizzo dell'infobar Aggiungi alla schermata Home è ancora una misura temporanea. Stiamo sperimentando nuovi pattern di UI che continueranno a offrire agli utenti delle app web progressive la possibilità di installare le app, riducendo al contempo il caos nell'esperienza di navigazione.