PWA（Progressive Web App）是一种结合了 Web 和 Native 应用优点的新型应用模式，它具有离线缓存、push 通知、全屏模式等多个特性。其中，离线缓存是 PWA 的核心特性之一，也是 PWA 最令人感兴趣也最有价值的特性之一。
本文将详细介绍 PWA 中的本地离线缓存策略，包括什么是本地离线缓存、为什么需要本地离线缓存、如何进行本地离线缓存及相关实践经验。通过本文的阅读，您将深入了解 PWA 中的离线缓存，以及如何提升应用的用户体验。
什么是本地离线缓存
本地离线缓存，即使把网络断开，应用仍能访问这些资源，这些资源被存储在本地，并可以直接从设备上访问。这些缓存资源通常包含静态资源，例如 HTML、CSS、JavaScript 文件、图片和字体等，以便在离线或网络不稳定的情况下继续访问应用程序。
为什么需要本地离线缓存
在网络不稳定或者断网的情况下，用户将会面临极低的访问速度或者无法访问。PWA 的本地离线缓存策略可以有效缓解这个问题，用户无需担心网络不稳定或者断网的情况，即使暂时没有网络，也可以畅快使用 PWA 应用。
此外，PWA 应用的使用可以在任何设备上进行，因此本地离线缓存可以确保某一设备上的数据和应用程序状态保持一致，无需再次下载和设置。
如何进行本地离线缓存
下面将详细介绍如何实现 PWA 的本地离线缓存。
1. 添加 service worker
service worker 是一种全局上下文的 Javascript 运行环境，它允许你有将事件拦截，并有能力进行基于 URL 的请求响应程序。这样我们可以修改请求和响应，缓存资源并使其能够离线使用。
我们可以通过以下代码来注册 service worker：
-- -------------------- ---- -------
-- ------- ------ --
-- ---------------- -- ---------- -
------------------------------- ---------- -
---------------------------------------------------------------------------------- -
-- ----
-------------------------- ------------ ---------- ---- ------ -- --------------------
-- ------------- -
-- ---- --
-------------------------- ------------ ------- -- -----
---
---
-2. 缓存所有需要离线使用的资源
缓存所有需要离线使用的资源，包括 HTML、CSS、图片、字体等文件。通过 service worker 来拦截请求，我们可以缓存它们，下一个请求将不再访问网络，而是从本地获取。
以下是一个简单的缓存策略：
-- -------------------- ---- -------
----- ---------- - -------------------
----- ----------- - -
----
----------------
--------------
---------------
--
-------------------------------- --------------- -
-- ---------
----------------
-----------------------
--------------------- -
------------------- --------
------ --------------------------
--
--
---
------------------------------ --------------- -
------------------
---------------------------
------------------------ -
-- ---------------
-- ---------- -
------ ---------
-
-- --------------
------ ---------------------
-
-
--
---代码解析：
- 在安装 service worker 的时候，我们通过
cache.addAll()缓存了所有需要离线使用的资源。 - 在请求资源时，我们通过
caches.match()查找缓存，如果缓存存在则返回缓存数据，否则请求网络资源。
注意事项
1. 缓存过期处理
缓存的资源不会永远存在，它可能会因为被更新而失效。因此我们需要设置缓存数据的过期时间。
以下是一个简单的缓存策略：
-- -------------------- ---- -------
----- ---------- - -------------------
----- ----------- - -
----
----------------
--------------
---------------
--
-------------------------------- --------------- -
-- ---------
----------------
-----------------------
--------------------- -
------------------- --------
------ --------------------------
--
--
---
------------------------------ --------------- -
------------------
---------------------------
------------------------ -
-- ---------------
-- ---------- -
------ ---------
-
-- --------------
------ --------------------
------------------------ -
-- -------------
-- ---------- -- --------------- --- --- -- ------------- --- -------- -
------ ---------
-
--- --------------- - -----------------
-----------------------
--------------------- -
------------------------ -----------------
---
-- ------
------ ---------
---
--
--
---代码解析：
- 在收到新响应时，我们如果需要缓存新的数据，需要通过
caches.open()获取缓存实例，使用cache.put()去缓存响应。 - 使用
response.clone()复制响应对象，因为响应数据流一旦使用就会失效，通过复制一份我们可以同时使用响应和缓存它的拷贝。 - 如果服务器端更新资源，缓存数据不生效，我们需要超时或者手动更新缓存数据，或者在服务器端生成不同的文件版本（通过文件名称或者查询参数键+值）。
2. 缓存更新处理
需要解决一个问题：如何更新缓存的数据？在 service worker 中，我们可以在 fetch 事件中监听资源的更新或者替换，从而达到缓存的更新。
以下是一个简单的缓存更新策略：
-- -------------------- ---- -------
----- ---------- - -------------------
----- ----------- - -
----
----------------
--------------
---------------
--
-------------------------------- --------------- -
----------------
-----------------------
--------------------- -
------------------- --------
------ --------------------------
--
--
---
------------------------------ --------------- -
------------------
---------------------------
------------------------ -
-- ---------------
-- ---------- -
------ ---------
-
-- --------------
------ --------------------
------------------------ -
-- -------------
-- ---------- -- --------------- --- --- -- ------------- --- -------- -
------ ---------
-
--- --------------- - -----------------
-----------------------
--------------------- -
------------------------ -----------------
---
-- ------
------ ---------
---
--
--
---
-- - ------- ------ ------------
--------------------------------- --------------- -
--- -------------- - ---------------------
----------------
--------------------------------------- -
------ ------------
---------------------------------- -
-- ---------------------------------- --- --- -
------ -------------------------
-
--
--
--
--
---代码解析：
- 在安装 service worker 时我们已经缓存了所需文件，服务工作线程现在正在缓存所有请求以便于离线使用。
- 在 service worker 中添加事件，当激活新 service worker 版本时，我们只缓存最新版本的内容，而不是旧的缓存数据。
结语
本文总结了 PWA 的本地离线缓存策略，表明离线缓存为 PWA 的核心特性之一。我们需要了解如何实现本地离线缓存、缓存过期处理、缓存更新等 must-have 功能。
客户端缓存的价值在于它可以在任何时间、任何设备上都可以使用。因此，为您的产品添加 PWA 功能是值得的。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/645fe202968c7c53b01c7cea