I am trying to mark resources that are being stored in the service worker cache.

I thought it would be possible to add a custom header to the resource that could indicate this, however, it appears that header modifications are removed once a resource is stored in the service worker cache. Is this the case? I don't see anything in the cache spec about modifying response headers.

Here is an example of what I have tried:

// I successfully cache a resource (confirmed in Dev Tools)
caches.open('testCache').then(cache => {
    cache.add('kitten.jpg');
})
.then(() => {
    console.log('successfully cached image'); // logs as expected
});

// placeholder
var modifiedResponse;

// get the cached resource
caches.open('testCache')
.then(cache => {
  return cache.match('kitten.jpg');
})

// modify the resource's headers
.then(response => {
  modifiedResponse = response;
  modifiedResponse.headers.append('x-new-header', 'test-value');
  // confirm that the header was modified
  console.log(modifiedResponse.headers.get('x-new-header')); // logs 'test-value'
  return caches.open('testCache');
})

// put the modified resource back into the cache
.then((cache) => {
  return cache.put('kitten.jpg', modifiedResponse);
})

// get the modified resource back out again
.then(() => {
  return caches.match('kitten.jpg');
})

// the modifed header wasn't saved!
.then(response => {
  console.log(response.headers.get('x-new-header')); // logs null
});

I have also tried deleting custom headers, modifying existing headers, and creating a new Response() response object instead of grabbing an existing one.

Edit: I am using Chrome 56.

I am trying to mark resources that are being stored in the service worker cache.

I thought it would be possible to add a custom header to the resource that could indicate this, however, it appears that header modifications are removed once a resource is stored in the service worker cache. Is this the case? I don't see anything in the cache spec about modifying response headers.

Here is an example of what I have tried:

// I successfully cache a resource (confirmed in Dev Tools)
caches.open('testCache').then(cache => {
    cache.add('kitten.jpg');
})
.then(() => {
    console.log('successfully cached image'); // logs as expected
});

// placeholder
var modifiedResponse;

// get the cached resource
caches.open('testCache')
.then(cache => {
  return cache.match('kitten.jpg');
})

// modify the resource's headers
.then(response => {
  modifiedResponse = response;
  modifiedResponse.headers.append('x-new-header', 'test-value');
  // confirm that the header was modified
  console.log(modifiedResponse.headers.get('x-new-header')); // logs 'test-value'
  return caches.open('testCache');
})

// put the modified resource back into the cache
.then((cache) => {
  return cache.put('kitten.jpg', modifiedResponse);
})

// get the modified resource back out again
.then(() => {
  return caches.match('kitten.jpg');
})

// the modifed header wasn't saved!
.then(response => {
  console.log(response.headers.get('x-new-header')); // logs null
});

I have also tried deleting custom headers, modifying existing headers, and creating a new Response() response object instead of grabbing an existing one.

Edit: I am using Chrome 56.

• javascript
• service-worker
• progressive-web-apps

1 Answer 1

You would have to create a new response to do this:

fetch('./').then(response => {
  console.log(new Map(response.headers));

  const newHeaders = new Headers(response.headers);
  newHeaders.append('x-foo', 'bar');

  const anotherResponse = new Response(response.body, {
    status: response.status,
    statusText: response.statusText,
    headers: newHeaders
  });

  console.log(new Map(anotherResponse.headers));
});

Live demo (see the console)