如何将Service Worker接收的通知数据导出至Vue组件

核心机制限制：Service Worker运行在独立的后台线程上下文，与Vue所在的主线程作用域完全隔离，不存在模块共享、全局变量共享的通路，这也是之前尝试直接导出变量无法生效的根本原因。所有跨上下文的数据传递必须通过官方支持的消息通信机制实现。

方案一：基于Client PostMessage的双向通信（兼容性最好） #

通过Service Worker提供的clients接口，向所有受控的前端窗口主动推送消息，是所有支持Service Worker的浏览器都兼容的实现方式。

步骤1：修改Service Worker核心代码 #

注意：将异步逻辑包裹在waitUntil接收的Promise中，保证浏览器在消息发送完成前不会终止Service Worker的运行。

importScripts("https://js.pusher.com/beams/service-worker.js");

PusherPushNotifications.onNotificationReceived = ({ pushEvent, payload }) => {
  pushEvent.waitUntil(
    (async () => {
      // 原有系统通知显示逻辑
      await self.registration.showNotification(payload.notification.title, {
        body: payload.notification.body,
        icon: payload.notification.icon,
        data: payload.data
      });

      // 遍历所有被当前Service Worker控制的打开窗口
      const controlledClients = await self.clients.matchAll({
        includeUncontrolled: false,
        type: 'window'
      });

      // 向每个窗口发送通知数据
      controlledClients.forEach(client => {
        client.postMessage({
          msgType: 'PUSHER_REAL_NOTIFICATION',
          detail: {
            title: payload.notification.title,
            body: payload.notification.body,
            data: payload.data
          }
        });
      });

      console.log(`Data recieved from notification ${payload.data.message}`);
    })()
  );
};

步骤2：在Vue侧监听消息事件 #

在根组件（通常是App.vue）的挂载生命周期中，绑定Service Worker的消息监听，拿到通知数据后可直接更新Vuex/Pinia状态、触发前端交互逻辑：

// App.vue 组件逻辑
export default {
  mounted() {
    if (!navigator.serviceWorker) return
    // 监听来自Service Worker的消息
    this.swMessageHandler = (event) => {
      // 过滤只处理Pusher通知类型的消息
      if (event.data.msgType === 'PUSHER_REAL_NOTIFICATION') {
        const notificationData = event.data.detail
        // 以下为Vue侧自定义逻辑：比如更新全局通知列表、弹出前端提示
        this.$store.commit('notification/pushNewItem', notificationData)
      }
    }
    navigator.serviceWorker.addEventListener('message', this.swMessageHandler)
  },
  beforeUnmount() {
    // 组件卸载时移除监听，避免内存泄漏
    if (navigator.serviceWorker) {
      navigator.serviceWorker.removeEventListener('message', this.swMessageHandler)
    }
  }
}

方案二：基于Broadcast Channel API的解耦广播（代码更简洁） #

如果项目需要兼容现代浏览器环境，可直接使用原生的广播频道API实现通信，不需要手动遍历所有客户端，代码耦合度更低。

步骤1：修改Service Worker代码 #

在通知接收逻辑中，向指定名称的广播频道发送消息：

const notificationBroadcast = new BroadcastChannel('pusher_notify_channel')

importScripts("https://js.pusher.com/beams/service-worker.js");

PusherPushNotifications.onNotificationReceived = ({ pushEvent, payload }) => {
  pushEvent.waitUntil(
    (async () => {
      await self.registration.showNotification(/* 原有通知配置保持不变 */)
      // 发送广播消息
      notificationBroadcast.postMessage({
        msgType: 'PUSHER_REAL_NOTIFICATION',
        detail: {
          title: payload.notification.title,
          body: payload.notification.body,
          data: payload.data
        }
      })
    })()
  )
}

步骤2：Vue侧监听广播频道 #

创建同名的广播频道即可接收消息，不受Service Worker客户端的连接状态限制：

// 可放在全局入口文件或根组件中
const notifyChannel = new BroadcastChannel('pusher_notify_channel')
notifyChannel.onmessage = (event) => {
  if (event.data.msgType === 'PUSHER_REAL_NOTIFICATION') {
    console.log('收到广播的通知数据：', event.data.detail)
  }
}

关键注意事项 #

• Service Worker代码修改后，需要确保用户端的SW完成版本更新，可在SW的激活事件中加入self.skipWaiting()、clients.claim()逻辑，避免旧版本缓存导致消息无法正常发送。
• 如果收到通知时，对应的Vue页面已经被关闭，主线程不存在的情况下无法实时接收消息，这类场景需要将通知数据落库到IndexedDB或同步到后端，待用户下次打开页面时拉取未处理的通知。
• 监听消息的逻辑要配合组件生命周期做好解绑，避免单页应用路由跳转后出现重复绑定、内存泄漏的问题。

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