javascript - Service Worker 正在被工作箱缓存

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.*/
      ],
    }),
  )

我的快递服务器没有缓存服务人员

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提供服务而不是转到服务器，并且资产是从服务工作者提供的。
3. 假设我重建资产并更新service-worker.js.
4. 我希望service-worker.js从服务器加载新资源，并预缓存所有新资源。

相反，我看到以下空响应

我在控制台中收到以下错误The script has an unsupported MIME type ('text/html').

所以看起来服务工作者正在服务shell/index.html而不是去服务器service-worker.js。为了验证这一点，我访问了view-source:https://localhost/service-worker.js如下所示。如何阻止服务人员缓存自身。我以为这就是我正在做的navigateFallbackBlacklist

Answer 1

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

这不是通常获取 Service Worker 更新的方式——正常的更新流程会向您的服务器发出非导航请求。

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

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