javascript - 如何在 JavaScript 中使用通知 API 在桌面通知中添加动画 GIF

Question

我正在创建一个带有计时器的网络应用程序。假设每 30 秒，它将使用 Notification API 触发桌面通知。我可以很顺利地做到这一点，还可以用图像来设计它。但我的问题是我想在通知中添加动画 GIF 作为图像。但是当我添加图像链接时，它只显示为固定(不移动或动画)图像。

var notification = new Notification("Any Text will do",{
    icon: 'some-icon.jpg',
    body: 'Hello!',
    image: 'some-animated-pic.gif'
});

提前致谢，祝编码愉快! ^_^

Answer 1

简短回答:不幸的是，动画图像目前不能与通知 API 一起使用，并且通常会转换为单帧抓取，IOS 10+ 除外。对不起。

---

更长的答案，以及用于支持答案的证据:

可能因为它相对较新，通知 API 的文档和规范相当薄弱。例如，这基本上就是 WHATWG standard 的全部内容。 (注意:W3C 标准未与 WHATWG 同步)关于图像资源的说明:

An image resource is a picture shown as part of the content of the notification, and should be displayed with higher visual priority than the icon resource and badge resource, though it may be displayed in fewer circumstances.

此外，目前许多现代浏览器甚至不支持 image 属性，包括 Firefox。 MDN compatibility table .

有关每个浏览器 vendor (例如 Chrome 与 Firefox)如何实现此标准的文档甚至更糟，可能是因为它仍被标记为“实验性”，因此还没有真正确定下来。例如，尽管 Firefox 尚不接受使用 image 属性，但它会接受并显示作为 icon 属性传递的 GIF 的完整动画。

通过在 Chrome 中手动测试 ( tool )，我能够得到与您所说的相同的结果；它将接受动画 GIF 作为 image 属性，但只显示其中的一个帧。我找不到一个 Chrome 文档来说明这是真的，或者为什么会这样。然而，在实际的 Chromium 源代码中四处寻找，我能够找到 clear evidence。他们目前正在传递位图并强制将单帧作为用于通知的图像的输出。

IOS 是这里唯一的异常(exception)，因为他们在 IOS 10 中引入了“富媒体推送通知”，它支持动画 GIF 等功能。 Apple Docs , article about announcement .

支持我的断言的更多链接:

• WonderPush (注意只有 iOS 10+ 支持动画 GIF)
• 一个信号
  • Big Picture on Android (warns GIF will be frozen on first frame)
  • Web Push Notifications - Images (states Chrome does not support animations)