workbox-broadcast-update not limiting to only 'headersToCheck' option. firstResponse.headers and secondResponse.headers are empty

[cepm-nate]

trafficstars

Library Affected: workbox-broadcast-update

Browser & Platform: all browsers (tested Chrome & Firefox)

Issue or Feature Request Description:

• I get Unable to determine where the response has been updated because none of the headers that would be checked are present.
• Console at "Debug" level shows that both firstResponse.headers and secondResponse.headers are empty. Dropping a breakpoint into the responsesAreSame function shows the same thing (see attached picture).
• 
• Also of note is that headersToCheck has three values, even though I'm explicitly telling it to ONLY use 'etag' via my initialization code:

workbox.routing.registerRoute(
  /https:\/\/xxxxxxxxxxxxxxx\/.*\/attachments\/.*/,
  new workbox.strategies.StaleWhileRevalidate({
    cacheName: 'attachments',
    fetchOptions: {
      mode: 'cors',
      site: 'cross-site',
    },
    plugins: [
      new workbox.cacheableResponse.Plugin({
        statuses: [200], // Removed 0, so it won't cache OPAQUE respones (no headers)
      }),
      new workbox.expiration.Plugin({
        maxEntries: 30,
        maxAgeSeconds: 345600,
        purgeOnQuotaError: false,
      }),
      new workbox.broadcastUpdate.Plugin('attachment-updates', {
        headersToCheck: ['etag'], // Can't use 'content-length', as that gets removed by GZIP.
      }),
    ],
  }),
  'GET',
);

Inside the browser's cache [DevTools -> Application -> Cache Storage -> Attachments...], I can see the cached items, and tapping on them shows me all the headers, so it appears that the headers are available to Workbox.

Also note that the NPM RESTIFY gzipResponse middleware on the API REMOVES the content-length header in responses, so that's why I'm trying to also ignore it with the broadcast-update plugin. I've tried initializing the plugin without the headersToCheck setting, but get exactly the same result.

Can anyone point out what I might be missing, or help me understand what other info would help resolve this?

[jeffposnick]

Hello @cepm-nate!

One thing that stands out is that you're calling the workbox.broadcastUpdate.Plugin() constructor with the wrong arguments. You're passing in a string as the first parameter, and an object as the second, and that first parameter shouldn't be there.

Instead, the code should look like:

new workbox.broadcastUpdate.Plugin({
  headersToCheck: ['etag'],
})

(C.f. https://developers.google.com/web/tools/workbox/modules/workbox-broadcast-update#customize_headers_to_check)

Also, I'm not sure what site: 'cross-site' is meant to signify in your fetchOptions, but since that's just something that's not supported as part of the Fetch API, I'm assuming it would be ignored rather than "break" anything.

Can you trying changing your call to the constructor and see if that helps?