如何自定义Chrome、Firefox等浏览器中媒体播放站点的通知样式

可实现的自定义效果 #

• 自定义图片：可以通过Web Notification API的icon参数设置通知封面/图标，媒体播放场景下还可额外配置badge参数适配桌面端、移动端的小尺寸通知图标展示需求，完全可以实现示例中的媒体封面展示效果。
• 自定义颜色：Chrome、Edge等Chromium内核浏览器支持通过Service Worker结合自定义配置项修改通知背景色、文字颜色、进度条样式，刚好适配媒体播放的进度展示需求。
• 其他可配置项：还可添加播放/暂停/切歌等媒体控制按钮、播放时长显示，满足媒体站点的通知使用需求。

浏览器兼容性说明 #

不过这一功能似乎在Firefox中无法生效
你提到的Firefox兼容性问题确实存在。Firefox为了统一系统通知的视觉规范，默认禁用了站点自定义通知样式的权限，仅支持基础的icon图标自定义，不支持颜色、布局类的样式修改。如果要开启有限的自定义能力，需要手动在about:config页面调整dom.webnotifications.custom_style.enabled配置项，通用适配性较差。

基础实现示例 #

// 先申请通知权限
Notification.requestPermission().then(permission => {
  if (permission !== 'granted') return
  // 生成媒体播放自定义通知
  const playNotification = new Notification('正在播放', {
    body: '歌曲名 - 歌手名',
    icon: './album-cover.jpg', // 自定义封面图路径
    tag: 'media-play-notification',
    data: {
      // 自定义样式配置
      backgroundColor: '#121212',
      textColor: '#ffffff',
      progress: 65 // 播放进度百分比
    }
  })
})

内容的提问来源于stack exchange，提问作者User not found