技术问询：Service Worker能否添加请求头及个性化新闻分类实现

1. Service Worker 是否可以为 URL 请求添加请求头？ #

当然可以！Service Worker 最核心的能力之一就是拦截和修改网络请求，添加自定义请求头完全不在话下。具体来说，你需要在 Service Worker 的 fetch 事件中，基于原请求创建一个新的 Request 对象（因为原生 Request 是不可变的），在新对象里追加或修改请求头，再用这个新请求发起网络调用。

给你举个简单的实现例子：

self.addEventListener('fetch', (event) => {
  // 可根据需求限定拦截的URL范围，比如只拦截API请求
  const originalRequest = event.request;
  // 构造新请求，添加自定义请求头
  const modifiedRequest = new Request(originalRequest, {
    headers: new Headers({
      ...originalRequest.headers,
      'X-Custom-Header': 'your-custom-value'
    })
  });
  // 用修改后的请求发起请求并返回响应
  event.respondWith(fetch(modifiedRequest));
});

2. 如何用 Service Worker + IndexedDB 实现基于用户兴趣分类的新闻过滤？ #

你的思路非常靠谱！结合 Service Worker 的请求拦截能力和 IndexedDB 的本地存储，完全能实现这个无账号的个性化新闻展示需求。下面是具体的实现步骤和细节：

• 第一步：精准拦截目标请求
  在 Service Worker 中监听 fetch 事件，只针对你的新闻列表接口（比如 www.my-url.com/api/news-list 这类地址）做处理，避免影响其他静态资源（如图片、CSS）的加载。

• 第二步：从 IndexedDB 读取用户兴趣分类
  IndexedDB 是异步操作，所以要在 fetch 事件里用 async/await 来处理异步逻辑。先写一个工具函数用来读取存储的分类：

  async function getUserInterestedCategories() {
    return new Promise((resolve, reject) => {
      const dbOpenRequest = indexedDB.open('UserInterestDB', 1);
      dbOpenRequest.onsuccess = (event) => {
        const db = event.target.result;
        const transaction = db.transaction('categories', 'readonly');
        const store = transaction.objectStore('categories');
        const getRequest = store.get('user-selected');
        
        getRequest.onsuccess = () => {
          resolve(getRequest.result?.categories || []);
          db.close();
        };
        getRequest.onerror = () => reject(getRequest.error);
      };
      dbOpenRequest.onerror = () => reject(dbOpenRequest.error);
    });
  }
  

• 第三步：修改请求并发起网络调用
  获取到用户的兴趣分类后，你可以选择两种方式传递给后端：

  1. 追加查询参数：把分类拼接到 URL 的查询参数里，让后端直接返回对应分类的新闻
  2. 添加请求头：像第一个问题那样，把分类放在自定义请求头中传递

  这里以追加查询参数为例，完整的 fetch 事件处理代码如下：

  self.addEventListener('fetch', async (event) => {
    const currentRequest = event.request;
    // 只拦截新闻列表请求
    if (currentRequest.url.startsWith('https://www.my-url.com/api/news-list')) {
      try {
        // 获取用户标记的兴趣分类
        const interestedCategories = await getUserInterestedCategories();
        if (interestedCategories.length === 0) {
          // 如果用户还没标记任何分类，直接返回原请求
          event.respondWith(fetch(currentRequest));
          return;
        }
        // 构造带分类参数的新URL
        const targetUrl = new URL(currentRequest.url);
        targetUrl.searchParams.set('filter-categories', interestedCategories.join(','));
        // 创建新请求，保留原请求的方法、凭证等信息
        const modifiedRequest = new Request(targetUrl.toString(), {
          method: currentRequest.method,
          headers: currentRequest.headers,
          credentials: currentRequest.credentials
        });
        // 返回修改后的请求的响应
        event.respondWith(fetch(modifiedRequest));
      } catch (error) {
        // 读取IndexedDB失败时，降级返回原请求，避免影响用户访问
        console.error('Failed to load user categories:', error);
        event.respondWith(fetch(currentRequest));
      }
    } else {
      // 非目标请求，直接放行
      event.respondWith(fetch(currentRequest));
    }
  });
  

• 额外提醒：

  • 要保证 IndexedDB 的版本和数据结构在主页面和 Service Worker 中一致，避免读取失败
  • 处理好边界情况：比如用户未标记分类、DB 读取失败时，一定要降级返回原请求，不能让页面无法加载
  • 如果你的新闻是前端渲染（后端返回全量新闻，前端过滤），也可以拦截响应，在 Service Worker 中解析数据并过滤后再返回给页面，但这种方式要注意响应缓存和性能问题，优先推荐让后端处理过滤逻辑

内容的提问来源于stack exchange，提问作者Terence Chow