前言
PWA，即 Progressive Web App，是一种新型的 Web 应用开发模式，它结合了 Web 应用和原生应用的优点，并能够实现离线访问、推送通知等功能，用户体验类似于原生应用。
实现 PWA 的关键是将 Web 应用转化为离线可访问的机制。传统 Web 应用通常需要先加载整个页面的 HTML、CSS 和 JavaScript，这过程需要下载时间并等待响应。如果网络条件不好或者服务器响应较慢，页面加载时间长，用户体验受到影响。而 PWA 采取了缓存关键资源的策略，只在缺失时才会进行网络请求，从而缩短响应时间，提高用户体验。
本文介绍 PWA 仅缓存关键资源的低延迟策略实现方法，并提供示例代码和学习指导。
PWA 仅缓存关键资源的低延迟策略
PWA 仅缓存关键资源的策略是指，将 Web 应用中的关键资源（例如 HTML、CSS 和 JavaScript 等）缓存到本地，只有当资源缺失时才进行网络请求。这种策略可以让用户在离线状态下访问已缓存的资源，从而获得更快的响应时间。同时，PWA 也提供了更新缓存的机制，使用户始终可以获取到最新的资源。
PWA 仅缓存关键资源的策略基于 Service Worker 技术实现。Service Worker 可以作为代理，拦截并处理浏览器向服务器发出的网络请求，并且具有缓存能力。当用户访问 Web 应用时，Service Worker 可以从缓存中获取已经缓存好的关键资源，从而缩短响应时间。
以下是实现 PWA 仅缓存关键资源的低延迟策略的步骤：
- 注册 Service Worker
- 安装 Service Worker
- 缓存关键资源
- 添加 fetch 事件监听器
- 更新缓存
以下是每个步骤的详细解释及代码示例：
1. 注册 Service Worker
首先需要将 Service Worker 注册到 Web 应用中。在 HTML 中添加如下代码：
-- -------------------- ---- -------
--------
-- ---------------- -- ---------- -
------------------------------- ---------- -
---------------------------------------------------------------------------------- -
-------------------- ------ ---------- ---- -------- --------------------
-- ------------- -
-------------------- ------ ------------ --------- -----
---
---
-
---------该代码会检查浏览器是否支持 Service Worker，如果支持则注册 /service-worker.js 脚本，该脚本将在下一步中安装 Service Worker。
2. 安装 Service Worker
在 /service-worker.js 脚本中实现 Service Worker 的安装逻辑。安装 Service Worker 时需要缓存 Web 应用中的关键资源，可以使用 cache API 进行缓存：
-- -------------------- ---- -------
----- ---------- - -----------
----- ----------- - -
----
--------------
-------------
---------
--
-------------------------------- --------------- -
----------------
-----------------------
--------------------- -
------------------- --------
------ --------------------------
--
--
---上述代码中，CACHE_NAME 是缓存版本号，urlsToCache 是需要缓存的关键资源列表。在 install 事件中打开一个新的缓存，将关键资源列表添加到缓存中。如果其中任何一个资源下载请求发生错误，则整个安装过程就会失败。
3. 缓存关键资源
在 fetch 事件中，检查请求的资源是否已经缓存，如果已经缓存则直接从缓存中获取。如下所示：
-- -------------------- ---- -------
------------------------------ --------------- -
------------------
---------------------------
------------------------ -
-- ---------- -
------ ---------
-
------ ---------------------
--
--
---上述代码中，caches.match 方法将请求转发到 Service Worker 的 cache storage 中，查找缓存的响应。如果响应存在，则直接返回缓存的响应；否则直接向服务器发出请求，并将响应添加到缓存中。
4. 添加 fetch 事件监听器
在 fetch 事件中，实现如下代码，可以提高缓存的准确性：
-- -------------------- ---- -------
------------------------------ --------------- -
------------------
---------------------------
------------------------ -
-- ---------- -
------ ---------
-
--- ------------ - ----------------------
------ -------------------------
------------------ -
------------ -- --------------- --- --- -- ------------- --- -------- -
------ ---------
-
--- --------------- - -----------------
-----------------------
--------------------- -
------------------------ -----------------
---
------ ---------
-
--
--
--
---上述代码中，如果请求的是基本的资源（例如 HTML、CSS、JS），则将响应添加到缓存中。
5. 更新缓存
在 Service Worker 中添加更新缓存逻辑，使得缓存总是与最新的代码一致：
-- -------------------- ---- -------
--------------------------------- --------------- -
--- -------------- - -------------
----------------
--------------------------------------- -
------ ------------
---------------------------------- -
-- ---------------------------------- --- --- -
------ -------------------------
-
--
--
--
--
---上述代码中，cacheWhitelist 存储了允许缓存的版本号，如果 Service Worker 中的版本号与缓存中的版本号不一致，则删除缓存中的旧版本。
总结
本文介绍了 PWA 仅缓存关键资源的低延迟策略实现方法，该策略基于 Service Worker 实现。文中示例代码详细展示了每个步骤的具体实现。如果你希望将 Web 应用转化为可以离线访问的 PWA 应用，可以按照本文中的步骤进行实现。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64cb63ae5ad90b6d04204e34