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.