如何在Chrome的Service Worker中接收推送通知并播放音频？

Question

我希望能够像 WhatsApp Web 推送通知或 Telegram Web 通知一样播放音频。我已经能够在服务工作者中接收推送通知，问题在于如何在接收到推送通知时播放音频？

我已经阅读了这里的 Notification API 文档：https://developer.mozilla.org/en-US/docs/Web/API/notification/sound 根据文档，Notification 有参数声音（Notification.sound）。

我已经将该参数实现到我的语法中：

self.registration.showNotification(title, {
  body: body,
  icon: icon,
  tag:tag,
  data: data,
  sound: 'http://127.0.0.1/myfolder/audio/alert.mp3'
})

但是在Service Worker中收到推送消息后仍然无法播放音频，如何实现播放？

谢谢。

- Rizky Muhammad

Answer 1

如MDN页面所示：

注意：此属性目前在任何浏览器中都不受支持。

我不知道有哪些浏览器供应商计划在此时添加支持；通常确定这一点的方法是访问特定浏览器的功能状态页面，并查看公共列表上的内容。当涉及到服务工作者通知时，最相关的浏览器是Chrome和Firefox，官方功能跟踪器托管在

• https://www.chromestatus.com/features
• https://wiki.mozilla.org/Features/Release_Tracking

一种替代方案是使用自定义振动模式，这在Chrome for Android 45版本以后得到支持。

- Jeff Posnick

---

好的，谢谢你。但是 Web WhatsApp 怎么能做到呢？你知道吗？ - Rizky Muhammad

我不是WhatsApp的用户，也不熟悉他们的Web应用程序设计。如果他们从打开的网页上下文中运行代码，而不是从服务工作者中运行，则可以使用完整的音频相关API。也许只有在打开页面时才播放音频？ - Jeff Posnick

嗨@JeffPosnick，你能看一下这个吗？https://dev59.com/w1IG5IYBdhLWcg3w62QZ - Giorgi Lagidze

Answer 2

在我们的解决方案中，我们创建了一个Google Chrome扩展程序，它监听Service Worker的事件并播放音频。对于Service Worker->后台脚本通信，我们使用这个“hack”：如何让Chrome扩展程序的后台脚本与网页服务工作者进行通信？ 还可以使用扩展程序（使用GCM）直接监听推送。

- Martin Ždila