Progressive Web Apps（PWA）是一种具有应用程序体验的网站。 PWA 可以让用户下载并安装应用程序，但无需像传统应用程序那样在应用程序商店中进行发布和安装，因此它们比原生应用程序更容易推广和使用。为了优化 PWA 的性能和用户体验，合理的缓存数据存储是相当重要的。
前端缓存方式
前端数据缓存可以通过数据缓存 API、Service Worker、LocalStorage 等方式进行实现。其中，Service Worker 是使用前端缓存实现 PWA 的核心技术。
数据缓存 API
在 JavaScript 中，有几种可用于缓存数据的 API，例如 IndexedDB 和 Cache API。IndexedDB 允许您存储大量结构化数据，而 Cache API 对于简单的键值数据缓存非常有用。同时，这些 API 都支持异步操作，并提供了处理事务的方法。
IndexedDB
IndexedDB 是一个 JavaScript API，用于存储支持索引的对象。如果您需要存储较大的数据按照一定结构（键值对），并且需要支持复杂的查询和排序操作，那么 IndexedDB 是一个不错的选择。
示例代码：
-- -------------------- ---- -------
--- ----------- - ---------------------------- ---
------------------- - --------------- -
-- -----------------
--
--------------------------- - --------------- -
--- -- - --------------------
--- ----------- - ------------------------------ - -------- ---- ---
------------------------------- ------- - ------- ----- ---
--
--------------------- - --------------- -
--- -- - --------------------
--- ----------- - -------------------------- -------------
--- ----------- - ----------------------------------
----------------- --- -- ----- ------ ---
----------------- --- -- ----- ------ ---
----------------- --- -- ----- ----- ---
---------------------- - --------------- -
-- ------
--
--Cache API
Cache API 是一种 JavaScript API，用于缓存和检索 HTTP 响应。您可以使用 Cache API 在 Service Worker 中缓存和检索应用程序的文件和其他资源。
示例代码：
-- -------------------- ---- -------
-------------------------------- --------------- -
----------------
-------------------------------------------- -
------ --------------
----
--------------
--------------
------------
---
--
--
---
------------------------------ --------------- -
------------------
--------------------------------------------------- -
------ -------- -- ---------------------
--
--
---Service Worker
在 PWA 中，Service Worker 是一个运行在 Web Worker-context 的独立脚本，提供者细粒度控制缓存过程以及网络请求的能力。它充当应用的网络代理，拦截网络请求并将响应从缓存中获取，而不是从网络捞取。当检测到网络恢复时，Service Worker 会向服务器请求新数据，并将其添加到缓存中。
示例代码：
-- -------------------- ---- -------
----- ---------- - -----------
----- ----------- - -
----
--------------
--------------
-----------
-------------------
------------------------
--
-------------------------------- ----- -- -
----------------
---------------------------------- -- -
------ --------------------------
--
--
---
--------------------------------- ----- -- -
----- ----------------- - -------------
----------------
----------------------------- -- -
------ --------------------------- -- ----------------------------------------
---------------------- -- -
------ -------------------------------------------- -- -
------ -----------------------------
----
---------- -- ---------------------
--
---
------------------------------ ----- -- -
------------------
----------------------------------------- -- -
-- ---------- -
------ ---------
-
------ ---------------------------------- -- -
-- ---------- -- --------------- --- --- -- ------------- --- -------- -
------ ---------
-
----- --------------- - -----------------
---------------------------------- -- -
------------------------ -----------------
---
------ ---------
---
--
--
---LocalStorage
LocalStorage 是浏览器自带的一种存储类似键值对数据的 API。该 API 会将数据存储在客户端本地的浏览器中，并且使用起来非常方便。
示例代码：
localStorage.setItem('name', 'Jack');
let name = localStorage.getItem('name');
alert(name); // 输出 Jack如何优化缓存数据存储
以下几种方式可以帮助你优化缓存数据存储。
最小化缓存范围
理想情况下，只存储需要缓存的文件。缓存页面和代码中没有使用的资源是没有必要的，而且会浪费存储空间，导致缓存失效。
深入了解缓存策略
深入了解缓存策略可帮助您实现更好的数据存储，并提高 PWA 的性能和响应速度。您可以选择使用 HTTP 响应标头来进行缓存，并且您还可以使用 Cache API 和 Service Worker 中的复杂策略，例如 Cache API 的匹配策略。
定期清理缓存
一旦您开始缓存数据，就需要定期清理。您可以使用过期时间（sessionStorage），手动清理（LocalStorage），或定期后台清理（Service Worker）等方式来清理缓存。
总结
在构建 PWA 过程中，缓存数据存储是将其性能提高到极致的关键。选择适合您应用程序的缓存策略，最小化缓存范围，并定期清理缓存可以帮助您实现更好的性能和体验。请尝试使用上面提到的不同缓存方式和示例代码，构建出你的 PWA 应用来吧！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64cb44cd5ad90b6d041f961a