ServiceWorker推送触发window.open多窗口问题求助

方案1：让ServiceWorker只通知单个标签页处理 #

核心思路是把打开窗口的决策逻辑放在ServiceWorker中，只给一个活跃标签页发送打开指令，避免多个标签页同时响应。

在ServiceWorker的推送事件中，先获取所有打开的客户端（标签页），选择其中一个（比如当前聚焦的标签页，或者第一个存在的标签页）发送消息：

self.addEventListener('push', async (event) => {
  // 获取所有窗口类型的客户端，包括未受控的标签页
  const clients = await self.clients.matchAll({
    type: 'window',
    includeUncontrolled: true
  });

  // 优先选择聚焦的标签页，没有则选第一个标签页
  const targetClient = clients.find(client => client.focused) || clients[0];

  if (targetClient) {
    // 只给选中的标签页发送打开窗口的指令
    targetClient.postMessage({ 
      type: 'OPEN_TARGET_WINDOW', 
      url: '你的目标页面URL' 
    });
  }
});

标签页侧只需要正常接收消息并打开窗口即可，此时只有一个标签页会收到指令，不会重复打开。

方案2：利用localStorage同步锁机制 #

localStorage的读写是同步阻塞的，同一时间只有一个标签页能完成写入操作，利用这个特性可以实现“互斥锁”，确保只有第一个执行的标签页打开窗口。

标签页中的消息监听逻辑：

window.addEventListener('message', (event) => {
  if (event.data.type === 'OPEN_TARGET_WINDOW') {
    // 先检查是否已有锁存在
    const lockKey = 'push_window_open_lock';
    if (localStorage.getItem(lockKey)) return;

    try {
      // 写入锁，同步操作确保只有第一个标签页能成功拿到锁
      localStorage.setItem(lockKey, '1');
      // 设置锁的过期时间（比如10秒），避免异常情况锁一直存在
      setTimeout(() => {
        localStorage.removeItem(lockKey);
      }, 10000);

      // 执行窗口打开操作
      window.open(event.data.url, '你的窗口名称');
    } catch (e) {
      // 写入失败时直接跳过
      return;
    }
  }
});

方案3：通过Broadcast Channel实现标签页竞争处理 #

利用Broadcast Channel API让所有标签页互相通信，当收到推送消息时，先广播“准备处理打开请求”的信号，只有第一个响应的标签页执行打开操作，其他标签页收到信号后直接跳过。

标签页中的实现代码：

// 创建广播通道
const pushChannel = new BroadcastChannel('push_window_channel');

window.addEventListener('message', (event) => {
  if (event.data.type === 'OPEN_TARGET_WINDOW') {
    // 广播自己要处理打开请求
    pushChannel.postMessage({ type: 'CLAIM_OPEN_TASK' });

    // 设置短延迟，等待其他标签页的响应
    setTimeout(() => {
      // 检查是否已有其他标签页认领了任务
      if (!window.hasClaimedOpenTask) {
        window.hasClaimedOpenTask = true;
        window.open(event.data.url, '你的窗口名称');
      }
    }, 100);
  }
});

// 监听广播消息，标记已有标签页处理任务
pushChannel.addEventListener('message', (event) => {
  if (event.data.type === 'CLAIM_OPEN_TASK') {
    window.hasClaimedOpenTask = true;
  }
});

为什么之前的窗口名/Cookie方案无效 #

• 窗口名：多个标签页同时调用window.open时，浏览器尚未完成窗口的创建流程，所有调用都会判定目标窗口不存在，因此重复创建新窗口。
• Cookie：Cookie的读写存在异步同步延迟，多个标签页同时读取时，可能都获取到未更新的旧值，导致全部执行打开操作。

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