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

本文介绍了serviceworker 是否可以向 url 请求添加标头的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述

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

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 的请求，检查 indexDB 以了解此人感兴趣的类别，并添加一些标头，例如 'x-my-customer-header': 'technology,physics,sports' 这样我的服务器就可以只响应这些类别的动态 html.

Hence in my service worker I want to "intercept" requests to www.my-url, 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) }