Progressive Web App（PWA）是一种新型的 Web 应用，它可以像本地应用程序一样工作，包括离线访问和推送通知等功能。然而，由于依赖网络请求的应用程序无法在没有互联网连接的情况下正常工作，因此 PWA 应用需要使用缓存来解决这个问题。
在本文中，我们将介绍 PWA 应用中如何实现网络请求的缓存，包括缓存策略，缓存 API 和缓存更新等内容。
缓存策略
缓存策略是指如何确定一个请求是否应该从缓存中获取。常见的缓存策略包括“最新版本优先”和“缓存优先”。
- 最新版本优先：如果缓存中没有找到请求的资源，则尝试从网络加载最新版本，并将其添加到缓存中。
- 缓存优先：如果缓存中存在请求的资源，则直接从缓存中获取，否则尝试从网络加载最新版本。
选择哪种策略取决于应用程序的需求和用户体验。例如，如果资源更新频率较高且用户需要始终使用最新版本，则最新版本优先策略更为合适；如果用户需要快速加载应用程序并且资源不太频繁更新，则缓存优先策略更为合适。
缓存 API
PWA 应用中使用的主要缓存 API 是 Cache Storage，它可让您将响应存储在缓存中，并为其提供可以在后续请求中使用的缓存的名称。在 Cache Storage 中，缓存的名称被称为“缓存键”。
以下是使用 Cache Storage API 缓存和获取响应的示例代码：
-- -------------------- ---- -------
-- ------ ---------- ---
-------------------------------------------- -
-- ---------
------------------ ----------
-- --------
-------------------------------------------------- -
-- ---------------- -
-- -------------
--------------------- ---- -------- ----------------
- ---- -
-- -------------
--------------------- -------- ---- -------------
--------------------------------------------- -
--------------------- ---- ---------- -----------------
-- ---------
------------------ -----------------
---
-
---
---在此示例中，我们首先使用 caches.open() 方法打开一个名为 'my-cache' 的缓存。然后我们在缓存中存储响应，使用 cache.put() 方法，并指定请求和响应作为参数。最后，我们使用 cache.match() 方法查询缓存，并在命中缓存时返回响应，否则从网络请求新响应，并在获取响应后存储它。
缓存更新
缓存的更新是指在缓存中存储的所有资源都是最新的。这意味着，当资源被更新时，缓存中的旧版本必须被清除，并将新版本存储在缓存中。
为了更新缓存，我们可以使用 Service Worker 的 fetch 事件来触发缓存更新。以下是一个示例：
-- -------------------- ---- -------
------------------------------ --------------- -
-- ----
------------------
--------------------------------------------------------- -
-- ---------
-- ---------------- -
--------------------- ---- -------- ----------------
------ ---------------
-
-- ---------------------
--------------------- -------- ---- -------------
------ --------------------------------------------------- -
--------------------- ---- ---------- -----------------
-------------------------------------------- -
------------------------ -----------------
---
------ ----------------
---
--
--
---在此示例中，我们使用 event.respondWith() 阻止默认网络请求，并从缓存中查询响应。当命中缓存时，我们直接返回响应。否则，我们从网络请求响应，并使用 cache.put() 将响应存储在缓存中。同时，我们也返回响应，以便它可以被使用。
总结
PWA 应用使用缓存来增强用户体验，特别是在离线环境中。在本文中，我们探讨了缓存策略、缓存 API 和缓存更新等内容，希望这能够帮助您掌握 PWA 应用中缓存的基础知识。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/645221f6675af4061b5c9f3a