众所周知，使用 Service Worker 技术可以实现 PWA，提升 Web 应用的性能和用户体验。其中一个重要功能就是缓存，使得应用可以离线使用。但是在更新版本的应用中，也会遇到图片缓存不刷新的问题，这让很多开发者头疼。本文旨在介绍如何快速解决图片缓存不刷新的问题。
缓存图像的问题
首先，我们需要了解缓存带来的问题。在使用 Service Worker 缓存图像时，因为图像的大小、数量都很大，所以需要在改动时及时更新缓存，否则会遇到图片不更新或者不显示的情况。
在默认情况下，Service Worker 会缓存所有来自同一 URL 的资源文件，一个 URL 对应了一个状态。如果某个文件的状态发生了变化，那么它的 URL 也会发生变化。于是就会出现这样的情况：即使代码已经更新，页面还是自缓存以来的版本。
解决方案
针对缓存图像的问题，一种最简单明了的解决方案是给每个图片URL添加版本号，这样当图片内容发生变化时，URL 中的版本号也会随之改变，从而服务端能为客户端返回新版本的图片，这确保了缓存的图像和实时的图像相符。下面我们就来具体介绍如何实现。
1. 缓存清理策略
我们可以添加一个占位符，通过改变 URL 参数的方式实现版本控制，例如：
----- ------------ - ----- ----- -------- - -------------------------------
这里我们将 ?v= 后面的版本号设置为 v1，作为占位符。每次有代码更新时，我们只需要改动一下 v1 为 v2，就可以保证图片更新失效，触发更新。
接下来，我们需要实现一个缓存清理策略。具体地，当客户端与服务端连接时，需要检查当前的版本号是否与本地保存的版本一致，如果不一致，则需要执行缓存清理操作。代码实现如下：
------------------------------ ----- -- -
-- ------------------------------------ -
----- ---------------- - ----------------------------------------
----- ------------------- - ---------------- -
------------------- -
-----
------------------
--------------------------- - ------------- ---- ---------------- -- -
-- ---------- -
----- ------------- - -----------------------------------
-- -------------- -- ---------------- --- -------------------- -
----------------------------
----------------------
-
------ ---------
-
------ ---------------------
---
--
-
---这段代码实现了一个最简单的缓存清理策略。我们在 fetch 事件中监视页面上所有的图像请求，并检查 v= 参数。如果 v= 中的版本号不匹配，我们就删除缓存中的图像，并强制重新加载页面。如果匹配，则返回本地缓存。
2. Service Worker 更新
有了缓存清理策略后，我们还需要在每次 Service Worker 实例化时检查版本号是否一致，如果不一致，需要更新 Service Worker。
----- ------------ - -----
----- --------- - ---------------------------
-------------------------------- ----- -- -
----------------
------
----------------
----------- --
--------------
----
--------------
--------------
-------------------------------
---
-
-------- -- -------------------
--
---
--------------------------------- ----- -- -
----------------
-------------------------- --
------------
--------------- -- -
-- ---- --- ---------- -
------ -------------------
-
------ -----
---
--
--------- -- -
---------------------
---
--
---
------------------------------ ----- -- -
-- ----- -----
---
这里我们用一个常量 cacheVersion 来控制缓存版本，每次需要更新时，只需更新该常量的值。在 install 事件中，我们添加需要缓存的文件，并给图片添加版本号。同时，在 activiate 事件中，我们需要删除旧版本的缓存。
3. 页面代码
最后，我们应该对页面代码做出相应的调整，以确保每个请求的 URL 都包含 ?v= 参数，代码如下：
---- ------------------------------------ --
总结
至此，我们成功解决了图片缓存不刷新的问题。我们通过为图片URL添加版本号，实现了版本控制，并且通过添加缓存清理策略，使得缓存可以更新。在实际开发中，可以根据实际情况来做出相应的调整。同时，我们还需要注意，由于添加了版本号，相同的图片也会被认为是不同的图片，因此在调用图片时需要格外注意，以免出现不必要的错误。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/652c948d7d4982a6ebe3f7da