Можно ли изменить заголовки ответов кеша сервисного работника?

Я пытаюсь пометить ресурсы, которые хранятся в кеше сервисного работника.

Я думал, что можно будет добавить к ресурсу пользовательский заголовок, который мог бы указывать на это, однако оказалось, что модификации заголовка удаляются, как только ресурс сохраняется в кэше сервис-воркера. Так ли это? Я ничего не вижу в спецификации кэша об изменении заголовков ответа .

Вот пример того, что я пробовал:

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

Я также попытался удалить пользовательские заголовки, изменить существующие заголовки и создать объект ответа new Response() вместо захвата существующего.

Изменить: я использую Chrome 56.


javascript progressive-web-apps service-worker
person David Scales    schedule 03.03.2017    source источник

Ответы (1)


arrow_upward
11
arrow_downward

Для этого вам нужно будет создать новый ответ:

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

Текущая демонстрация (см. консоль)

person JaffaTheCake    schedule 16.03.2017
comment
Обратите внимание, что это не будет работать в Edge 17 и 18, так как он имеет частичную поддержку потоков. У него есть свойство response.body, но он не может создать новый ответ на основе этого свойства. Обходные пути см. в этой проблеме: github.com/GoogleChrome/workbox/issues/1473. - person Philip Walton; 08.04.2019