Richiesta di installazione

Gli utenti potrebbero non avere familiarità con la procedura di installazione della PWA. In qualità di sviluppatore, capirai quando è il momento giusto per invitare l'utente a installare l'app. Anche le richieste di installazione del browser predefinito possono essere migliorate. Diamo un'occhiata agli strumenti disponibili.

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 a schermata Home a una finestra di dialogo più grande e dettagliata, come per le richieste di installazione da uno store.

Guarda i campi promozionali in azione:

L'evento beforeinstallprompt

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

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

Controlla il codice riportato di seguito per un esempio di listener di eventi per l'evento beforeinstallprompt, la relativa acquisizione e il successivo utilizzo personalizzato.

// 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();
});

A questo punto, se l'utente fa clic sul pulsante di installazione personalizzato, utilizza la deferredPrompt che è stata salvata in precedenza e chiama il metodo prompt(), perché l'utente deve ancora eseguire la procedura del browser per installare l'app. Hai ritardato l'evento fino a quando non hai fornito all'utente il contesto giusto per incoraggiarlo a installare la PWA.

Registrando l'evento avrai l'opportunità di aggiungere suggerimenti e incentivi agli utenti per installare la tua app, nonché di scegliere di richiedere l'installazione quando sai che gli utenti sono più coinvolti.

L'evento non si attiverà se:

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

Il posto migliore per chiedere

La posizione in cui pubblicare la richiesta dipende dall'applicazione e da quando gli utenti interagiscono maggiormente con i tuoi contenuti e servizi. Quando acquisisci beforeinstallprompt, puoi guidare gli utenti tra i motivi per continuare a utilizzare la tua app e i vantaggi che avranno dalla sua installazione. Puoi scegliere di mostrare i suggerimenti di installazione in qualsiasi punto dell'app. Alcuni schemi comuni sono: nel menu laterale, dopo un percorso dell'utente critico, come il completamento di un ordine, o dopo una pagina di registrazione. Per saperne di più, consulta la sezione Pattern per promuovere l'installazione di PWA.

Raccolta di dati e analisi

L'utilizzo di Analytics ti aiuterà a capire meglio dove e quando presentare i tuoi prompt. Puoi utilizzare la proprietà userChoice dall'evento beforeinstallprompt. userChoice è una promessa che si risolverà 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 (computer o Android).

Fallback

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

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

Per eseguire il rendering dell'elemento solo in modalità browser, utilizza la query multimediale display-mode:

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

Codelab

Biblioteche

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

Risorse