Chrome甚至使用Cache-Control来缓存service-worker.js:不存储,不缓存最大年龄:0

时间:2019-02-14 23:51:37

标签: javascript google-chrome caching workbox workbox-webpack-plugin

Chrome v72似乎忽略了Cache-Control标头并缓存service-worker.js 为了测试,我将所有资源都设置为使用:

res.set('Cache-Control', 'no-store, no-cache, must-revalidate, private');
res.set('Max-Age', '0');

导航到localhost:4000 / dist / service-worker.js时,我可以验证此设置是否正确:

HTTP/1.1 200 OK
X-Powered-By: Express
Cache-Control: no-store, no-cache, must-revalidate, private
Max-Age: 0
Access-Control-Allow-Origin: *
Accept-Ranges: bytes
Last-Modified: Thu, 14 Feb 2019 23:17:55 GMT
ETag: W/"3c1-168ee4d6297"
Content-Type: application/javascript; charset=UTF-8
Content-Length: 961
Vary: Accept-Encoding
Date: Thu, 14 Feb 2019 23:27:24 GMT
Connection: keep-alive

即使这样,从Chrome 68开始,默认情况下,它也“应该”绕过HTTP缓存: https://developers.google.com/web/updates/2018/06/fresher-sw

显然不是。

我在“应用程序”标签中选中了更新后重新加载。我已经关闭了Chrome,然后重新打开,它仍在使用缓存中的旧service-worker.js。

我的工作箱配置如下:

        new GenerateSW({
            include: [/\.css$/, /\.js$/],
            clientsClaim: true,
            skipWaiting: true
        }),

我也可以验证,Chrome正在缓存service-worker.js,因为如果我这样做:

  • 打开一个新标签并导航至: http://localhost:4000/dist/service-worker.js

  • Chrome实际上会获取最新信息,现在另一个选项卡将触发“安装”事件。

  • 另一个选项卡现在具有最新的服务程序。

倒数第二次测试:

最终测试:

navigator.serviceWorker.register(`/dist/service-worker.js?hack=${Math.random()}`)

当然,现在它获取了所有新的service-worker.js更新。

这是Chrome错误吗?我配置不正确吗? Chrome Canary中也会发生相同的行为。

或者,我可以执行以下操作绕过缓存:

            navigator.serviceWorker
            .register(`/dist/sw.js`)
            .then(registration => {
                registration.update();
            })

但这似乎是一种黑客。...

1 个答案:

答案 0 :(得分:0)

由于文件位于/dist/service-worker.js而不是根目录,因此最终成为范围问题。

要解决范围界定问题,我需要在服务工作者响应中添加以下标头:

res.set('Service-Worker-Allowed', '/');

然后在注册时:

navigator.serviceWorker.register(`/dist/sw.js`, { scope: '/' });

非常感谢本文: https://developers.google.com/web/tools/workbox/guides/troubleshoot-and-debug