如何在firebase-messaging-sw.js中实现后台通知播放声音？

Service Worker运行在无DOM的后台独立线程中，Audio是浏览器窗口环境下的DOM API，因此在firebase-messaging-sw.js中直接实例化Audio会抛出“Audio is not defined”的错误。

方案1：利用Notification API自带的sound属性（推荐） #

如果你的需求是在显示通知时播放声音，直接在创建通知时指定sound属性即可，无需在SW中创建Audio实例：

self.registration.showNotification('你的通知标题', {
  body: '通知内容',
  icon: '/path/to/icon.png',
  sound: '/path/to/notification-sound.mp3' // 替换为你的声音文件路径
});

注意：部分浏览器（如Chrome桌面端）对通知声音有播放限制，可能需要用户手动开启相关权限。

方案2：通过主线程（页面）播放音频 #

如果必须在SW触发事件时处理音频播放，可通过postMessage将播放指令发送到主线程（页面的DOM环境），由主线程完成播放：

1. 在firebase-messaging-sw.js中发送播放指令：

self.addEventListener('notificationclick', async (event) => {
  // 关闭通知
  event.notification.close();
  
  // 获取当前活跃的页面客户端
  const activeClients = await self.clients.matchAll({ 
    type: 'window', 
    includeUncontrolled: true 
  });

  if (activeClients.length > 0) {
    // 向主线程发送播放音频的消息
    activeClients[0].postMessage({
      action: 'playAudio',
      audioUrl: '/path/to/your-sound.mp3'
    });
  }
});

2. 在网页的主JS文件中监听并处理消息：

// 确保Service Worker注册完成后监听消息
navigator.serviceWorker.register('/firebase-messaging-sw.js')
.then(() => {
  navigator.serviceWorker.addEventListener('message', (event) => {
    if (event.data.action === 'playAudio') {
      const audio = new Audio(event.data.audioUrl);
      audio.play().catch(err => {
        console.error('音频播放失败:', err);
      });
    }
  });
});

• 确保声音文件路径正确，若使用外部资源需处理跨域问题。
• 受浏览器自动播放政策限制，音频播放通常需要用户与页面有交互（如点击通知、点击页面元素），后台静默播放可能会被浏览器阻止。

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