輕鬆使用離線 Google Analytics (分析)

您現在擁有漸進式網頁應用程式,並搭配服務工作處理程序來完成這項作業。太好了!此外,您也已為網頁應用程式設定 Google Analytics (分析),而且想接收的分析資料來自離線使用期間產生的使用情形。不過,如果您在離線狀態下嘗試將資料傳送至 Google Analytics (分析),這些要求就會失敗,資料也會遺失。

解決方案應該不會讓您感到意外,就是服務工作人員!具體來說,請替服務工作人員新增程式碼,以便儲存 Google Analytics (分析) 要求 (使用 IndexedDB),並在日後有機會擁有可用的網路時重試。我們共用程式碼來處理此邏輯,並將其做為開放原始碼 Google I/O 網頁應用程式的一部分,但我們發現這是一項實用的模式,而且複製及貼上程式碼可能並不容易。

我們很高興在此宣布,在 Service Worker 中處理離線 Google Analytics (分析) 要求所需的一切都已整合至 npm 套件中:npm install --save-dev sw-offline-google-analytics

使用 sw-Offline-google-analytics

在現有的 Service Worker 程式碼中,新增下列程式碼:

// 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.

就是這麼簡單!

到底發生什麼事了?

sw-offline-google-analytics 會在 Service Worker 中設定新的 fetch 事件處理常式,用於回應對 Google Analytics (分析) 網域發出的要求。(程式庫會忽略非 Google Analytics (分析) 要求,讓服務工作人員的其他 fetch 事件處理常式有機會對這些資源採用適當策略)。它會先嘗試針對網路執行要求。如果使用者已連上網路,這項動作就會恢復正常。

如果網路要求失敗,程式庫會將要求的相關資訊自動儲存IndexedDB,並附上表示初始提出要求時間的時間戳記。每當服務工作人員啟動時,程式庫都會檢查佇列中的要求嘗試重新傳送,以及一些額外的 Google Analytics (分析) 參數:

如果重新傳送要求成功,那就太好了!要求會從 IndexedDB 中移除。如果重試失敗,且初始要求是在 24 小時前提出,系統會將初始要求保留在 IndexedDB 中,將於下次 Service Worker 啟動時重試。請特別注意,我們無法保證系統處理 4 小時前的 Google Analytics (分析) 命中資料,但重新傳送一些較早的命中資料不該傷害。

sw-offline-google-analytics 也會根據啟動 Google Analytics (分析) 所需的實際 analytics.js JavaScript 程式碼implements「網路優先,改回快取」策略

還有更多功能等著您!

sw-offline-google-analytics 是大型 sw-helpers 專案的一部分,該專案是一系列程式庫,旨在為現有 Service Worker 實作提供內建強化功能。

此外,該專案也屬於 sw-appcache-behavior,這個程式庫會實作服務工作站內現有 AppCache 資訊清單中定義的快取策略。內容旨在協助您從 AppCache 遷移至 Service Worker,同時至少維持一致的快取策略。

如果您對圖書館有其他想法,歡迎與我們分享。請透過 Issue Tracker 提出要求!