轻松使用离线 Google Analytics(分析)

您已经有了一款渐进式 Web 应用,并配有 Service Worker,让该应用能够离线工作。太棒了!此外,您还为 Web 应用设置了现有的 Google Analytics(分析),不希望错过离线状态下使用时生成的任何分析洞见。但是,如果您尝试在离线状态下向 Google Analytics(分析)发送数据,这些请求将会失败,相应数据将会丢失。

您应该不会感到意外,解决方案是 Service Worker!具体而言,它会向您的 Service Worker 添加代码以存储 Google Analytics(分析)请求(使用 IndexedDB),并在稍后有可用的网络时重试这些请求。我们在开源 Google I/O 大会 Web 应用共享了代码来处理此逻辑,但意识到这种模式很有用,复制和粘贴代码可能不太容易。

今天,我们非常高兴地宣布,您在 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(分析)请求,从而让您的 Service Worker 的其他 fetch 事件处理脚本有机会针对这些资源实施适当的策略。)它会首先尝试针对网络完成请求。如果用户在线,则一切正常。

如果网络请求失败,该库会将与请求有关的信息自动存储IndexedDB,以及指明最初发起请求时间的时间戳。每次您的 Service Worker 启动时,该库都会检查已加入队列的请求尝试重新发送这些请求,以及一些额外的 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,它是一个实现 Service Worker 内现有 AppCache 清单中定义的缓存策略的库。它旨在帮助您从 AppCache 迁移到 Service Worker,同时保持一致的缓存策略(至少在最初阶段)。

如果您有其他关于图书馆的想法,欢迎告诉我们。因此,请在问题跟踪器中提交申请!