在 Web 开发中，使用 Google Analytics 是一种常见的方式来收集用户访问数据。而 Workbox-Google-Analytics 是一个方便的 npm 包，可以轻松地将 Google Analytics 集成到 Service Worker 中，以提高性能并避免跨站脚本攻击。
安装
使用 npm 安装最新版本的 Workbox-Google-Analytics：
npm install workbox-google-analytics
或者使用 yarn：
yarn add workbox-google-analytics
使用步骤
- 导入 Workbox-Google-Analytics 模块：
importScripts('https://storage.googleapis.com/workbox-cdn/releases/6.3.0/workbox-sw.js');
importScripts('https://cdn.jsdelivr.net/npm/workbox-google-analytics/dist/workbox-google-analytics.prod.js');
workbox.googleAnalytics.initialize();- 初始化 Google Analytics：
在 workbox.googleAnalytics.initialize() 方法中，你需要传递一个对象作为参数，该对象包含以下键值对：
parameterOverrides: 一个用于覆盖默认参数的对象；hitFilter: 一个用于过滤跟踪请求的函数（例如，你可以使用它来排除某些 URL）；trackPrefix: 用于添加前缀的字符串；useCacheNameSuffix: 一个布尔值，用于指示是否将 Cache Storage 的名称后缀设置为 Google Analytics ID。
在这里我们不使用任何参数，所以直接调用 initialize() 方法即可。
- 在 Service Worker 中注册 Google Analytics：
-- -------------------- ---- -------
----- ----- - ---------------------------
-- ---------------- -- ---------- -
------------------------------- ----- -- -- -
--- -
----- ------------ - ----- ----------------------------------------
-------------------------- ------------ ---------- ---- ------ -- --------------------
- ----- --- -
---------------------------- ------------ ------- -- ---
-
---
-将 sw.js 文件的 URL 替换为你自己的 Service Worker 文件的 URL 即可。
- 在 HTML 页面中添加 Google Analytics 标记：
-- -------------------- ---- -------
------
---
------- ----- -----------------------------------------------------------------------------
--------
---------------- - ---------------- -- ---
-------- ------ - -------------------------- -
---------- --- --------
-------------- ---------------------
---------
-------将 GA_MEASUREMENT_ID 替换为你自己的 Google Analytics ID，这样就可以开始跟踪用户访问数据了。
示例代码
下面是一个完整的示例代码，包括 Service Worker 和 HTML 页面：
service-worker.js
-- -------------------- ---- ------- ----------------------------------------------------------------------------------------- ------------------------------------------------------------------------------------------------------------- ------------------------------------- ------------------------------ -- --- -- -- ---------- --- --------------------- --- --------------------------------- --
index.html
-- -------------------- ---- -------
--------- -----
----- ----------
------
----- ----------------
------------------------------- ---------------
------- ----- -----------------------------------------------------------------------------
--------
---------------- - ---------------- -- ---
-------- ------ - -------------------------- -
---------- --- --------
-------------- ---------------------
---------
-------
------
---------- -----------
--------
------------------- ---------
---------
-------
--------
----- ----- - ---------------------------------------
-- ---------------- -- ---------- -
------------------------------- ----- -- -- -
--- -
----- ------------ - ----- ----------------------------------------
-------------------------- ------------ ---------- ---- ------ -- --------------------
- ----- --- -
----------------------
- ----------------------------------------------------------- --------
----------------------------------------------------------------------------------