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 }))

页面的首次访问按预期方式工作。 service-worker.js返回最新版本，并预缓存所有资产和shell.html。
如预期的那样，刷新后，shell.html会被提供而不是去服务器，并且资产将由服务工作者提供。
假设我重建资产并更新service-worker.js。
我希望从服务器中加载新的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.js响应的内容，建议您在“网络”面板中单击该请求，然后转到查看器的“响应”面板，例如：

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

服务工作者正在由工作箱缓存

1 个答案: