CODEWITHSUNDEEP
http-headersprogressive-web-appsviteworkboxcachestorage
Rhecil Codes
Rhecil Codes

Reputation: 541

Workbox fails to fetch a cached Network Request when offline. Vary header?

I am having an issue with runtime caching working offline on my PWA.

I'm using the VitePWA package, which uses Workbox, in GenerateSW mode to build the service worker.

The service worker caches some API responses from a Laravel back-end, to work offline. These issues were not present at the time of developing and shipping the feature a couple of months ago; it was extensively tested and was quite a painful process to get right, but we did succeed.

However, recently a user reported a defect where this no longer works as expected, so at some point in the last 6-8 weeks something has changed. Google Chromes handling of SW/cache?. We have updated our codebase in that time, but nothing particular to the PWA functionality; that has been untouched.

The response is cached in 'Cache Storage' with the right data; I can see it. The only thing different between the live server response and the cached response, that I can tell, is the Vary header:

Source Header
Server vary: Origin, Accept-Encoding
Cache Storage vary: Origin,Authorization, Accept-Encoding

The cached response has the extra Authorization header (with unspaced comma-separation as written). There are little bits and pieces on the internet, in GitHub issues for other web software, that mention that this header can be an issue with caching.

The Workbox console error for this is:

Network request for '/system/api/v1/settings' threw an error. TypeError: Failed to fetch
    at StrategyHandler.fetch (workbox-96d32552.js:2840:33)
    at StrategyHandler.fetchAndCachePut (workbox-96d32552.js:2880:37)
    at NetworkFirst._getNetworkPromise (workbox-96d32552.js:3720:36)
    at NetworkFirst._handle (workbox-96d32552.js:3640:37)
    at NetworkFirst._getResponse (workbox-96d32552.js:3330:33)

My runtime caching config that handles this is:

...
urlPattern: /^regexPattern$/,
  handler: 'NetworkFirst',
  options: {
    cacheName: 'api',
    expiration: {
      maxEntries: 500,
      maxAgeSeconds: 60 * 60 * 24 * 365 * 2
    },
    cacheableResponse: {
      statuses: [0, 200]
    }
  }
...

I tried adding the Workbox ignoreVary option, but that didn't help:

..
urlPattern: /^regexPattern$/,
  handler: 'NetworkFirst',
  options: {
    cacheName: 'api',
    expiration: {
      maxEntries: 500,
      maxAgeSeconds: 60 * 60 * 24 * 365 * 2,
      matchOptions: {
        ignoreVary: true
      }
    },
    cacheableResponse: {
      statuses: [0, 200]
    }
  }
...

Any suggestions, or even a direction to look into? I've run out of ideas.

Many thanks in advance.

Upvotes: 2

Views: 350

Answers (0)

Related Questions