La tua app web progressiva è dotata di un service worker che le consente di funzionare offline. Bene. Inoltre, hai già configurato Google Analytics per la tua app web e non vuoi perdere le informazioni analitiche derivanti dall'utilizzo che si verificano offline. Tuttavia, se provi a inviare dati a Google Analytics in modalità offline, queste richieste non andranno a buon fine e i dati andranno persi.
La soluzione, non dovrebbe sorprenderti, sono i service worker. In particolare, consiste nell'aggiungere codice al service worker per memorizzare le richieste di Google Analytics (utilizzando IndexedDB) e riprovare in un secondo momento, quando si spera che sia disponibile una rete. Abbiamo condiviso del codice per gestire questa logica nell'ambito dell'app web Google I/O open source, ma ci siamo resi conto che si trattava di un modello utile e che copiare e incollare il codice può essere difficile.
Oggi siamo lieti di annunciare che tutto ciò di cui avete bisogno per gestire le richieste offline di Google Analytics all'interno del vostro service worker è stato riunito in un pacchetto npm: npm install --save-dev sw-offline-google-analytics
Utilizzo di sw-offline-google-analytics
All'interno del codice del service worker esistente, aggiungi quanto segue:
// This code should live inside your service worker JavaScript, ideally
// before any other 'fetch' event handlers are defined:
// First, import the library into the service worker global scope:
importScripts('path/to/offline-google-analytics-import.js');
// Then, call goog.offlineGoogleAnalytics.initialize():
// See https://github.com/GoogleChrome/workbox/tree/main/packages/workbox-google-analytics
goog.offlineGoogleAnalytics.initialize();
// At this point, implement any other service worker caching strategies
// appropriate for your web app.
E con questo è tutto!
Cosa succede dietro le quinte?
sw-offline-google-analytics configura un nuovo gestore di eventi fetch nel service worker, che risponde alle richieste effettuate al dominio Google Analytics. La libreria ignora le richieste non Google Analytics, dando agli altri gestori di eventi fetch del service worker la possibilità di implementare strategie appropriate per queste risorse. Innanzitutto, tenterà di soddisfare la richiesta nei confronti della rete. Se l'utente è online, l'operazione continuerà normalmente.
Se la richiesta di rete non va a buon fine, la libreria memorizzerà automaticamente le informazioni relative alla richiesta in IndexedDB, insieme a un timestamp che indica quando è stata effettuata la prima richiesta. A ogni avvio del service worker, la libreria controlla le richieste in coda e prova a inviarle nuovamente, insieme ad alcuni parametri aggiuntivi di Google Analytics:
- Un parametro
qt, impostato sulla quantità di tempo trascorso dal tentativo iniziale di richiesta, per garantire che l'ora originale sia attribuita correttamente. - Eventuali parametri aggiuntivi e valori forniti nella proprietà
parameterOverridesdell'oggetto di configurazione passati agoog.offlineGoogleAnalytics.initialize(). Ad esempio, puoi includere una dimensione personalizzata per distinguere le richieste inviate nuovamente dal service worker da quelle inviate immediatamente.
Se il nuovo invio della richiesta ha esito positivo, perfetto. La richiesta è stata rimossa da IndexedDB. Se il nuovo tentativo non va a buon fine e la richiesta iniziale è stata effettuata meno di 24 ore fa, la richiesta verrà conservata in IndexedDB per poter essere ritentata al successivo avvio del service worker. Tieni presente che non è garantito che gli hit di Google Analytics risalenti a più di quattro ore vengano elaborati, ma il reinvio di hit un po' meno recenti"nel caso in cui" non sia un problema.
sw-offline-google-analytics implements una strategia"network first, fall back to cache" per il analytics.js codice JavaScript effettivo necessario per eseguire il bootstrap di Google Analytics.
Altre novità sono in arrivo.
sw-offline-google-analytics fa parte del progetto più ampio sw-helpers, che è una raccolta di librerie destinata a fornire miglioramenti direttamente nelle implementazioni dei service worker esistenti.
Questo progetto fa parte anche di sw-appcache-behavior, una libreria che implementa strategie di memorizzazione nella cache definite in un manifest di AppCache esistente all'interno di un service worker. Ha lo scopo di aiutarti a eseguire la migrazione da AppCache ai service worker mantenendo al contempo una strategia di memorizzazione nella cache coerente, almeno all'inizio.
Se hai altre idee per la raccolta, ci piacerebbe conoscere la tua opinione. Invia una richiesta nell'Issue Tracker.