Chrome 中的通知操作 48

2015 年初,我们在 Android 版和桌面版 Chrome 中引入了推送消息和通知。这是网络向前迈进的一大步。即使浏览器处于关闭状态,用户也可以开始与 Web 体验进行更深入的互动。

虽然您可以发送这些消息很不错,但您只能点击消息并打开页面,或完全关闭消息。

如果您查看以原生方式提供给移动平台(例如 iOS 和 Android)上的应用的通知,则每个通知都允许开发者定义用户可以调用并与之互动的上下文操作。在 Chrome 48 中,我们现在为桌面设备和 Android 版 Chrome 中的网络通知添加了一项类似功能。

通知屏幕截图

向 API 添加内容非常简单。从 ServiceWorker 注册中调用 showNotification(直接在 ServiceWorker 中或通过 navigator.serviceWorker.ready 在网页上调用)时,您只需创建一个操作数组,并将其添加到 NotificationOptions 对象中。

目前,Chrome 仅支持针对每条通知执行两项操作。一些平台可能能够支持更多功能,而有些平台可能支持较少或根本不提供支持。您可以通过检查 Notification.maxActions 来确定平台支持哪些功能。在以下示例中,我们假设平台支持两项操作。

self.registration.showNotification('New message from Alice', {
  actions: [
    {action: 'like', title: 'Like'},
    {action: 'reply', title: 'Reply'}]
});

这将创建包含两个按钮的简单通知。请注意,目前无法向操作直接添加图标,但您可以使用表情符号和扩展的 Unicode 字符集向通知按钮添加更多上下文。

例如:

self.registration.showNotification("New message from Alice", {
  actions: [
    {action: 'like', title: '👍Like'},
    {action: 'reply', title: '⤻ Reply'}]
});

现在,您已经创建了通知并使其外观 😻?,用户以后可能会与通知互动。目前(从 Chrome 48 开始)与通知的交互都是通过在 Service Worker 中注册的 notificationclick 事件进行的,可以是对通知的常规点击,也可以是对某个操作按钮的特定点按。顺便说明一下,将来您还可以响应notificationclose事件

如需了解用户执行了哪项操作,您需要检查事件的 action 属性,然后您可以选择打开新页面让用户完成操作,或者在后台执行任务。

self.addEventListener('notificationclick', function(event) {
  var messageId = event.notification.data;

  event.notification.close();

  if (event.action === 'like') {
    silentlyLikeItem();
  }
  else if (event.action === 'reply') {
    clients.openWindow("/messages?reply=" + messageId);
  }
  else {
    clients.openWindow("/messages?reply=" + messageId);
  }
}, false);

有趣的是,操作不必打开新窗口,它们可以执行常规应用交互,而无需创建界面。例如,用户可以“赞”或“删除”社交媒体帖子,这些帖子会对用户的本地数据执行操作,然后将其与云端同步,而无需打开界面(不过,最好将数据更改发送到所有打开的窗口,以便更新界面)。对于需要用户互动的操作,您可以打开一个窗口供用户回复。

由于平台不支持相同数量的操作,或者在某些情况下根本无法支持通知操作按钮,因此您需要确保始终为任务提供合理的回退机制,让用户只需点击通知即可执行相应任务。

如果您希望立即了解其实际效果,请参阅 Peter Beverloo 的通知测试 Hrne,并仔细阅读通知规范,或在更新时遵循该规范