Rilevamento

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

• Stato e risultato della finestra di dialogo di invito all'installazione.
• Installazione terminata.
• 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 query supporti, eventi da window oppure le API con funzionalità disponibili qui elencate.

Rilevamento della modalità di visualizzazione in corso...

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

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

Se usi questo esempio, ricordati di far corrispondere la modalità di visualizzazione nel file 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, l'evento appinstalled viene attivato nei browser basati su Chromium. Questo gestore di eventi è molto utile per rimuovere qualsiasi promozione 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. L'installazione completa dell'app potrebbe richiedere alcuni secondi.

Il capitolo relativo alla richiesta di installazione spiega come rilevare se la richiesta di installazione è disponibile e quali scelte fa l'utente.

Trasferimento sessione

Gli utenti possono utilizzare la PWA all'interno del browser e nel formato autonomo installato. Sui browser desktop, puoi trasferire la navigazione corrente tra questi contesti utilizzando badge o voci di menu, come illustrato nell'immagine seguente.

Su Android è presente una voce di menu simile a quella del desktop dal browser che trasferisce la navigazione all'app. In questo caso, l'URL corrente viene aperto, ma sarà una nuova navigazione nelle pagine nell'app.

Nell'immagine di seguito puoi vedere la voce di menu in Android quando l'app è già installata.

Trasferimento dopo l'installazione

Dai browser desktop, la navigazione corrente viene immediatamente trasferita all'app al momento dell'installazione. La scheda del browser si chiude e l'app appena installata si apre, 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 tratterà di una nuova navigazione.

Rilevamento del trasferimento in corso...

Per rilevare il trasferimento tra il browser e la finestra, puoi utilizzare una query multimediale:

window.addEventListener('DOMContentLoaded', () => {
  // replace standalone with your display used in manifest
  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);
    });
});

Isolamento dello spazio di archiviazione di iOS e iPadOS

Su iOS e iPadOS, non avviene il trasferimento della navigazione o dell'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 spazio di archiviazione con Safari. Se la PWA richiede l'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. A tale scopo, utilizza il membro related_applications della specifica del file manifest per le app web. La chiave related_applications è un array di oggetti che rappresentano ogni applicazione correlata. Ogni voce contiene platform, url e un elemento id facoltativo.

Ecco i possibili valori della piattaforma:

• chrome_web_store: Google Chrome Web Store.
• play: app 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).

Preferisci 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 installeranno la PWA. ma attivano un'installazione dello store dal url o dal 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 lo 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 Apple

Safari non supporta i membri related_applications, ma offre banner per app intelligenti 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 installare l'app (vedi il link appena fornito) o trasferire la navigazione se è già installata.

Rilevamento delle app installate correlate in corso...

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

Verificare se un'app correlata è già installata ti aiuta a implementare funzionalità come nascondere prompt con installazione personalizzata o reindirizzare l'utente direttamente all'app installata anziché visitare 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 related_applications del file manifest con l'URL del file 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

• La tua app è installata? getInstallaRelatedApps() ti dirà.
• MDN: applicazioni correlate
• MDN: evento AppInstallato
• Apple: promuovere le app con i banner per app intelligenti