多显示器场景下如何在浏览器端拦截后端API请求

核心思路：跨实例通信 + 请求拦截结合 #

要实现多独立浏览器实例共享同一API请求的响应，需要结合跨实例状态同步和请求拦截控制两个核心能力，以下是可行的落地方案：

1. Service Worker 是适配场景的核心方案（不止离线使用） #

Service Worker 完全支持拦截所有类型的请求（包括GET、POST），且天然具备跨页面/实例的全局上下文，可直接实现请求复用：

• 拦截目标请求：在Service Worker的fetch事件中捕获发往后端的指定API请求；
• 维护请求状态：用全局容器（如Map）存储正在处理的请求Promise，避免重复发起；
• 复用请求结果：若已有相同请求在处理，直接返回该Promise的结果；若没有则发起真实请求，缓存Promise并在请求完成后更新缓存。

示例代码片段：

// Service Worker 代码
const pendingRequests = new Map();

self.addEventListener('fetch', (event) => {
  // 仅拦截目标API，比如匹配 /loadData
  if (event.request.url.includes('/loadData')) {
    const requestKey = await getRequestUniqueKey(event.request);
    if (pendingRequests.has(requestKey)) {
      // 复用已有请求的结果
      event.respondWith(pendingRequests.get(requestKey));
    } else {
      // 发起真实请求并缓存Promise
      const fetchPromise = fetch(event.request)
        .then(response => {
          // 可选：用Cache API缓存响应，供后续重复请求使用
          const clonedResp = response.clone();
          caches.open('api-shared-cache').then(cache => cache.put(event.request, clonedResp));
          return response;
        })
        .finally(() => pendingRequests.delete(requestKey));
      
      pendingRequests.set(requestKey, fetchPromise);
      event.respondWith(fetchPromise);
    }
  }
});

// 生成请求唯一标识，需覆盖方法、URL、请求体（针对POST）
async function getRequestUniqueKey(request) {
  const body = request.method !== 'GET' ? await request.text() : '';
  return `${request.method}:${request.url}:${body}`;
}

2. 跨实例通信补充：Broadcast Channel API #

如果需要更灵活的请求触发控制，可搭配Broadcast Channel API实现跨实例通知：

• 当某实例发起请求时，通过广播通道通知其他实例“该请求正在处理”；
• 其他实例收到通知后，暂停发起请求，等待结果广播；
• 请求完成的实例将响应数据通过广播通道发送给其他实例，后者直接复用数据无需再发请求。

这种方式适合需要主动控制请求时机的场景，可与Service Worker方案配合使用。

关键注意事项 #

• 请求标识准确性：POST请求必须包含请求体内容生成唯一标识，避免不同参数的请求被错误复用；
• 缓存时效性：若数据有更新周期，需设置合理的缓存过期规则，或在数据更新时主动清除缓存；
• 兼容性：Service Worker和Broadcast Channel均支持现代主流浏览器（Chrome、Firefox、Edge等），需确认目标运行环境的兼容性。

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