Puoi rilevare se l'utente sta utilizzando la 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 dell'invito all'installazione.
- Installazione terminata.
- Trasferimento della navigazione dal browser alla finestra della PWA e viceversa.
- Stato dell'installazione della PWA.
- App correlata installata da uno store.
Puoi utilizzare questi dati per l'analisi, per comprendere le preferenze degli utenti e per personalizzare la sua esperienza. Per acquisire questi eventi, puoi utilizzare strumenti come query supporti, eventi da window o usare le API per le funzionalità elencate qui.
Rilevamento della modalità di visualizzazione in corso...
Per monitorare in che modo 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 utilizzi questo esempio, ricordati di associare la modalità di visualizzazione del file manifest dell'app web, ad esempio standalone, minimal-ui o fullscreen. Puoi anche trovare corrispondenze con più query nella stringa di query supporti utilizzando condizioni separate da virgole.
Puoi anche aggiungere un parametro di query all'start_url del manifest che puoi acquisire con dati e analisi per monitorare le statistiche su quando, in che modo e quanto 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 può essere utilizzato molto bene 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');
});
Tieni presente che sui dispositivi Android con WebAPK, l'evento viene attivato quando l'utente accetta la finestra di dialogo e non dopo la creazione e l'installazione del WebAPK. Potrebbe verificarsi un ritardo di alcuni secondi prima che l'app sia completamente installata.
Il capitolo Richiesta di installazione spiega come rilevare la disponibilità della richiesta di installazione e le scelte effettuate dall'utente.
Trasferimento sessione
Gli utenti possono utilizzare la PWA all'interno del browser e nella versione autonoma installata. Sui browser desktop, puoi trasferire la navigazione corrente tra questi contesti utilizzando i badge o le voci di menu, come mostrato nell'immagine seguente.
Su Android è presente una voce di menu simile a quella sul desktop del browser che trasferisce la navigazione all'app. In questo caso, l'URL corrente si apre, ma sarà una nuova navigazione nelle pagine nell'app.
Nell'immagine seguente puoi vedere la voce di menu in Android quando l'app è già installata.
Trasferisci dopo l'installazione
Nei browser desktop, la navigazione corrente viene immediatamente trasferita all'app al momento dell'installazione. La scheda del browser viene chiusa e l'app appena installata viene aperta, continuando a svolgere le operazioni eseguite dall'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
Per rilevare il trasferimento tra il browser e la finestra, puoi utilizzare una query supporti:
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 c'è navigazione o trasferimento di URL tra il browser e l'icona installata. Anche se si tratta della stessa PWA, ogni icona di 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, lo spazio di archiviazione non viene condiviso con Safari. Se la 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 membro related_applications della specifica del manifest dell'app web.
La chiave related_applications è un array di oggetti che rappresentano ogni applicazione correlata. Ogni voce contiene platform, url e un 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).
Preferisco 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, nei browser compatibili i flussi di installazione non installano la PWA, ma attivano un'installazione dello store dal url o id specificato nella voce related_applications.
L'applicazione correlata potrebbe essere la tua PWA, che 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 si passa 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 il membro 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 dei 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
Il metodo getInstalledRelatedApps() consente al tuo sito web di controllare se la tua app iOS/Android/desktop o PWA è installata sul dispositivo dell'utente.
Controllare se un'app correlata è già installata ti aiuta a implementare funzionalità come nascondere le richieste di installazione personalizzata o reindirizzare l'utente direttamente all'app installata, anziché visitare un sito web per uso generico.
Per utilizzare il metodo getInstalledRelatedApps(), sia l'app installata sia il sito web devono configurare la loro 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 file manifest.
Strumenti come BubbleWrap o PWA Builder, che consentono di pubblicare la PWA negli store, aggiungono già i metadati richiesti, in modo che il tuo sito web possa utilizzare subito getInstalledRelatedApps().
Per rilevare se una PWA è già installata utilizzando getInstalledRelatedApps(), definisci webapp nel campo related_applications del 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 è 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.