Split service worker cache

Hello, we have a problem with splitting service worker cache.
Example of out config

const key = new CustomCacheKey()
  .excludeAllQueryParametersExcept(
    'q'
  )
  .addCookie('cookieName')

SERVICE_WORKER: {
    key,
    browser: {
      maxAgeSeconds: SERVICE_WORKER,
    },
    edge: {
      maxAgeSeconds: SERVICE_WORKER,
      staleWhileRevalidateSeconds: 60 * 60 * 24,
    },
  },

And when we change the cookie value “cookieName”, and then navigating through the site we still getting cached pages from service worker.
Could you help me to solve the problem? What additional information should i provide?
Thanks, best regards

1 Like

What you’re doing looks correct. Please make sure you’ve cleared your service worker cache and unregistered the old service worker before testing any changes to the caching logic.

Yeah, i did all this stuff. Also i tried with incognito mode as well.
But it is not working properly
Steps:

  1. Clear service worker cache and unregistered the old service worker
  2. Did some actions with the site
  3. Change cookie value
  4. I can see the cached value when navigation through the site
    But i expect then when i change cookie value i will not have cache, it should split the cache by “key”

Alright, we will try to reproduce this internally and let you know what we find.

Thanks, will wait your answer

Any updates here @mark.brocato ?

Eugene,

I have tried locally using our Next.js example app, configuring the cache key just as you described:

cache({
  key: new CustomCacheKey()
    .excludeAllQueryParametersExcept('q')
    .addCookie('cookieName'),
  browser: {
    maxAgeSeconds: 60 * 60 * 24 * 365 * 10,
    serviceWorkerSeconds: 60 * 60 * 24,
  },
  edge: {
    maxAgeSeconds: 60 * 60 * 24 * 365 * 10,
    staleWhileRevalidateSeconds: 60 * 60 * 24,
  },
});

I set my cookie to cookieName=foo, make requests to the different categories and observe a cached response. I close the browser (incognito), open again and set the cookie to cookieName=bar and make the same requests and get a different response.

Any more details you can provide such as a forked example of the above app or screenshots to show what you are experiencing?

Thanks for trying :relaxed: But the main problem that we did’nt close the browser
Could you try this scenario but do not close the browser.
Example

  1. Default Cookie: cookieName=foo
  2. Make requests to the different categories and observe a cached response
  3. Press some button change out cookie to cookieName=foo and DO NOT close the browser

Are you sure the subsequent requests after you change the cookie value are going through the service worker? A screenshot of the network requests that you are seeing in the browser would be helpful here.

Yes, you can see the video attached
When we toggle this switch we change cookie value (see video)

And then after changing as you can see request for “/rugs” comes from service worker

You can see all steps:

You can see full video here (DropMeFiles – free one-click file sharing service) link expire at 14 days

Is it clear now? Or maybe you need some more information?
Thanks!

I think the issue may be that you have caching value for both the browser and service worker. Set the config to something like:

browser: {
  maxAgeSeconds: 0,
  serviceWorkerSeconds: 60 * 60 * 24, // whatever limit you desire
}