serviceworker 是否可以向 url 请求添加标头

我有一个网站，我不想让人们创建帐户。它是一个新闻提要，其中每篇新闻文章都进行了分类。我想让人们标记他们感兴趣的类别，以便下次他们访问该网站时，它只显示标记类别的新闻。

我将标签保存在 indexedDB 中，据我所知，它可以在服务工作者中使用。

因此，在我的服务人员中，我想“拦截”请求www.my-url.com，检查indexDB以了解此人感兴趣的类别，并添加一些标题，例如'x-my-customer-header': 'technology,physics,sports'这样我的服务器就可以只响应这些类别的动态 html。

然而，我正在努力让服务工作人员正确缓存我的根响应。在我的 serviceworker.js 中，我控制台记录每个event.request为了onFetch处理程序。没有与我的根 url 相关的请求。我现在正在本地主机上进行测试，但我只看到对 css 和 js 文件的提取请求。

这是我的 onFetch：

function onFetch(event) {
  console.log('onFetch',event.request.url);
  event.request.headers["X-my-custom-header"] = "technology,sports";
  event.respondWith(
    // try to return untouched request from network first
    fetch(event.request).catch(function() {
      // if it fails, try to return request from the cache
      caches.match(event.request).then(function(response) {
        if (response) {
          return response;
        }
        // if not found in cache, return default offline content for navigate requests
        if (event.request.mode === 'navigate' ||
          (event.request.method === 'GET' && event.request.headers.get('accept').includes('text/html'))) {
          return caches.match('/offline.html');
        }
      })
    })
  );
}

我使用的是 Rails，因此不存在要缓存的 index.html，当用户点击我的 url 时，该页面将从我的 news#controller 动态提供。

我实际上正在使用宝石serviceworker-rails 服务工作者轨道 https://github.com/rossta/serviceworker-rails

我究竟做错了什么？如何让我的 Service Worker 保存根文件并拦截添加标头的请求？这可能吗？

感谢杰夫·波斯尼克 (Jeff Posnick)他对构建新请求的回答 https://stackoverflow.com/questions/39109789/what-limitations-apply-to-opaque-responses。您需要通过创建一个新请求的 fetch 来响应，您可以在其中添加标头：

self.addEventListener('fetch', event => {
  event.respondWith(customHeaderRequestFetch(event))
})

function customHeaderRequestFetch(event) {
  // decide for yourself which values you provide to mode and credentials

  // Copy existing headers
  const headers = new Headers(event.request.headers);

  // Set a new header
  headers.set('x-my-custom-header', 'The Most Amazing Header Ever');
  // Delete a header
  headers.delete('x-request');

  const newRequest = new Request(event.request, {
    mode: 'cors',
    credentials: 'omit',
    headers: headers
  })
  return fetch(newRequest)
}