如何在Firebase Cloud Messaging的Service Worker中播放通知音效？

好问题！我之前也碰到过一模一样的需求——给PWA的后台推送通知加上自定义音效，确实和前端页面里播放声音不一样，毕竟Service Worker跑在无DOM的后台环境，Howler这类依赖DOM的库自然没法用。不过我们可以用原生Web API解决，而且浏览器对推送触发的声音播放是开绿灯的（属于用户已授权的交互上下文），具体做法如下：

核心实现思路 #

在setBackgroundMessageHandler回调里，当我们准备显示通知的同时，直接创建一个Audio实例来播放自定义音效。这个方法不需要DOM支持，Service Worker环境完全兼容。

修改后的firebase-messaging-sw.js代码 #

importScripts('https://www.gstatic.com/firebasejs/5.5.0/firebase-app.js');
importScripts('https://www.gstatic.com/firebasejs/5.5.0/firebase-messaging.js');
firebase.initializeApp({ 'messagingSenderId': '123456' });
const messaging = firebase.messaging();

messaging.setBackgroundMessageHandler(function(payload) {
  console.log('[firebase-messaging-sw.js] Received background message ', payload);
  
  // 播放自定义通知音效
  try {
    // 替换成你的音效文件路径，确保Service Worker能访问到（比如和sw同目录）
    const notificationSound = new Audio('/assets/notification-alert.mp3');
    notificationSound.volume = 0.6; // 按需调整音量大小
    notificationSound.play();
  } catch (error) {
    console.error('播放通知音效出错:', error);
  }

  // Customize notification here
  const title = 'New Order';
  const notificationOptions = {
    body: 'Background Message body.',
    renotify: true,
    tag: "newOrder",
    vibrate: [200, 100, 200, 100, 200, 100, 200],
    requireInteraction: true,
    // 备选：部分浏览器支持直接在通知配置里指定sound（兼容性不如手动播放）
    // sound: '/assets/notification-alert.mp3'
  };
  return self.registration.showNotification(title, notificationOptions);
});

self.addEventListener('notificationclick', function(event) {
  let url = 'https://dashboard.inhouseorders.io';
  event.notification.close(); // Android needs explicit close.
  event.waitUntil(
    clients.matchAll({type: 'window'}).then(
      windowClients => {
        // Check if there is already a window/tab open with the target URL
        for (var i = 0; i < windowClients.length; i++) {
          var client = windowClients[i];
          // If so, just focus it.
          if (client.url === url && 'focus' in client) {
            return client.focus();
          }
        }
        // If not, then open the target URL in a new window/tab.
        if (clients.openWindow) {
          return clients.openWindow(url);
        }
      })
  );
});

关键注意事项 #

• 音效文件路径：确保音效文件放在Service Worker可访问的位置，比如和firebase-messaging-sw.js同目录，或者使用网站根目录的绝对路径。如果是跨域资源，需要配置CORS允许访问。
• 浏览器兼容性：主流浏览器（Chrome、Firefox、Edge）都支持在Service Worker中用Audio播放声音，而且推送触发的场景不会触发自动播放限制（因为用户已经授权了通知权限，属于合法交互上下文）。
• 错误处理：加上try-catch块很有必要，避免音效加载失败影响通知正常显示。

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