什么是 PWA
PWA（Progressive Web App）是一种结合了 Web 和 Native App 优点的新型应用，它可以被安装在用户的设备上，像 Native App 一样提供了离线访问、推送通知等功能，同时又拥有 Web App 的优势，如无需下载、跨平台等特点。
离线缓存模式的意义
PWA 的一个重要特点就是离线缓存模式，它可以让应用在离线状态下也能正常访问，提高用户体验。离线缓存模式可以通过 Service Worker 来实现，Service Worker 是一种独立于网页的 JavaScript 线程，可以拦截网络请求，从而实现离线缓存和推送通知等功能。
1. 注册 Service Worker
要使用离线缓存模式，首先需要注册 Service Worker。在主页的 JavaScript 文件中，添加如下代码：
-- -------------------- ---- -------
-- ---------------- -- ---------- -
------------------------------- ---------- -
---------------------------------------------------------------------- -
-------------------------- ------------ ---------- ---- ------ -- --------------------
-- ------------- -
-------------------------- ------------ ------- -- -----
---
---
-上述代码意思是：如果浏览器支持 Service Worker，则在页面加载完成后注册 Service Worker，并输出注册成功或失败的信息。其中，/sw.js 是 Service Worker 文件的路径，可以根据实际情况修改。
2. 编写 Service Worker
接下来，需要编写 Service Worker 文件。在 Service Worker 文件中，可以拦截网络请求，并根据缓存策略返回缓存的资源或发起网络请求获取资源。以下是一个简单的 Service Worker 文件示例：
-- -------------------- ---- -------
----- ---------- - --------------
----- ----------- - -
----
--------------
-------------
------------
--
-------------------------------- --------------- -
----------------
-----------------------
--------------------- -
------------------- --------
------ --------------------------
--
--
---
------------------------------ --------------- -
------------------
---------------------------
------------------------ -
-- ---------- -
------ ---------
-
------ ---------------------
--
--
---上述代码意思是：定义一个名为 my-cache-v1 的缓存版本，将需要缓存的资源 URL 存储在 urlsToCache 数组中。在 install 事件中打开缓存，将需要缓存的资源添加到缓存中。在 fetch 事件中，先尝试从缓存中获取资源，如果缓存中存在该资源，则返回缓存的资源，否则发起网络请求获取资源。
3. 配置缓存策略
在 Service Worker 文件中，可以根据需要配置缓存策略。以下是一些常见的缓存策略：
networkFirst网络优先：先尝试从网络获取资源，如果网络请求失败则从缓存中获取资源。cacheFirst缓存优先：先尝试从缓存中获取资源，如果缓存中不存在该资源则从网络获取资源。cacheOnly仅缓存：只从缓存中获取资源，不发起网络请求。networkOnly仅网络：只发起网络请求，不从缓存中获取资源。
以下是一个使用 networkFirst 缓存策略的 Service Worker 文件示例：
-- -------------------- ---- -------
----- ---------- - --------------
----- ----------- - -
----
--------------
-------------
------------
--
-------------------------------- --------------- -
----------------
-----------------------
--------------------- -
------------------- --------
------ --------------------------
--
--
---
------------------------------ --------------- -
------------------
--------------------
------------------------ -
-- ---------------- --- ---- -
------ --------------------------
-
------ ---------
--
----------------- -
------ ----------------------------
--
--
---上述代码意思是：定义一个名为 my-cache-v1 的缓存版本，将需要缓存的资源 URL 存储在 urlsToCache 数组中。在 install 事件中打开缓存，将需要缓存的资源添加到缓存中。在 fetch 事件中，先尝试从网络获取资源，如果网络请求失败则从缓存中获取资源。如果请求的资源不存在，则返回 /404.html 页面。
总结
离线缓存模式是 PWA 的重要特点之一，可以提高应用的稳定性和用户体验。在实现离线缓存模式时，需要注册 Service Worker 并编写相应的缓存策略。缓存策略可以根据实际需求进行配置，常见的缓存策略有 networkFirst、cacheFirst、cacheOnly 和 networkOnly 等。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/650e879995b1f8cacd7a5e7f