随着移动互联网的普及，越来越多的用户开始使用移动设备浏览网站。为了提升用户体验和应对网络环境的变化，Progressive Web App（PWA）出现了。PWA应用兼有原生应用和Web应用的优点，拥有快速的加载速度和可靠的离线缓存等功能。而谷歌Analytics和谷歌Tag Manager作为网站分析的利器，已成为许多网站必不可少的工具。但是，如何在PWA应用中实现这两个工具呢？
PWA应用的特点
在开始介绍如何在PWA应用中实现谷歌Analytics和谷歌Tag Manager之前，让我们先来了解一下PWA应用的特点：
- 快速的加载速度
- 可靠的离线缓存功能
- 智能的推送通知
- 感官体验更好
- 可以添加到主屏幕
- 具有逐步增强和渐进降级的特性
在实现谷歌Analytics和谷歌Tag Manager时，我们需要结合PWA的特点，充分考虑如何在用户离线时记录页面的浏览次数，快速加载分析代码等问题。
谷歌Analytics
谷歌Analytics是一个利用JavaScript代码嵌入到网页中来分析网站访问情况的工具。在传统网站中，我们通常会在head标签中嵌入以下代码：
<script async src="https://www.google-analytics.com/analytics.js"></script>
然后，在页面载入后执行要统计的分析代码：
ga('create', 'UA-xxxxxxxxx', 'auto');
ga('send', 'pageview');然而，在PWA应用中，我们需要考虑到用户可能会离线使用，而Analytics脚本又需要从谷歌的服务器上加载，此时脚本将会因为网络问题而无法加载而导致统计失效。因此，我们需要结合PWA应用的缓存机制，将Analytics脚本缓存在本地，并在需要时提供给分析代码使用。以下是示例代码：
-- -------------------- ---- -------
-------------------------------- ----- -- -
----------------
----------------------------------- -- -
------ ---------------------------
--
--
---
------------------------------ ----- -- -
------------------
----------------------------------------- -- -
------ -------- -- ---------------------
--
--
---
--------------------------------- ----- -- -
----------------
----------------------- -- -
------ --------------------------- -- --- --- -------------------- -- ----------------------
--
--
---
------------------------------ ----- -- -
-- --------------------------------------------------- -
------------------
--------------------------------------------- -- -
------ ---------------------------------------- -- -
-- ---------- -
------ ---------
-
------ ------------------------------------ -- -
------------------------ --------------------
------ -----------
---
---
--
--
-
---在上述示例中，我们通过监听install事件，在PWA应用的static缓存中缓存了Analytics脚本，在fetch事件中根据请求匹配缓存并返回对应的响应，同时在同一事件中，对请求Analytics脚本的请求单独开辟了一个google-analytics缓存，并执行缓存读取及更新操作。
谷歌Tag Manager
谷歌Tag Manager是一个集成的标记管理系统，可以帮助我们管理各种标记、代码片段或脚本，如广告、分析和搜寻等，而且可以无需访问网站代码来添加和更新标记。在PWA应用中，我们同样需要结合缓存机制，在离线时记录标记数据，然后在网络恢复后上传数据至服务器。
以下是示例代码：
-- -------------------- ---- -------
-------------------------------- ----- -- -
----------------
----------------------------------- -- -
------ --------------
------------------
---------------------------
---
--
--
---
----------------------------- ----- -- -
-- ---------- --- -------------- -
----------------------------------------
-
---
-------- ---------------------- -
------ ---------------------------------------- -- -
------ ---------------------- -- -
-- ------------ - -- -
------ ------------------------ -- -
------ ------------------------------ -- -
------ --------------------------------------------------- - ------------- -
------- -------
-------- -
--------------- ------------
--
----- -------------
---------- -- -
------------------
---
---
----
-
---
---
-
------------------------------ ----- -- -
------------------
----------------------------------------- -- -
-- ---------- -
-- ------------------------------
-- ------------------ --- --------------------------------------------------------- -
--- -------------- - -----------------
-- -------
--- ------------ - -----------------
--- ----- - --------------
--- ---- - ----------------
----------------
------------------------------------ -- -
-- -----------------------
------ ------------------------ --- -------------- -
-------- -
--------------- ------------
--
------- ----------------------
----------- -------------------------
----------- -- -
-- ----------------------
------ -----------------------------------------------
---
--
--
------ ---------
-
------ ---------
-
------ ---------------------
--
--
---
--------------------------------- ----- -- -
----------------
----------------------- -- -
------ --------------------------- -- --- --- ----------- -- --- --- ------------------------- -- ----------------------
--
--
---在上述示例中，我们通过在Install事件中，将Tag Manager和配置文件缓存在static缓存中，然后在fetch事件中匹配缓存并返回响应，当请求的数据为tag-manager的时候，即上报数据时，我们将数据缓存到tag-manager缓存中，并执行同步上传操作，等待网络连接后上传缓存中的数据。
总结
利用离线缓存的特性，结合PWA应用的特点，我们可以在PWA中实现谷歌Analytics和谷歌Tag Manager的功能，提升用户体验并改善数据分析。虽然代码量较多，但是这种方式可以保证在离线状态下同样可以进行数据分析和数据上报，实现较高的可靠性。
以上是PWA应用中谷歌Analytics和谷歌Tag Manager的实践，如果你正在进行PWA开发，不妨尝试将其应用到你的项目中，提升数据分析和用户体验。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64f19fdff6b2d6eab3b721e1