Richiesta di installazione

Gli utenti potrebbero non avere familiarità con il processo di installazione della PWA. In qualità di sviluppatore, saprai quando è il momento giusto per invitare l'utente a installare l'app. Anche le richieste di installazione del browser predefinito possono essere migliorate. Vediamo gli strumenti a disposizione.

Miglioramento della finestra di dialogo di installazione in corso...

I browser forniscono richieste di installazione predefinite quando le PWA superano i criteri di installazione. Il browser utilizza le proprietà name e icons del file manifest dell'app web per creare il prompt.

Richiesta di installazione di Microsoft Edge.

Alcuni browser migliorano l'esperienza della richiesta di installazione utilizzando i campi promozionali nel file manifest, tra cui description, categories e screenshots. Ad esempio, se usi Chrome su Android, se la tua PWA fornisce valori per i campi description e screenshots, l'esperienza della finestra di dialogo di installazione si trasforma da una piccola barra delle informazioni Aggiungi alla schermata Home a una finestra di dialogo più grande e dettagliata, simile alle richieste di installazione di uno store.

Guarda i campi promozionali in azione:

L'evento beforeinstallprompt

Le richieste di installazione del browser sono il primo passaggio per indurre gli utenti a installare la tua PWA. Per implementare la tua esperienza di installazione, la tua app deve comunque soddisfare i criteri di installazione: quando il browser rileva che l'app è installabile, attiva l'evento beforeinstallprompt. Devi implementare questo gestore di eventi per personalizzare l'esperienza utente. Ecco come:

  1. Ascolta l'evento beforeinstallprompt.
  2. Salvalo (ti servirà in un secondo momento).
  3. Attivalo dalla tua UI.

Controlla il codice seguente per un esempio di listener di eventi per l'evento beforeinstallprompt, la relativa acquisizione e l'utilizzo personalizzato in un secondo momento.

// This variable will save the event for later use.
let deferredPrompt;
window.addEventListener('beforeinstallprompt', (e) => {
  // Prevents the default mini-infobar or install dialog from appearing on mobile
  e.preventDefault();
  // Save the event because you'll need to trigger it later.
  deferredPrompt = e;
  // Show your customized install prompt for your PWA
  // Your own UI doesn't have to be a single element, you
  // can have buttons in different locations, or wait to prompt
  // as part of a critical journey.
  showInAppInstallPromotion();
});

Quindi, se l'utente fa clic sul pulsante di installazione personalizzato, utilizza l'deferredPrompt che è stato salvato in precedenza e chiama il relativo metodo prompt(), perché l'utente deve ancora eseguire il processo del browser per installare la tua app. Hai fatto ritardare l'evento finché non hai fornito all'utente il contesto corretto per incoraggiarlo a installare la PWA.

La registrazione dell'evento ti offre l'opportunità di aggiungere suggerimenti e incentivi per incoraggiare gli utenti a installare la tua app e di scegliere di richiedere l'installazione quando sai che gli utenti sono più coinvolti.

L'evento non verrà attivato se:

  • L'utente ha già installato l'attuale PWA (valida solo per desktop e WebAPK su Android).
  • L'app non soddisfa i criteri di installazione PWA.
  • La PWA non è installabile sul dispositivo corrente per altri motivi (ad esempio, un dispositivo in modalità kiosk o senza autorizzazioni).

Il posto migliore per inviare prompt

La posizione dei prompt dipende dall'applicazione e dal momento in cui gli utenti sono maggiormente coinvolti con i contenuti e i servizi. Quando acquisisci beforeinstallprompt, puoi illustrare agli utenti i motivi per continuare a utilizzare la tua app e i vantaggi che possono trarre dall'installazione. Puoi scegliere di visualizzare i suggerimenti di installazione ovunque nella tua app. Alcuni modelli comuni sono: nel menu laterale, dopo un percorso dell'utente fondamentale, come il completamento di un ordine, o dopo una pagina di registrazione. Puoi scoprire di più in merito in Pattern per promuovere l'installazione di PWA.

Raccolta di dati e analisi

L'utilizzo di dati e analisi ti aiuterà a capire meglio dove e quando presentare i tuoi prompt. Puoi utilizzare la proprietà userChoice dell'evento beforeinstallprompt; userChoice è una promessa che verrà risolta con l'azione eseguita dall'utente.

// Gather the data from your custom install UI event listener
installButton.addEventListener('click', async () => {
  // deferredPrompt is a global variable we've been using in the sample to capture the `beforeinstallevent`
  deferredPrompt.prompt();
  // Find out whether the user confirmed the installation or not
  const { outcome } = await deferredPrompt.userChoice;
  // The deferredPrompt can only be used once.
  deferredPrompt = null;
  // Act on the user's choice
  if (outcome === 'accepted') {
    console.log('User accepted the install prompt.');
  } else if (outcome === 'dismissed') {
    console.log('User dismissed the install prompt');
  }
});

Guarda come funziona

Prova il seguente esempio in azione su un browser Chromium (desktop o Android).

Fallback

Se il browser non supporta beforeinstallprompt o se l'evento non viene attivato, non esiste un altro modo per attivare la richiesta di installazione del browser. Tuttavia, puoi mostrare queste istruzioni all'utente sulle piattaforme che consentono all'utente di installare manualmente le PWA, come iOS.

Dovresti visualizzare queste istruzioni soltanto in modalità browser; altre opzioni di visualizzazione, come standalone o fullscreen, indicano che l'utente ha già installato l'app.

Per visualizzare l'elemento solo in modalità browser, utilizza la query multimediale display-mode:

#installInstructions {
   display: none
}
@media (display-mode: browser) {
   #installInstructions {
     display: block
   }
}

Codelab

Librerie

Consulta queste librerie per assistenza con il rendering di una richiesta di installazione personalizzata:

Risorse