serviceworker可以在url请求中添加标题吗

Question

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

我正在将标签保存在indexedDB中，我知道它在Service Worker中可用。

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

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

这是我的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#控制器动态提供。

我实际上使用的是宝石服务工人导轨

我做错了什么？如何让我的服务工作线程保存根文件并拦截添加标头的请求？这有可能吗？

Answer 1

这要归功于 Jeff Posnick 对构建新请求的回答。您需要使用一个抓取来响应，该抓取会创建一个新的请求，您可以在其中添加标头：

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

function customHeaderRequestFetch(event) {
  // decide for yourself which values you provide to mode and credentials
  const newRequest = new Request(event.request, {
    mode: 'cors',
    credentials: 'omit',
    headers: {
      'x-my-custom-header': 'The Most Amazing Header Ever'
    }
  })
  return fetch(newRequest)
}