在 PWA (Progressive Web App) 中，缓存可以帮助我们提高应用的访问速度，提供离线访问能力，及减轻服务器的负担。但是在一些情况下，我们希望主动清除缓存，例如在某些用户行为触发后，我们要求清除缓存以确保最新内容的展示； 或者我们需要保证用户每次访问都获得最新版本的资源。本文将介绍如何解决 PWA 中缓存清除问题，包括缓存的关闭、清空及指定 URL 的缓存清除。
关闭缓存
在一些特殊情况下，我们需要关闭 PWA 的缓存功能。我们可以在 Service Worker 管理的 JS 文件中引入如下代码实现：
-- ---- ------------------------------ --------------- - -------------------------------------- ------- ------------- --
上述代码中，fetch 方法的第二个参数传了一个空缓存对象，因此 Promise 就不会使用缓存来处理响应，每次都会向服务器请求响应。
清空所有缓存
在某些情况下，需要清空当前页面的所有缓存，以保证用户获得最新内容。
-- ----------- ----------------- --- ----------------------- -- - ---------------- -- ------------------- --
该代码既清空了应用的离线缓存，又清空了 PWA 的所有缓存文件。
清除指定 URL 缓存
如果没有必要将所有缓存都清空，而是只需要清除新的资源缓存，我们只需将 URL 与缓存匹配并删除即可。 示例如下：
-- ------ --- --
----------------------- -- -
---------------- -- -
------------------ --- -- --- --- -
------------------
-
--
--上述代码中，如果找到匹配 URL 的缓存，在列表中删除即可。
延时删除缓存
脚本文件的执行顺序是按顺序执行的，其中一些时间较长的操作会影响整个线程的执行效率。如果代码需要执行时间较长，我们可以将删除缓存的操作放在一个好的时机执行，例如当页面完全加载后再执行代码。
-- ---------------
------------------------------- --------------- -
--------------------- -
----------------------- -- -
---------------- -- -------------------
--
-- -----
--上述代码中，页面加载完成后将会延迟 2 秒，等待其他操作完成后再删除缓存，这样可以减轻脚本执行的压力。
结论
以上是基本的缓存清除方案，可以满足绝大多数 PWA 缓存清除需求。关于这些方法的更多信息可参阅 Cache API。
总的来说，了解不同缓存清除方案，能够帮助我们更好地掌控 PWA 应用中的缓存机制，提高用户访问体验。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/6714a893ad1e889fe214da78