Why doesn't Vary: Cookie work in a service worker?

Question

In my app, I set a cookie and then call fetch('/foo', {credentials: 'same-origin'}). This is intercepted in the service worker which uses caches to cache the request and response. The response has Vary: Cookie set. Then, I change the cookie and call fetch again as above. But when I call caches.match in the service worker, the old request is matched! Why is this happening? Can I fix it?

Answer 1

I cannot comment (low rep) so I am posting here.

Service workers cannot intercept the cookies. There is a proposed new api in development .
Why don't you try to set a custom header for your requests depending on the content of the cookie.

Request 1:
X-Cookie-Value: 1
Vary: X-Cookie-Value

Request 2:
X-Cookie-Value: 2
Vary: X-Cookie-Value