Access cache response headers with JavaScript

Question

I am trying to access the response header "date" from one of my cached elements.

As you can see in the picture, my request does not return the correct timestamp. Instead, it returns null, and I don't know why.

Here is the code I use:

var cachedFile = "https://www.washingtonpost.com/resizer/rgjyoeu2BaoUyNiojHCKLjN9udM=/1484x0/arc-anglerfish-washpost-prod-washpost.s3.amazonaws.com/public/EXKAUXTXXUI6TJ57ZCSDXBHOGE.jpg";
caches.open("dynamic-content").then(cache => {
  cache.match(cachedFile).then(response => {
    if(! response){
        console.log("not found");
    }else{
        var element = response.headers.get('date');
        console.log(element);
    }
  })
})

My goal is to delete old cached files. Without using workbox or any plugins. If someone knows a way, I'm happy to be enlightened ;)

Try response.headers.get('Date'). If it still not working, you can try console.log(response.headers) to see what is inside the header object. — engineforce
– engineforce, Commented May 17, 2019 at 10:49
'Date' returns null as well, and response.headers returns an Object, showing me which options I have ("append", "delete", "get") -> but it does not show actual header content of the cached file — maxischl
– maxischl, Commented May 17, 2019 at 10:54

Kamil Kiełczewski · Accepted Answer · 2019-05-18 12:14:17Z

2

try (your request return empty headers)

let cache={};

var url = "https://cors-anywhere.herokuapp.com/https://www.washingtonpost.com/resizer/rgjyoeu2BaoUyNiojHCKLjN9udM=/1484x0/arc-anglerfish-washpost-prod-washpost.s3.amazonaws.com/public/EXKAUXTXXUI6TJ57ZCSDXBHOGE.jpg";

async function load(url) {
  let c = cache[url];
  if(c) {
    console.log('Cached headers',c.res.headers);
  } else {
    let res = await fetch(url);
    c = cache[url] = {
      res,
      pic: await res.blob(),
    }
  }
  image.src=""; 
  image.src = URL.createObjectURL(c.pic);
}

function start() {
  load(url);
  btn.innerText="Load from cache";
  
}

<button id="btn" onclick="start()">Load</button><br>
<img id="image" height="150"/>

edited May 18, 2019 at 12:14

answered May 17, 2019 at 11:30

Kamil Kiełczewski

93.7k34 gold badges401 silver badges375 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Access cache response headers with JavaScript

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related