在 PWA 中，为了提高用户体验，缓存是一个非常重要的优化手段。然而，在 PWA 运行过程中，用户可能会处在断网或者弱网络环境中，此时 PWA 的离线模式就显得尤为重要。然而，在离线模式下，由于前端资源是被缓存到缓存中的，因此在不清除缓存的情况下，PWA 一旦进入离线模式后，就无法重新加载最新的资源。那么在这种情况下，如何禁止加载缓存并重新获取最新资源呢？
禁止加载缓存的实现方式
最常见的实现方式是在 URL 参数上添加一个时间戳，例如：
https://example.com/app.js?t=1563301047
每次最新资源更新之后，都会在 URL 参数上追加时间戳，这样就可以确保每次获取的内容都是最新的。但是，这种方式需要手动在 URL 参数上添加时间戳，不仅开发成本较高，而且使用起来也不太友好。
更好的方式是使用 Cache API 和 Service Worker 的简单代码方式，如下所示：
-- -------------------- ---- -------
------------------------------ --------------- -
------------------
--------------------------------------------------- -
-- --------- --- ---------- -
------ ---------
- ---- -
------ ---------------------------------- ---------- -
----- -------- - -----------------
------------------------------------- ------- -
------------------------ ----------
---
------ ---------
----------------- -- -
-- ------ ------
---
-
--
--
---这段代码中，我们在 Service Worker 中监听 fetch 事件，然后判断缓存中是否存在对应资源，如果存在，则直接返回缓存中的资源，否则使用 fetch 方法获取最新资源。通过这种方式，我们可以处理所有的资源请求，从而确保即使在离线情况下，也可以正常加载新的资源。
示例代码
下面是一个基本的 Service Worker 文件，在其中添加了上述缓存和更新的代码：
-- -------------------- ---- -------
---- --------
----- ---------- - -----------
-- ----
----- ----------- - -
----
-------------
-------------
--
-- -- ------- --------------
-------------------------------- ----- -- -
----------------
-----------------------
----------- -- --------------------------
-------- -- -------------------
--
---
-- ----------
------------------------------ --------------- -
------------------
--------------------------------------------------- -
-- --------- --- ---------- -
------ ---------
- ---- -
------ ---------------------------------- ---------- -
----- -------- - -----------------
------------------------------------- ------- -
------------------------ ----------
---
------ ---------
----------------- -- -
-- ------ ------
---
-
--
--
---
-- --------
--------------------------------- ----- -- -
----------------
----------------------------- -- ------------
------------------------ -- -
-- ---------- --- ----------- ------ -------------------------
--
---------- -- ---------------------
--
---总结
PWA 是一种非常有用的技术，但是在社交媒体、电商等需要实时更新的场景下，离线模式下可能会出现缓存内容无法更新的问题。因此，开发者需要了解如何禁止加载缓存，从而确保在离线模式下也能够正常加载最新内容。上述示例代码可能不够完整，开发者需要根据自己的业务逻辑进行适当调整，以便更好地实现 PWA 缓存与更新的功能。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64b3485d48841e9894f8a7ab