Come offrire un'esperienza di installazione in-app personalizzata

Pete LePage

Pubblicato: 14 febbraio 2020

Molti browser ti consentono di attivare e promuovere l'installazione della tua app web progressiva (PWA) direttamente all'interno della sua interfaccia utente. L'installazione (precedentemente denominata Aggiungi alla schermata Home) consente agli utenti di aggiungere la tua PWA al proprio dispositivo mobile o desktop. L'installazione di una PWA la aggiunge all'Avvio app di un utente, in modo che possa essere eseguita 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.

Il pulsante "Installa app" fornito nella PWA di Spotify.

Quando valuti se promuovere l'installazione, considera come gli utenti utilizzano in genere la tua PWA. Ad esempio, se un gruppo di utenti utilizza la tua PWA più volte alla settimana, questi utenti potrebbero trarre vantaggio dalla maggiore comodità di avviare l'app dalla schermata Home di uno smartphone o dal menu Start di un sistema operativo desktop. Anche alcune applicazioni di produttività e intrattenimento traggono vantaggio dallo spazio aggiuntivo dello schermo creato rimuovendo le barre degli strumenti del browser dalla finestra nelle modalità standalone, minimal-ui o window-control-overlay installate.

Prerequisiti

Prima di iniziare, assicurati che la tua PWA soddisfi i requisiti di installabilità, che in genere includono un manifesto dell'app web.

Promuovere l'installazione

Per mostrare che la tua app web progressiva è installabile e per fornire un flusso di installazione in-app personalizzato:

  1. Ascolta l'evento beforeinstallprompt.
  2. Salva l'evento beforeinstallprompt in modo che 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 altro elemento 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. Salva un riferimento all'evento e aggiorna l'interfaccia utente per indicare che l'utente può installare la tua 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 fornire l'installazione in-app, fornisci un pulsante o un altro elemento dell'interfaccia su cui un utente può fare clic o toccare per installare la tua app. Quando si fa clic o si tocca l'elemento, chiama prompt() sull'evento beforeinstallprompt salvato (memorizzato nella variabile deferredPrompt). Mostra all'utente una finestra di dialogo modale di installazione che gli chiede di confermare l'installazione della 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() per l'evento posticipato una sola volta. Se l'utente lo ignora, dovrai attendere che l'evento beforeinstallprompt venga attivato di nuovo, in genere subito dopo la risoluzione della proprietà userChoice.

Rilevare quando la PWA è stata installata correttamente

Puoi utilizzare la proprietà userChoice per determinare se l'utente ha installato la tua app dall'interfaccia utente. Tuttavia, se l'utente installa la tua PWA dalla barra degli indirizzi o da un altro componente del browser, userChoice non sarà d'aiuto. Dovresti invece ascoltare l'evento appinstalled, che viene attivato ogni volta che la tua PWA viene installata, indipendentemente dal meccanismo utilizzato per l'installazione.

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');
});

Rilevare come è stata avviata la PWA

La media query CSS display-mode indica come è stata avviata la PWA, in una scheda del browser o come PWA installata. In questo modo è possibile applicare stili diversi a seconda di come è stata avviata l'app. Ad esempio, puoi configurarlo in modo che nasconda sempre il pulsante di installazione e fornisca un pulsante Indietro quando viene avviato come PWA installata.

Monitorare l'avvio della PWA

Per monitorare il modo in cui gli utenti avviano la tua PWA, utilizza matchMedia() per testare la query multimediale display-mode.

function getPWADisplayMode() {
  if (document.referrer.startsWith('android-app://'))
    return 'twa';
  if (window.matchMedia('(display-mode: browser)').matches)
    return 'browser';
  if (window.matchMedia('(display-mode: standalone)').matches || navigator.standalone)
    return 'standalone';
  if (window.matchMedia('(display-mode: minimal-ui)').matches)
    return 'minimal-ui';
  if (window.matchMedia('(display-mode: fullscreen)').matches)
    return 'fullscreen';
  if (window.matchMedia('(display-mode: window-controls-overlay)').matches)
    return 'window-controls-overlay';

  return 'unknown';
}

Tieni traccia di quando cambia la modalità di visualizzazione

Per monitorare se l'utente passa da browser ad altre modalità di visualizzazione, ascolta le modifiche alla media query display-mode.

// Replace "standalone" with the display mode used in your manifest
window.matchMedia('(display-mode: standalone)').addEventListener('change', () => {
  // Log display mode change to analytics
  console.log('DISPLAY_MODE_CHANGED', getPWADisplayMode());
});

Aggiorna la UI in base alla modalità di visualizzazione attuale

Per applicare un colore di sfondo diverso a una PWA quando viene avviata come PWA installata, utilizza CSS condizionali:

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

Aggiornare l'icona e il nome dell'app

Cosa succede se devi aggiornare il nome dell'app o fornire nuove icone? Consulta l'articolo Come Chrome gestisce gli aggiornamenti del manifest dell'app web per scoprire quando e come queste modifiche vengono applicate in Chrome.