Browser Cache API is not working for cookie authenticated services

Question

I am trying browser Cache API mechanism, but the api which is going to be cached is using cookie authentication. And am receiving 'unauthorized-401' error message. I am suspecting the http cookie supposed to send for all the api request is not sending when i am calling from cache.add(apiurl)

         if ('caches' in window) {
                caches.open('cachename').then(cache => {
                    cache.add(apiUrl).then(() => {
                        //done!
                    })
                });
            }

I found a way to handle this. – Sudheer Muhammed Jun 10 '19 at 06:38 — Sudheer Muhammed, Jun 10 '19 at 06:38

score 0 · Accepted Answer · answered Jun 10 '19 at 06:45

I found a way to handle this. Instead of adding URL in add() method, create a Request object with "credentials: include " or "credentials: same-orgin" depends on your CORS settings.

 if ('caches' in window) {
            caches.open('cachename').then(cache => {
                cache.add(new Request('apiurl', {credentials: 'include'}).then(() => {
                    //done!
                })
            });
        }

//Or

if ('caches' in window) {
            caches.open('cachename').then(cache => {
                cache.add(new Request('apiurl', {credentials: 'same-origin'}).then(() => {
                    //done!
                })
            });
        }

score 0 · Answer 2 · answered Apr 24 '21 at 17:01

It is not recommended to use cache.add with new Request. At least it is new request to server, and can cache irrelevant data. Instead I recommend use cache.put + res.clone()

if ('caches' in window) {
  if (navigator.onLine) {
    return fetch(request)
        .then(res => {
            const resClone = res.clone();
            caches.open(KEY).then((cache) => cache.put(request, resClone));

            return res;
        })
        .catch(err => console.error(err));
  }

  // some other logic
}

https://developer.mozilla.org/en-US/docs/Web/API/Service_Worker_API/Using_Service_Workers#recovering_failed_requests

Browser Cache API is not working for cookie authenticated services

2 Answers2