Rilevamento

Puoi rilevare se l'utente utilizza la tua PWA nel browser o in modalità autonoma. Sui browser basati su Chromium (Android e computer), puoi rilevare anche i seguenti eventi:

  • Stato e risultato della finestra di dialogo dell'invito all'installazione.
  • Installazione completata.
  • Trasferimento della navigazione dal browser alla finestra PWA e viceversa.
  • Stato di installazione della PWA.
  • App correlata installata da uno store.

Puoi usare questi dati per analisi, comprendere le preferenze dell'utente e personalizzare la sua esperienza. Per acquisire questi eventi, puoi utilizzare strumenti come le query sui contenuti multimediali, gli eventi di window o le API di funzionalità che puoi trovare elencate qui.

Rilevamento della modalità di visualizzazione

Per monitorare il modo in cui gli utenti avviano la tua PWA, puoi utilizzare matchMedia() per testare la query sui media 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)
    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';
}

window.addEventListener('DOMContentLoaded', () => {
  // Log launch display mode to analytics
  console.log('DISPLAY_MODE_LAUNCH:', getPWADisplayMode());
});

Se utilizzi questo esempio, ricordati di associarlo alla modalità di visualizzazione del manifest dell'app web, ad esempio standalone, minimal-ui o fullscreen. Puoi anche trovare una corrispondenza tra più query nella stringa di query supporti utilizzando condizioni separate da virgole.

Puoi anche aggiungere un parametro di query al valore start_url del file manifest che puoi acquisire con le analisi per monitorare le statistiche su quando, in che modo e in che misura viene utilizzata la tua PWA.

Installazione di app

Quando un utente accetta la richiesta di installazione nel browser, viene attivato l'evento appinstalled sui browser basati su Chromium. Questo gestore di eventi è molto utile per rimuovere eventuali promozioni per l'installazione in-app che hai aggiunto.

window.addEventListener('appinstalled', () => {
  // If visible, hide the install promotion
  hideInAppInstallPromotion();
  // Log install to analytics
  console.log('INSTALL: Success');
});

Ricorda che, sui dispositivi Android con WebAPK, l'evento viene attivato quando l'utente accetta la finestra di dialogo e non dopo che l'APK WebAPK è stato creato e installato. Potrebbe verificarsi un ritardo di alcuni secondi prima del completamento dell'installazione dell'app.

Il capitolo Richiesta di installazione spiega come rilevare se la richiesta di installazione è disponibile e quale scelta fa l'utente.

Trasferimento sessione

Gli utenti possono utilizzare la tua PWA nel browser e nella versione autonoma installata. Sui browser desktop, puoi trasferire la navigazione corrente tra questi contesti utilizzando badge o voci di menu, come illustrato nell'immagine seguente.

Trasferimento della navigazione tra una scheda del browser e una finestra della PWA.

Su Android, esiste un elemento di menu simile a quello del browser per computer che trasferisce la navigazione all'app. In questo caso, viene aperto l'URL corrente, ma si tratta di una nuova navigazione nella pagina dell'app.

Nella seguente immagine puoi vedere l'elemento del menu in Android quando l'app è già installata.

Chrome su Android mostra la voce di menu per aprire una nuova navigazione in una finestra PWA.

Trasferimento dopo l'installazione

Dai browser desktop, la navigazione corrente viene immediatamente trasferita all'app al momento dell'installazione. La scheda del browser viene chiusa e viene aperta l'app appena installata, continuando l'attività dell'utente.

Sui browser mobile, la navigazione corrente rimane nel browser quando installi l'app. Se gli utenti vogliono passare all'app, devono aprirla manualmente e si aprirà una nuova navigazione.

Rilevamento del trasferimento

Per rilevare il trasferimento tra browser e finestra, puoi utilizzare una query sui media:

window.addEventListener('DOMContentLoaded', () => {
  // 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());
    });
});

Isolamento dello spazio di archiviazione di iOS e iPadOS

