Assets downloaded from network when initiated from script tag

Question

I'm using workbox with workbox-webpack-plugin to cache some assets. My current config is supposed to cache two files: a .js and a .css. Both files are being cached properly, but the problem is that the browser still downloads them from the network, and I have no idea why.

Here's the workbox plugin in my webpack config that generates the service worker:

new GenerateSW({
  swDest: 'service-worker.js',
  importWorkboxFrom: 'local',
  chunks: ['myChunk'],
  skipWaiting: true,
  clientsClaim: true,
  ignoreUrlParametersMatching: [/.*/],
  cacheId: 'myCacheId',
}),

Here's the generated service worker:

/**
 * Welcome to your Workbox-powered service worker!
 *
 * You'll need to register this file in your web app and you should
 * disable HTTP caching for this file too.
 * See https://xxx
 *
 * The rest of the code is auto-generated. Please don't update this file
 * directly; instead, make changes to your Workbox build configuration
 * and re-run your build process.
 * See https://xxx
 */

importScripts("workbox-v3.6.3/workbox-sw.js");
workbox.setConfig({modulePathPrefix: "workbox-v3.6.3"});

importScripts(
  "precache-manifest.14645da973669ef1d2247d1863e806bd.js"
);

workbox.core.setCacheNameDetails({prefix: "myCacheId"});

workbox.skipWaiting();
workbox.clientsClaim();

/**
 * The workboxSW.precacheAndRoute() method efficiently caches and responds to
 * requests for URLs in the manifest.
 * See https://xxx
 */
self.__precacheManifest = [].concat(self.__precacheManifest || []);
workbox.precaching.suppressWarnings();
workbox.precaching.precacheAndRoute(self.__precacheManifest, {
  "ignoreUrlParametersMatching": [/.*/]
});

And precache manifest:

self.__precacheManifest = [
  {
    "revision": "9b22d66a17276ac21d45",
    "url": "myChunk.js"
  },
  {
    "revision": "9b22d66a17276ac21d45",
    "url": "myChunk.css"
  }
];

The precaching actually works, but it looks like the fetch event is not intercepted by the service worker. If I try to download the files directly from the address bar in Chrome, the file is loaded correctly from the service worker. But when it's loaded from the script tag of my page, it's still being downloaded from the network.

Here are the request header when loaded from the script tag:

GET /assets/myChunk.js?1546600720154 HTTP/1.1
Host: localhost:5000
Connection: keep-alive
User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_14_2) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/71.0.3578.98 Safari/537.36
Accept: */*
Referer: http://localhost:5000/xxx
Accept-Encoding: gzip, deflate, br
Accept-Language: en-US,en;q=0.9,fr-BE;q=0.8,fr;q=0.7,te-IN;q=0.6,te;q=0.5
Cookie: visitor_id=f86c312d-76e2-468d-a5c5-45c47fa3bbdc

Any help would be great!

Can you post a screenshot of the Network DevTools panel showing the relevant traffic? — Jeff Posnick
Did you check your service worker clients (DevTools / Application / your service worker)? Is your website listed there? — chestozo

Jeff Posnick Jeff Posnick · Accepted Answer · 2019-01-07T16:20:46

As per the HTTP traffic snippet you've posted, your <script> tag results in a request for /assets/myChunk.js?1546600720154. The 1546600720154 query parameter bit is causing a mismatch when attempting to match that request against the precached URLs.

I'd suggest one of two things:

Configure webpack to add a content hash as part of your URLs, and use that in favor of the time-based URL parameters for cache-busting. Workbox should be able to just read those hashed URLs as-is.
Continue using the time-based URL query parameter for cache-busting, but configure Workbox to ignore those parameters when determining whether there's a match against the precached URLs. You can do that by using the ignoreUrlParametersMatching option. It takes an array of RegExps, and something like ignoreUrlParametersMatching: [/^\d+$/] would be enough to tell Workbox to ignore any query parameters that consist entirely of numbers.

I'd probably go with option 1 if you could.

Assets downloaded from network when initiated from script tag

1 Answers