简介
workbox-cacheable-response 是一个 Workbox 库的插件，可以方便地实现对响应缓存的控制。它为我们提供了一种简单的方式来检查给定响应是否可缓存，并决定是否将其存储在缓存中。
该插件是专门为 Service Worker 开发而设计的，在前端开发中使用广泛。通过使用workbox-cacheable-response，我们可以轻松地将缓存策略添加到我们的 Service Worker 中。
本文将介绍如何使用 workbox-cacheable-response 插件来实现缓存策略，并提供详细的示例代码。
安装
要使用 workbox-cacheable-response 插件，您需要先安装 Workbox 库：
npm install workbox-core
接下来，您可以像安装其他 npm 包一样安装 workbox-cacheable-response：
npm install workbox-cacheable-response
使用
在使用 workbox-cacheable-response 之前，您需要先创建一个 workbox 对象。这个对象可以帮助我们管理缓存和网络请求等操作。
importScripts('https://storage.googleapis.com/workbox-cdn/releases/6.3.0/workbox-sw.js');
const workbox = new WorkboxSW();然后，我们可以使用 registerRoute() 方法注册路由并配置缓存策略。
-- -------------------- ---- -------
------------------------------
--------------------------
--- ---------------------------------
---------- ------------
-------- -
--- ---------------------------------------------------
--------- --- -----
---
--
--
--在上面的代码中，我们使用了 NetworkFirst 策略来配置缓存策略。这将首先尝试从网络加载响应，如果网络请求失败，则会从缓存中获取响应。我们还为缓存添加了一个名称（api-cache）和 CacheableResponsePlugin 插件。该插件指示 Workbox 哪些响应是可缓存的，并将它们保存到缓存中。
示例代码
下面是一个完整的示例代码，演示了如何使用 workbox-cacheable-response 来实现缓存策略：
-- -------------------- ---- -------
-----------------------------------------------------------------------------------------
----- ------- - --- ------------
-- ----
----- ------------- - --- ---------------------------------
---------- ------------
-------- -
--- ---------------------------------------------------
--------- --- -----
---
--
---
-- ----
------------------------------
--------------------------
-------------
--
-- -- ----- --
------------------------------ --------------- -
-- ---------
----- --------- - ------------------------------------------------------
-- ----------- -
-- ---------
------------------------------------------------- -- -
------------------------ ------------------------
---
-
---在上面的代码中，我们首先创建了一个 NetworkFirst 缓存策略，并为其添加了 CacheableResponsePlugin 插件。然后，我们使用 registerRoute() 方法将此路由注册到 Service Worker 中。最后，我们在 fetch 事件中检查响应是否可缓存，并将其存储到缓存中。
总结
通过使用 workbox-cacheable-response 插件，我们可以轻松地实现对响应缓存的控制。该插件使得添加缓存策略变得简单易行，同时提供
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/47634