Su iOS e iPadOS, non è possibile trasferire la navigazione o l'URL tra il browser e l'icona installata. Anche se si tratta della stessa PWA, ogni icona PWA installata dall'utente avrà il proprio spazio di archiviazione, isolato dalla scheda di Safari e da altre icone. Quando un utente apre l'icona installata, non viene condiviso alcuno spazio di archiviazione con Safari. Se la tua PWA richiede un accesso, l'utente dovrà accedere di nuovo. Se l'app è stata aggiunta alla schermata Home più volte, per ogni istanza PWA l'utente ha una sessione diversa.

Supporto dei browser

  • Chrome: non supportato.
  • Edge: non supportato.
  • Firefox: non supportato.
  • Safari: non supportato.

Origine

Un sito web indica una relazione con un'app tramite il file manifest. Per farlo, utilizza l'elemento related_applications della specifica Web App Manifest. La chiave related_applications è un array di oggetti che rappresentano ogni applicazione correlata. Ogni voce contiene platform, url e un valore facoltativo id.

Di seguito sono riportati i possibili valori della piattaforma:

  • chrome_web_store: Google Chrome Web Store.
  • play: app di Google Play (Android e ChromeOS).
  • chromeos_play: ChromeOS Play.
  • webapp: app web.
  • windows: Microsoft Store (Windows 10 e 11).
  • f-droid: F-droide.
  • amazon: Amazon AppStore (FireOS).

Quando l'utente installa un'app, puoi reindirizzarlo a un'app correlata se imposti il campo prefer_related_applications su true nel file manifest. Con questa configurazione, sui browser compatibili i flussi di installazione non installano la PWA, ma attivano un'installazione dal negozio da url o id specificato nella voce related_applications.

L'applicazione correlata potrebbe essere la tua PWA e verrà installata tramite uno store. Un vantaggio di questa configurazione è che, al momento, solo le app installate tramite l'app store vengono recuperate con un backup o quando passi a un nuovo dispositivo.

{
  ...
  "related_applications:" [
     {
       "platform": "play",
       "url": "https://play.google.com/..."
     }
  ],
  "prefer_related_applications": true
}

Banner app intelligenti di Apple

Safari non supporta l'elemento related_applications, ma offre Smart App Banners per le app nell'App Store. Pertanto, se vuoi promuovere una PWA o un'altra app che hai pubblicato nell'App Store, puoi includere meta tag nel codice HTML della PWA per invitare l'utente a installarla (vedi il link appena fornito) o trasferire la navigazione se è già installata.

Il metodo getInstalledRelatedApps() consente al tuo sito web di verificare se la tua app iOS/Android/desktop o la tua PWA è installata sul dispositivo dell'utente.

Controllare se è già installata un'app correlata ti aiuta a implementare funzionalità come nascondere i prompt installati in modo personalizzato o reindirizzare l'utente direttamente all'app installata, anziché a un sito web generico. Per utilizzare il metodo getInstalledRelatedApps(), sia l'app installata sia il sito web devono configurare la connessione tra loro. Ogni app, a seconda della piattaforma utilizzata, include metadati per riconoscere il sito web, che include l'app installata prevista nel campo related_applications del file manifest.

Strumenti come BubbleWrap o PWA Builder, che consentono di pubblicare la PWA negli store, aggiungono già i metadati richiesti per consentire al tuo sito web di utilizzare subito getInstalledRelatedApps(). Per rilevare se una PWA è già installata utilizzando getInstalledRelatedApps(), definisci webapp nel campo manifest related_applications con l'URL del manifest:

...
"related_applications": [{
   "platform": "webapp",
   "url": "https://example.com/manifest.json",
}],
...

getInstalledRelatedApps() restituisce un array di oggetti app. Se l'array è vuoto, l'app correlata non viene installata.

const relatedApps = await navigator.getInstalledRelatedApps();
const PWAisInstalled = relatedApps.length > 0;

Rileva l'installazione dall'esterno dell'ambito della PWA

Da Chrome su Android 89, puoi rilevare se una PWA è installata, anche al di fuori dell'ambito della PWA. La PWA deve impostare un file JSON all'interno della cartella /.well-known/, concedendo l'autorizzazione all'altro ambito, come descritto in questo articolo.

Risorse