javascript - Service Worker 正在被 Workbox 缓存

Question

我有以下工作箱配置

config.plugins.push(
    new GenerateSW({
      swDest: 'service-worker.js',
      clientsClaim: true,
      // Only cache PWA version. Excludes pre-rendered AMP pages
      exclude: [/^(?!shell).*index\.html$/],
      // PWA routing ie single page app
      navigateFallback: '/shell/index.html',
      navigateFallbackBlacklist: [
        /*\.js.*/
      ],
    }),
  )

我的 Express 服务器不缓存 Service Worker

import serve from 'serve-static'

function setHeaders(res: Response, file: string) {
  let cache =
    basename(file) === 'service-worker.js'
      ? 'private,no-cache,no-store,must-revalidate,proxy-revalidate'
      : 'public,max-age=31536000,immutable'
  return res.setHeader('Cache-Control', cache) // don't cache service worker file
}
app.use(serve(BUILD_LOCATION, { setHeaders }))

1. 页面的首次访问按预期进行。 service-worker.js 返回为最新版本，并预缓存所有资源和 shell.html。
2. 刷新时，正如预期的那样，将提供 shell.html，而不是转到服务器，并且 Assets 由 Service Worker 提供。
3. 假设我重建了 Assets 并更新了 service-worker.js。
4. 我希望从服务器加载新的 service-worker.js 并预缓存所有新资源。

相反，我看到以下空响应

我在控制台中收到以下错误该脚本具有不受支持的 MIME 类型('text/html')。

所以看起来 Service Worker 正在服务 shell/index.html，而不是前往服务器获取 service-worker.js。为了验证这一点，我访问了如下所示的 view-source:https://localhost/service-worker.js 。我怎样才能阻止服务 worker 缓存自身。我认为这就是我对 navigateFallbackBlacklist

所做的事情

Answer 1

在浏览器中访问 view-source:https://localhost/service-worker.js 将触发 https://localhost/service-worker.js 的导航请求，然后向您显示该导航请求的 HTTP 响应的结果文本内容。

这不是通常获取服务工作线程更新的方式 - 正常更新流程将向您的服务器发出非导航请求。

如果您想准确查看 service-worker.js 响应的内容，我建议您在“网络”面板中单击该请求，然后转到“响应”面板观众，例如:

或者，您可以在隐身窗口中访问 https://localhost/service-worker.js，即使这会导致导航请求，隐身窗口也不应该有关联的 Service Worker，这样导航请求就不会被拦截。