如何在firebase-messaging-sw.js的onBackgroundMessage中使用messageData

你遇到的核心问题是Service Worker中message事件和onBackgroundMessage事件的异步触发顺序，以及SW生命周期导致的全局变量失效问题。以下是两种可靠的解决方案：

方案一：使用Promise处理异步顺序（适合临时数据） #

通过全局Promise对象等待messageData的到来，确保onBackgroundMessage触发时能拿到有效数据：

// 全局声明Promise，用于等待主线程的消息数据
let messageDataPromise = null;

self.addEventListener("message", event => {
  const messageData = event.data;
  console.log(messageData);
  // 将数据存入Promise，供后续调用
  messageDataPromise = Promise.resolve(messageData);
});

messaging.onBackgroundMessage(async (payload) => {
  if (!messageDataPromise) {
    console.error("未收到来自主线程的配置数据");
    return;
  }
  // 等待数据准备完成
  const messageData = await messageDataPromise;
  // 正常使用messageData创建通知
  const notification = new Notification(messageData[keywords][lang].title, {
    body: messageData[keywords][lang].body
  });
  storeMessage(payload.data);
});

方案二：使用Cache API持久化数据（更可靠） #

如果Service Worker可能被闲置终止，用Cache API存储数据可以避免全局变量丢失：

const MESSAGE_DATA_CACHE = 'sw-message-data';

self.addEventListener("message", async event => {
  const messageData = event.data;
  console.log(messageData);
  // 将数据存入缓存
  const cache = await caches.open(MESSAGE_DATA_CACHE);
  await cache.put('config', new Response(JSON.stringify(messageData)));
});

messaging.onBackgroundMessage(async (payload) => {
  // 从缓存读取数据
  const cache = await caches.open(MESSAGE_DATA_CACHE);
  const cachedResponse = await cache.match('config');
  
  if (!cachedResponse) {
    console.error("未找到缓存的配置数据");
    return;
  }
  
  const messageData = await cachedResponse.json();
  // 使用数据创建通知
  const notification = new Notification(messageData[keywords][lang].title, {
    body: messageData[keywords][lang].body
  });
  storeMessage(payload.data);
});

为什么之前的全局变量方案无效？ #

Service Worker在闲置时会被浏览器终止，重新激活时全局变量会被重置；另外如果onBackgroundMessage事件先于message事件触发，此时全局变量还未被赋值，自然无法使用。上述方案分别解决了异步顺序和数据持久化的问题。

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