使用 PWABuilder 中的缓存优先网络服务工作者永远不会更新？

Question

我正在使用 PWABuilder for my website https://digimoncard.io/ 的服务工作者。

缓存优先网络服务工作者JS文件包含以下代码：

// This is the service worker with the Cache-first network

const CACHE = "pwabuilder-precache";

importScripts('https://storage.googleapis.com/workbox-cdn/releases/5.0.0/workbox-sw.js');

self.addEventListener("message", (event) => {
  if (event.data && event.data.type === "SKIP_WAITING") {
    self.skipWaiting();
  }
});

workbox.routing.registerRoute(
  new RegExp('/*'),
  new workbox.strategies.CacheFirst({
    cacheName: CACHE
  })
);

然后我的 index.php 文件正文下方有以下代码：

<!-- PWA -->
<script type="module">
import 'https://cdn.jsdelivr.net/npm/@pwabuilder/pwaupdate';

const el = document.createElement('pwa-update');
document.body.appendChild(el);    
</script>
<!-- END PWA -->

Service Worker 似乎从不更新？无论我在任何页面上更改什么（内容、文件版本控制等），如果它已经被缓存，服务器工作人员都不会更新。我可以通过清除浏览器缓存来手动修复此问题，但我要么遗漏了什么，要么这是故意的？例如，我在 phone 上访问的版本的内容已经过时 2 天了。

Answer 1

这是使用缓存优先策略时的预期行为。假设缓存中有匹配项，那就是将要使用的响应。

如果您正在寻找 "use the cache response if present, but also update it in the background" 方法，您可以切换到过时再验证策略。

可以在 https://developers.google.com/web/tools/workbox/modules/workbox-strategies

找到 Workbox 开箱即用支持的完整策略列表

使用 PWABuilder 中的缓存优先网络服务工作者永远不会更新？

Using Cache-first network service worker from PWABuilder never updates?

javascript

service-worker

progressive-web-apps