javascript - serviceworker 是否可以将 header 添加到 url 请求

Question

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

我将标签保存在 indexedDB 中，据我所知，服务 worker 可以使用该标签。

因此，在我的服务人员中，我想“拦截”对 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 动态提供。

我实际上正在使用 gem serviceworker-rails

我究竟做错了什么？如何让我的服务人员保 stub 文件并拦截添加 header 的请求？这甚至可能吗？

Answer 1

这里归功于 Jeff Posnick his answer on constructing a new Request .您需要使用 fetch 来响应，该 fetch 创建一个新请求，您可以向其中添加 header :

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