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

Question

Chrome v72 Seems to be ignoring Cache-Control headers and caching service-worker.js To test, I've set all resources to use:

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

When navigating to localhost:4000/dist/service-worker.js I'm able to verify this is set correctly:

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

Even with this, as of Chrome 68, it "should" bypass the HTTP Cache by default: https://developers.google.com/web/updates/2018/06/fresher-sw

It's clearly not.

I have update on reload checked in the Applications Tab. I have closed Chrome and reopened and it still is using the old service-worker.js from the cache.

My workbox config looks like:

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

I'm also able to verify, Chrome is caching the service-worker.js because if I:

• Open a new tab and navigate to: http://localhost:4000/dist/service-worker.js

• Chrome actually gets the LATEST, and now the other tab fires the "install" event.

• The other tab, now has the latest service worker.

The second to last test:

• Register service-worker.js
• Make changes, rename service-worker.js to sw.js (register sw.js)
• Navigate to http://localhost:4000 and see it's still using the cached service-worker.js
• Navigate to http://localhost:4000/dist/service-worker.js -> 404 So even though it no longer exists, it's using the cached version.

The final test:

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

Of course, now it picks up all the new service-worker.js updates.

Is this a Chrome Bug? Am I not configuring something correctly? This same behavior happens in Chrome Canary.

Alternatively, I can do the following to bypass the cache:

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

But this seems like a hack....

Answer 1

It ended up being a scoping issue due to the file being in /dist/service-worker.js and not in the root.

To fix the scoping issue I needed to add the following header to the service worker response:

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

Then when registering:

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

Huge thanks to this article: https://developers.google.com/web/tools/workbox/guides/troubleshoot-and-debug