如何在firebase-messaging-sw.js中实现浏览器通知播放音频

核心原因分析 #

1. 桌面浏览器（如Chrome）对showNotification的sound参数支持有限，且默认会拦截无用户交互上下文的自动音频播放
2. Service Worker处于后台隔离上下文，直接调用new Audio().play()会触发浏览器的自动播放限制策略

可行解决方案 #

1. 修复Service Worker中的音频播放逻辑 #

使用AudioContext处理后台音频播放，同时在主页面提前激活音频上下文（需用户交互触发）：

Service Worker代码（firebase-messaging-sw.js）

importScripts("https://gstatic.com/firebasejs/9.9.3/firebase-app-compat.js");
importScripts("https://gstatic.com/firebasejs/9.9.3/firebase-messaging-compat.js");

firebase.initializeApp({
  messagingSenderId: "..."
});
const messaging = firebase.messaging();

messaging.onBackgroundMessage(async function (payload) {
  const notification = payload.notification;
  const options = {
    body: notification.body,
    icon: notification.icon
  };

  // 尝试播放通知音频
  try {
    // 初始化AudioContext（兼容webkit内核）
    const audioContext = new (self.AudioContext || self.webkitAudioContext)();
    // 加载音频文件
    const response = await fetch('/media/notification.mp3');
    const arrayBuffer = await response.arrayBuffer();
    const audioBuffer = await audioContext.decodeAudioData(arrayBuffer);
    
    // 创建音频源并播放
    const source = audioContext.createBufferSource();
    source.buffer = audioBuffer;
    source.connect(audioContext.destination);
    source.start();
  } catch (error) {
    console.error('通知音频播放失败:', error);
  }

  return self.registration.showNotification(notification.title, options);
});

主页面代码（如index.js）

在用户首次和页面交互时激活音频上下文，满足浏览器的自动播放权限要求：

// 仅在用户第一次点击页面时激活AudioContext
document.addEventListener('click', async () => {
  if (typeof AudioContext !== 'undefined' && !window.audioContext) {
    window.audioContext = new AudioContext();
    await window.audioContext.resume();
  }
}, { once: true });

2. 检查浏览器通知权限与设置 #

• 确保浏览器已授予网站通知权限和自动播放权限
• 在Chrome中：进入设置 > 隐私和安全 > 网站设置 > 通知，找到你的站点，确认「声音」选项处于开启状态

3. 调整FCM消息格式 #

将音频路径放在data字段而非notification字段，避免浏览器默认处理时忽略sound参数：

{
  "notification": {
    "title": "Title Notification",
    "body": "Lorem ipsum dolor",
    "click_action": "FCM_PLUGIN_ACTIVITY",
    "icon": "/media/logos/png-Icon-Logo.ico"
  },
  "data": {
    "sound": "/media/notification.mp3"
  },
  "to": "...",
  "priority": "high"
}

额外注意事项 #

• 音频文件需为同源资源，或已配置CORS允许跨域访问
• 推荐使用MP3/WAV格式，确保主流浏览器支持
• 验证音频文件路径正确性（可直接在浏览器地址栏访问路径测试）

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