Installazione della barra degli indirizzi per le app web progressive sul desktop

Le app web progressive sono facili da installare grazie a un nuovo pulsante di installazione nella barra degli indirizzi di Chrome (omnibox).

Sui computer, in genere non viene indicato all'utente che un'app web progressiva è installabile e, in questo caso, il flusso di installazione è nascosto nel menu con tre puntini.

In Chrome 76 (beta a metà giugno 2019), semplificheremo l'installazione delle app web progressive sul desktop per gli utenti aggiungendo un pulsante di installazione alla barra degli indirizzi (omnibox). Se un sito soddisfa i criteri di installabilità delle app web progressive, Chrome mostrerà automaticamente un'icona di installazione nella barra degli indirizzi. Facendo clic sul pulsante, all'utente viene chiesto di installare la PWA.

Come per altri eventi di installazione, puoi rimanere in ascolto dell'evento appinstalled per rilevare se l'utente ha installato la tua PWA.

Aggiunta di una richiesta di installazione personalizzata

Se la tua PWA ha dei casi d'uso in cui è utile per un utente installare la tua app, ad esempio se hai utenti che utilizzano la tua app più di una volta alla settimana, dovresti promuovere l'installazione della PWA nell'interfaccia utente web dell'app.

Per aggiungere il tuo pulsante di installazione personalizzato, esamina l'evento beforeinstallprompt. Quando viene attivato, salva un riferimento all'evento e aggiorna l'interfaccia utente per far sapere all'utente che può installare la tua app web progressiva.

Modelli per promuovere l'installazione della PWA

Esistono tre modi principali per promuovere l'installazione della tua PWA:

  • Promozione automatica del browser, ad esempio il pulsante di installazione nella barra degli indirizzi.
  • Promozione dell'interfaccia utente dell'applicazione, in cui gli elementi UI appaiono nell'interfaccia dell'applicazione, ad esempio banner, pulsanti nell'intestazione o nel menu di navigazione e così via.
  • Pattern promozionali incorporati intreccia le promozioni nei contenuti del sito.

Per ulteriori dettagli, scopri i pattern per promuovere l'installazione di PWA (dispositivi mobili). Il suo obiettivo è i dispositivi mobili, ma molti dei pattern sono applicabili a computer o possono essere facilmente modificati per adattarli alle esperienze su computer.