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 della PWA e viceversa.
• Stato di installazione della PWA.
• App correlata installata da uno store.

Puoi utilizzare questi dati per le analisi, per comprendere le preferenze degli utenti e per personalizzare la loro 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 associare più query nella stringa di query multimediale utilizzando condizioni separate da virgole.

Puoi anche aggiungere un parametro di query a start_url del manifest che puoi acquisire con gli analytics 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. Un ottimo utilizzo di questo gestore di eventi è rimuovere eventuali promozioni di 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 la coniazione e l'installazione del WebAPK. 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 forma autonoma installata. Sui browser desktop, puoi trasferire la navigazione corrente tra questi contesti utilizzando badge o voci di menu, come mostrato nell'immagine seguente.

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.

Trasferimento dopo l'installazione

Dai browser desktop, la navigazione corrente viene trasferita immediatamente 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 dalle 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.

Applicazioni correlate

Un sito web indica una relazione con un'app tramite il file manifest. Per farlo, utilizza il 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 id facoltativo.

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-Droid.
• amazon: Amazon AppStore (FireOS).

Preferire un'app correlata

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 che hai 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.

Rilevamento di app installate correlate

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, include metadati per riconoscere il sito web e il sito web include l'app installata prevista nel campo related_applications del manifest.

Strumenti come BubbleWrap o PWA Builder, che ti consentono di pubblicare la tua PWA negli store, aggiungono già i metadati richiesti per consentire al tuo sito web di utilizzare getInstalledRelatedApps() immediatamente. 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 è installata.

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

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

Da Chrome su Android 89, puoi rilevare se è installata una PWA, anche al di fuori del suo ambito. 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

• La tua app è installata? getInstalledRelatedApps() te lo dirà.
• MDN: Related Applications
• MDN: evento AppInstalled
• Apple: promuovere le app con gli smart banner per app