Jadi, Anda memiliki progressive web app, lengkap dengan service worker yang memungkinkannya bekerja secara offline. Bagus. Anda juga sudah menyiapkan Google Analytics untuk aplikasi web dan tidak ingin melewatkan wawasan analitis yang berasal dari penggunaan yang terjadi saat offline. Namun, jika Anda mencoba mengirim data ke Google Analytics saat offline, permintaan tersebut akan gagal dan data tersebut akan hilang.
Solusinya, seharusnya tidak mengejutkan Anda untuk belajar, adalah service worker! Secara khusus, langkah ini adalah menambahkan kode ke pekerja layanan untuk menyimpan permintaan Google Analytics (menggunakan IndexedDB
) dan mencobanya lagi nanti saat ada jaringan yang tersedia. Kami membagikan kode untuk menangani logika ini sebagai bagian dari open source aplikasi web Google I/O, tetapi menyadari bahwa ini adalah pola yang berguna, serta proses menyalin dan menempelkan kode yang mudah.
Hari ini, dengan senang hati kami umumkan bahwa semua yang Anda butuhkan untuk menangani permintaan Google Analytics offline dalam pekerja layanan Anda telah digabungkan menjadi paket npm: npm install --save-dev sw-offline-google-analytics
Menggunakan sw-offline-google-analytics
Dari dalam kode pekerja layanan yang ada, tambahkan hal berikut:
// 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.
Itu saja!
Apa yang terjadi di balik layar?
sw-offline-google-analytics
menyiapkan pengendali peristiwa fetch
baru di pekerja layanan Anda, yang merespons permintaan yang dibuat ke domain Google Analytics. (Library mengabaikan permintaan non-Google Analytics, sehingga memberikan pengendali peristiwa fetch
lain dari pekerja layanan Anda kesempatan untuk menerapkan strategi yang sesuai bagi resource tersebut.) Pertama-tama, ini akan mencoba memenuhi permintaan terhadap jaringan. Jika pengguna online, proses akan berjalan seperti biasa.
Jika permintaan jaringan gagal, library akan otomatis menyimpan informasi tentang permintaan ke IndexedDB
, beserta stempel waktu yang menunjukkan kapan permintaan tersebut pertama kali dibuat. Setiap kali pekerja layanan Anda dimulai, library akan memeriksa permintaan dalam antrean dan mencoba mengirim ulang permintaan tersebut, bersama dengan beberapa parameter Google Analytics tambahan:
- Parameter
qt
, disetel ke jumlah waktu yang telah berlalu sejak permintaan pertama kali dicoba, untuk memastikan bahwa waktu asli diatribusikan dengan benar. - Semua parameter dan nilai tambahan yang diberikan di properti
parameterOverrides
objek konfigurasi akan diteruskan kegoog.offlineGoogleAnalytics.initialize()
. Misalnya, Anda dapat menyertakan dimensi kustom untuk membedakan permintaan yang dikirim ulang dari pekerja layanan dengan permintaan yang langsung dikirim.
Jika pengiriman ulang permintaan berhasil, bagus. Permintaan akan dihapus dari IndexedDB. Jika percobaan ulang gagal, dan permintaan awal dibuat kurang dari 24 jam yang lalu, permintaan akan disimpan di IndexedDB
untuk dicoba lagi saat pekerja layanan dimulai lagi. Perhatikan bahwa hit Google Analytics yang lebih lama dari empat jam tidak dijamin akan diproses, tetapi mengirim ulang hit yang sedikit lebih lama "untuk berjaga-jaga" tidak akan merugikan.
sw-offline-google-analytics
juga implements strategi"jaringan terlebih dahulu, kembali ke cache" untuk kode JavaScript analytics.js
sebenarnya yang diperlukan untuk mem-bootstrap Google Analytics.
Masih ada lagi yang akan datang!
sw-offline-google-analytics
adalah bagian dari project sw-helpers
yang lebih besar, yang merupakan koleksi library yang dimaksudkan untuk memberikan peningkatan langsung pada implementasi pekerja layanan yang ada.
Bagian dari project tersebut juga adalah sw-appcache-behavior
, library yang menerapkan strategi caching yang ditentukan dalam manifes AppCache yang ada di dalam pekerja layanan. Ini dimaksudkan untuk membantu Anda bermigrasi dari AppCache ke pekerja layanan sambil mempertahankan strategi caching yang konsisten, setidaknya pada awalnya.
Jika Anda memiliki ide perpustakaan lain, silakan hubungi kami. Jadi, ajukan permintaan di issue tracker!