ist es möglich, Service-Arbeiter-Cache-Antwort-Header zu ändern?

Question

Ich versuche Ressourcen zu kennzeichnen, die im Service-Worker-Cache gespeichert werden.

Ich dachte, es wäre möglich, einen benutzerdefinierten Header zur Ressource hinzuzufügen, die dies anzeigen könnte, jedoch scheint es, dass Header-Änderungen entfernt werden, sobald eine Ressource im Service-Worker-Cache gespeichert wird. Ist das der Fall? Ich sehe nichts in der cache spec über Ändern von Antwortheadern. Hier

ist ein Beispiel dafür, was ich versucht habe:

// 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 
}); 

Ich habe auch versucht, benutzerdefinierte Header zu löschen, die Änderung bereits bestehender Header, und die Schaffung eines new Response() Response-Objekt statt Grabbing einen vorhandenen.

Edit: Ich bin mit Chrome 56

Answer 1

Sie müßten eine neue Antwort erstellen, dies zu tun:

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 (siehe die Konsole)