Chrome 正在缓存 service-worker.js，即使使用 Cache-Control: no-store, no-cache Max-Age: 0答案

【问题标题】：Chrome is caching service-worker.js even with Cache-Control: no-store, no-cache Max-Age: 0Chrome 正在缓存 service-worker.js，即使使用 Cache-Control: no-store, no-cache Max-Age: 0
【发布时间】：2019-07-09 02:19:28
【问题描述】：

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 实际上获得了最新的，现在另一个选项卡会触发“安装”事件。
另一个选项卡现在有最新的服务工作者。

倒数第二个测试：

注册 service-worker.js
进行更改，将 service-worker.js 重命名为 sw.js（注册 sw.js）
导航到 http://localhost:4000 并查看它仍在使用缓存的 service-worker.js
导航到http://localhost:4000/dist/service-worker.js -> 404 因此，即使它不再存在，它也在使用缓存版本。

最终测试：

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

但这似乎是一个黑客......

【问题讨论】：

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

【解决方案1】：

由于文件位于 /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

【讨论】：