Come offrire un'esperienza di installazione in-app personalizzata

Pete LePage

Molti browser ti consentono di abilitare e promuovere l'installazione della tua app web progressiva (PWA) direttamente nell'interfaccia utente. L'installazione (a volte nota in precedenza come "Aggiungi a schermata Home") consente agli utenti di installare la tua PWA sul tuo dispositivo mobile o computer. L'installazione di una PWA consente di aggiungerla al database di un utente Avvio app in modo che possa funzionare come qualsiasi altra app installata.

Oltre all'esperienza di installazione fornita dal browser, puoi fornire il tuo flusso di installazione personalizzato direttamente all'interno dell'app.

Quando valuti se promuovere l'installazione, valuta la modalità con cui gli utenti in genere usare la tua PWA. Ad esempio, se esiste un insieme di utenti che utilizza la tua PWA più volte alla settimana, questi utenti potrebbero trarre vantaggio dalla comodità aggiuntiva avviare l'app dalla schermata Home di uno smartphone o dal menu Start di un computer un intero sistema operativo. Anche alcune applicazioni di produttività e intrattenimento traggono vantaggio dallo spazio aggiuntivo creato rimuovendo le barre degli strumenti del browser finestra nelle modalità standalone o minimal-ui installate.

Prerequisiti

Prima di iniziare, assicurati che la tua PWA rispetti le requisiti di installabilità, che generalmente include la creazione di un file manifest dell'app web.

Promuovi l'installazione

Per dimostrare che la tua app web progressiva è installabile e per fornire una flusso di installazione in-app:

1. Ascolta l'evento beforeinstallprompt.
2. Salva l'evento beforeinstallprompt affinché possa attivare il flusso di installazione in un secondo momento.
3. Avvisa l'utente che la tua PWA è installabile e fornisci un pulsante o un'altra per avviare il flusso di installazione in-app.

Ascolta l'evento beforeinstallprompt

Se la tua app web progressiva soddisfa i criteri di installazione richiesti: il browser attiva un evento beforeinstallprompt. Salvare un riferimento all'evento. e aggiorna l'interfaccia utente per indicare che l'utente può installare la PWA.

// Initialize deferredPrompt for use later to show browser install prompt.
let deferredPrompt;

window.addEventListener('beforeinstallprompt', (e) => {
  // Prevent the mini-infobar from appearing on mobile
  e.preventDefault();
  // Stash the event so it can be triggered later.
  deferredPrompt = e;
  // Update UI notify the user they can install the PWA
  showInstallPromotion();
  // Optionally, send analytics event that PWA install promo was shown.
  console.log(`'beforeinstallprompt' event was fired.`);
});

Flusso di installazione in-app

Per offrire l'installazione in-app, fornisci un pulsante o un altro elemento dell'interfaccia su cui un utente può fare clic o toccare per installare l'app. Quando l'utente fa clic sull'elemento o toccato, chiama prompt() sull'evento beforeinstallprompt salvato (memorizzato deferredPrompt). Mostra all'utente una finestra di dialogo di installazione modale, che chiede per confermare che vogliono installare la tua PWA.

buttonInstall.addEventListener('click', async () => {
  // Hide the app provided install promotion
  hideInstallPromotion();
  // Show the install prompt
  deferredPrompt.prompt();
  // Wait for the user to respond to the prompt
  const { outcome } = await deferredPrompt.userChoice;
  // Optionally, send analytics event with outcome of user choice
  console.log(`User response to the install prompt: ${outcome}`);
  // We've used the prompt and can't use it again, throw it away
  deferredPrompt = null;
});

La proprietà userChoice è una promessa che si risolve con la scelta dell'utente. Puoi chiamare prompt() solo una volta sull'evento differito. Se l'utente lo ignora, dovrai attendere l'evento beforeinstallprompt si attiva di nuovo, in genere subito dopo la proprietà userChoice è stato risolto.

Rileva quando la PWA è stata installata correttamente

Puoi utilizzare la proprietà userChoice per determinare se l'utente ha installato o meno la tua app dall'interfaccia utente. Se invece l'utente installa la tua PWA dalla barra degli indirizzi o da un altro componente del browser, userChoice non ti aiuterà. Devi invece rimanere in ascolto dell'evento appinstalled, che viene attivato ogni volta che la tua PWA sia installata, indipendentemente dal meccanismo utilizzato per installarla.

window.addEventListener('appinstalled', () => {
  // Hide the app-provided install promotion
  hideInstallPromotion();
  // Clear the deferredPrompt so it can be garbage collected
  deferredPrompt = null;
  // Optionally, send analytics event to indicate successful install
  console.log('PWA was installed');
});

Rileva come è stata avviata la PWA

La query multimediale display-mode del CSS indica come è stata avviata la PWA, in in una scheda del browser o come PWA installata. In questo modo è possibile applicare a seconda di come è stata lanciata l'app. Ad esempio, puoi configurarla per nascondere sempre il pulsante di installazione e fornire un pulsante Indietro quando viene avviato come ha installato PWA.

Monitora come è stata lanciata la PWA

Per monitorare il modo in cui gli utenti avviano la tua PWA, usa matchMedia() per testare il display-mode query multimediale. Safari su iOS non supporta ancora questa funzionalità, quindi devi controlla navigator.standalone, che restituisce un valore booleano che indica se il browser sia in esecuzione in modalità autonoma.

function getPWADisplayMode() {
  const isStandalone = window.matchMedia('(display-mode: standalone)').matches;
  if (document.referrer.startsWith('android-app://')) {
    return 'twa';
  } else if (navigator.standalone || isStandalone) {
    return 'standalone';
  }
  return 'browser';
}

Monitoraggio dei cambiamenti della modalità di visualizzazione

Per monitorare se l'utente cambia tra standalone e browser tab, ascolta modifiche alla query multimediale display-mode.

window.matchMedia('(display-mode: standalone)').addEventListener('change', (evt) => {
  let displayMode = 'browser';
  if (evt.matches) {
    displayMode = 'standalone';
  }
  // Log display mode change to analytics
  console.log('DISPLAY_MODE_CHANGED', displayMode);
});

Aggiorna l'UI in base alla modalità di visualizzazione corrente

Per applicare un colore di sfondo diverso per una PWA quando viene avviata come istanza installata PWA, utilizza il CSS condizionale:

@media all and (display-mode: standalone) {
  body {
    background-color: yellow;
  }
}

Aggiornare l'icona e il nome dell'app

E se avessi bisogno di aggiornare il nome dell'app o di fornire nuove icone? Consulta In che modo Chrome gestisce gli aggiornamenti del file manifest dell'app web per vedere quando e come queste modifiche si riflettono in Chrome.