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).

Sul computer, in genere non viene fornita alcuna indicazione 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), stiamo semplificando l'installazione delle app web progressive su computer 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. Se fa clic sul pulsante, all'utente viene chiesto di installare la PWA.

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

Aggiungere un prompt di installazione personalizzato

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

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

Pattern per promuovere l'installazione della tua 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 dell'interfaccia utente vengono visualizzati nell'interfaccia dell'applicazione, ad esempio banner, pulsanti nell'intestazione o nel menu di navigazione e così via.
  • I pattern promozionali in linea intrecciano le promozioni all'interno dei contenuti del sito.

Per ulteriori dettagli, consulta i pattern per la promozione dell'installazione di PWA (dispositivi mobili). Il suo obiettivo è il mobile, ma molti dei pattern sono applicabili anche ai computer o possono essere facilmente modificati per funzionare su queste piattaforme.