serviceworker 是否可以向 url 请求添加标头 [英] serviceworker is it possible to add headers to url request

问题描述

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

I have a website which I don't want to make people create accounts. It is a news feed with each news article categorized. I want to allow people to tag the categories they are interested in so that next time they go to the site it only shows news for the categories that are tagged.

我将标签保存在 indexedDB 中，据我所知，它在 service worker 中可用.

I'm saving the tags in an indexedDB which I understand is available in a service worker.

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

Hence in my service worker I want to "intercept" requests to www.my-url.com, check the indexDB for what categories this person is interested in, and add some headers like 'x-my-customer-header': 'technology,physics,sports' so that my server can respond with a dynamic html of those categories only.

但是，我正在努力让 Service Worker 正确缓存我的根响应.在我的 serviceworker.js 中，我控制台记录了 onFetch 处理程序的每个 event.request.没有与我的根 url 相关的请求.我现在正在我的本地主机上进行测试，但我只看到对 css & 的 fetch 请求.js 文件.

However I'm struggling to get the service worker to properly cache my root response. In my serviceworker.js, I console log every event.request for the onFetch handler. There are no requests that are related to my root url. I'm testing right now on my localhost, but I only see fetch requests to css & js files.

这是我的 onFetch:

Here is my 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 动态提供.

I'm using rails so there is no index.html that exists to be cached, when a user hits my url, the page is dynamically served from my news#controller.

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

I'm actually using the gem serviceworker-rails

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

What am I doing wrong? How can I have my service worker save a root file and intercept the request to add headers? Is this even possible?

推荐答案

感谢 Jeff Posnick 他关于构建新请求的回答.您需要使用创建一个新请求的 fetch 进行响应，您可以向其中添加标头:

Credit here goes to Jeff Posnick for his answer on constructing a new Request. You'll need to respond with a fetch that creates a new Request to which you can add headers:

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

这篇关于serviceworker 是否可以向 url 请求添加标头的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！