什么是 PWA？
PWA（Progressive Web Apps）是一种新型的网络应用程序，它可以在离线状态下运行，具有类似原生应用程序的功能和用户体验。PWA 是通过使用一些现代 Web 技术（如 Service Worker、Web App Manifest 等）来实现的。
为什么需要本地缓存？
PWA 的离线缓存是其核心功能之一。因为在移动设备上，网络连接不稳定或者没有网络连接的情况时，用户依然希望能够使用应用程序，而不是看到空白的页面或者出现错误提示。
通过使用本地缓存，可以将应用程序所需的资源（如 HTML、JavaScript、CSS、图片等）缓存到用户设备上，以便在离线状态下访问。这样，即使用户没有网络连接，也可以继续使用应用程序。
本地缓存机制
在 PWA 中，可以使用多种方式来实现本地缓存。其中，使用 IndexedDB 来保存数据并离线缓存是一种常见的方式。
IndexedDB 简介
IndexedDB 是一种浏览器内置的数据库，它可以在客户端存储大量的结构化数据，并且支持离线访问。IndexedDB 是一种键值对数据库，其中数据以对象存储的方式进行组织。
使用 IndexedDB 进行本地缓存
在 PWA 中，可以通过编写 Service Worker 脚本来实现使用 IndexedDB 进行本地缓存的功能。以下是一个示例代码，可以将数据保存到 IndexedDB 中，并在离线状态下从 IndexedDB 中读取数据：
-- -------------------- ---- -------
-- -- --------- ---
----- ------- - ---------------------------- ---
-- ------
----------------------- - --------------- -
----- -- - --------------------
----- ----------- - ------------------------------------- - -------- ---- ---
--
-- ------
----------------- - --------------- -
----- -- - --------------------
----- ----------- - --------------------------------- -------------
----- ----------- - -----------------------------------------
-- ---------
----- ---- - - --- -- ----- ------ --
----- ------- - ----------------------
----------------- - --------------- -
----------------- ----- -- ------------
--
--
-- ----------
------------------------------ --------------- -
------------------
--------------------------------------------------- -
------ -------- -- ---------------------
------------------- -
----- --------- - ---------------------------- ---
------------------- - --------------- -
----- -- - --------------------
----- ----------- - --------------------------------- ------------
----- ----------- - -----------------------------------------
----- ------- - -------------------
----------------- - --------------- -
----- ---- - --------------------
-- ------ -
----- ---- - --- ----------------- - ----- ------------ ---
----- -------- - --- ---------------
------ ---------
-
--
--
--
--
---在上述代码中，我们首先打开了 IndexedDB 数据库，并定义了一个名为 myObjectStore 的对象存储。然后，我们在 Service Worker 的 fetch 事件中通过 caches.match 方法查找缓存，如果缓存中存在请求的资源，则直接返回缓存中的资源。如果缓存中不存在请求的资源，则从 IndexedDB 中读取数据，并将数据返回给客户端。
总结
本文介绍了 PWA 技术中的本地缓存机制，并详细讲解了如何使用 IndexedDB 进行本地缓存。通过使用本地缓存，可以提高应用程序的性能和用户体验，在离线状态下依然可以访问应用程序。如果你正在开发 PWA 应用程序，那么使用 IndexedDB 进行本地缓存是一个值得考虑的方案。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6615479ed10417a222574ead