单域名下多Firebase项目通知接收异常问题求助

这问题我之前帮朋友排查过，核心原因是同一个域名下浏览器对Service Worker和推送订阅的全局限制，下面给你拆解原因和解决办法：

问题根源 #

浏览器对同一个域名的推送相关资源是全局管理的，这里的冲突主要来自两点：

• Service Worker 覆盖：默认情况下，每个Firebase项目的消息推送会注册名为firebase-messaging-sw.js的Service Worker。当你访问落地页B时，它会用B项目的SW替换掉A项目的SW，导致A的推送消息无法被正确拦截处理。
• 订阅 endpoint 绑定：浏览器生成的推送订阅endpoint是和当前激活的Firebase项目配置绑定的。当你订阅B时，浏览器会生成新的endpoint并关联到B的项目，原来A的订阅会直接失效——Firebase推送服务只认对应项目下生成的endpoint。

解决办法 #

1. 给每个项目配置独立的Service Worker & 作用域 #

每个落地页初始化Firebase时，指定不同的SW文件名和作用域，避免互相覆盖。比如：

• 落地页A的初始化代码：

const messaging = firebase.messaging();
// 指定A专属的SW文件和作用域
messaging.useServiceWorker(new ServiceWorkerRegistration('/firebase-messaging-sw-a.js', { scope: '/a/' }));

• 落地页B的初始化代码：

const messaging = firebase.messaging();
messaging.useServiceWorker(new ServiceWorkerRegistration('/firebase-messaging-sw-b.js', { scope: '/b/' }));

这样每个SW有独立的作用域，浏览器会分别管理，各自处理对应项目的推送消息。

2. 本地存储多项目订阅信息，手动维护状态 #

当用户订阅A或B时，把对应项目的订阅token（包含endpoint等信息）存在本地存储（localStorage或IndexedDB）里，页面加载时检查并重新激活订阅。

比如订阅A时的代码：

messaging.getToken({ vapidKey: 'A的VAPID_KEY' }).then(token => {
  localStorage.setItem('subscription-a', JSON.stringify({ 
    token, 
    projectId: 'A的项目ID' 
  }));
});

订阅B时同理存储subscription-b。就算之后SW被替换，你也能从本地拿到旧的订阅信息，重新完成订阅流程。

3. 单SW多项目初始化，区分消息处理 #

如果不想维护多个SW文件，可以在同一个firebase-messaging-sw.js里初始化所有Firebase项目，然后通过消息的自定义字段区分来源，分别处理。

示例SW代码：

importScripts('https://www.gstatic.com/firebasejs/9.23.0/firebase-app.js');
importScripts('https://www.gstatic.com/firebasejs/9.23.0/firebase-messaging.js');

// 初始化项目A
const appA = firebase.initializeApp({
  apiKey: "A的API_KEY",
  authDomain: "A的AUTH_DOMAIN",
  projectId: "A的PROJECT_ID",
  messagingSenderId: "A的SENDER_ID",
  appId: "A的APP_ID"
}, 'appA');

// 初始化项目B
const appB = firebase.initializeApp({
  // B项目的配置信息
}, 'appB');

const messagingA = firebase.messaging(appA);
const messagingB = firebase.messaging(appB);

// 根据消息中的自定义项目ID区分处理
self.addEventListener('push', (event) => {
  const payload = event.data.json();
  if (payload.data.projectId === 'A的项目ID') {
    event.waitUntil(
      self.registration.showNotification(payload.notification.title, payload.notification)
    );
  } else if (payload.data.projectId === 'B的项目ID') {
    // 处理B项目的推送展示逻辑
  }
});

这种方式需要你在发送推送消息时，给data字段加上项目ID标识，让SW能识别消息归属。

4. 页面加载时验证订阅有效性 #

每次用户访问落地页时，检查当前的订阅token是否属于该项目，如果不一致就重新订阅，并把新token同步到你的后端（如果有存储订阅信息的话）。

示例A页面的验证代码：

messaging.getToken({ vapidKey: 'A的VAPID_KEY' }).then(currentToken => {
  const savedToken = JSON.parse(localStorage.getItem('subscription-a'))?.token;
  if (currentToken !== savedToken) {
    // 把新token发送到后端替换旧的
    localStorage.setItem('subscription-a', JSON.stringify({ token: currentToken, projectId: 'A的项目ID' }));
  }
});

这样能确保后端存储的是当前有效的订阅token，发送推送时不会用失效的token导致消息无法送达。

测试的时候记得先清除浏览器的Service Worker缓存和本地存储，避免旧配置干扰测试结果。

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