PWA（Progressive Web App）是一种既能够提供 Web 应用程序的可靠性、快速载入、简单安装和体验的网站，又能提供类似于 Native App 的用户体验的技术解决方案。其中，离线缓存是 PWA 应用的重要特征之一，可以实现在离线状态下访问应用程序。
基本概念
在 PWA 应用中，缓存是一种持久化存储机制，可以把一些资源存储在 Web 端，并在用户离线时提供访问。PWA 应用中的缓存主要有两种：
- 预缓存
- 动态缓存
预缓存是指在安装 PWA 应用或者访问应用时，将静态资源（如 HTML、CSS、JS 等）提前下载并存储在用户的设备中，以便在下次访问时能够快速载入。动态缓存是在运行时实时从服务器获取数据并缓存，以便下次获取时能够快速响应。
多种缓存实现方法
实现缓存有多种技术方案可供选择，在 PWA 应用中也是如此。在这里，我们将介绍两种常用的技术方案。
Service Worker
Service Worker 是一种在浏览器和网络之间的代理服务器，具有以下特点：
- 是一种完全独立于页面的 JavaScript 线程，不能直接操作 DOM。
- 可以在后台持续运行，即使当页面已经关闭。
- 可以控制来自同源的请求和响应。
通过 Service Worker，我们可以使用 API 对资源进行缓存，并在下一次访问时直接从缓存中读取，从而实现离线访问。
下面介绍 Service Worker 的缓存实现方法：
预缓存与动态缓存
在 Service Worker 中，可以使用 cache.addAll 方法来进行预缓存，如下所示：
-- -------------------- ---- -------
-------------------------------- --------------- -
----------------
-------------------------------------------- -
------ --------------
--------------
--------------
--------------
------------------
---
--
--
---在运行时，可以使用以下代码对资源进行缓存：
-- -------------------- ---- -------
------------------------------ --------------- -
------------------
--------------------------------------------------- -
-- ---------- -
------ ---------
-
------ -------------------------------------------- -
------ -------------------------------------------- -
------------------------ ------------------
------ ---------
---
---
--
--
---上述代码首先会查找缓存中是否存在请求的资源，如果存在则直接返回。否则，会将请求发送到服务器，并将响应存入缓存。
缓存更新
当资源发生变化时，需要及时更新缓存。可以使用以下代码实现：
-- -------------------- ---- -------
------------------------------ --------------- -
------------------
--------------------------------------------------- -
-- ---------- -
------ ---------
-
------ -------------------------------------------- -
------ -------------------------------------------- -
------------------------ ------------------
------ ---------
---
---
--
--
---上述代码中，将请求发送到服务器，并将响应存入缓存。同时，如果缓存存在，则覆盖缓存。
Web Storage
Web Storage 是 HTML5 提供的客户端存储机制，可以存储一些简单的数据类型，包括字符串、数字、布尔型等。其中，主要有两种，即 localStorage 和 sessionStorage。
localStorage：localStorage 存储的数据没有过期时间，并且在同一个域名下的所有页面都可以访问。适合存储一些持久化数据。
sessionStorage：sessionStorage 存储的数据在会话期间有效，在关闭浏览器或者关闭页面之后失效，也只在当前浏览器窗口（或者 tab 页面）之间有效。适合存储一些临时数据或者用户登录信息。
下面，分别介绍 localStorage 和 sessionStorage 的使用方法。
localStorage
可以使用以下代码将数据存储到 localStorage 中：
localStorage.setItem('username', '张三');可以使用以下代码从 localStorage 中读取数据：
var username = localStorage.getItem('username');可以使用以下代码从 localStorage 中删除数据：
localStorage.removeItem('username');sessionStorage
可以使用以下代码将数据存储到 sessionStorage 中：
sessionStorage.setItem('username', '张三');可以使用以下代码从 sessionStorage 中读取数据：
var username = sessionStorage.getItem('username');可以使用以下代码从 sessionStorage 中删除数据：
sessionStorage.removeItem('username');总结
本文介绍了 PWA 应用中的多种缓存实现方法，包括 Service Worker 和 Web Storage。在使用时，需要根据应用场景选择合适的方式，并且注意对缓存进行更新和清理，避免数据的滞留和占用设备空间。实现 PWA 应用的缓存功能可以极大提高用户体验，同时也是学习和使用 PWA 技术的重要一步。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/649b438948841e989481ed5b