Chrome 中的通知操作 48

2015 年初,我们在 Android 版和桌面版 Chrome 中引入了推送消息和通知功能。这对网络而言是一大进步。即使在浏览器关闭的情况下,用户也可以开始更深入地参与网络体验。

虽然您可以发送这些消息,但您只能执行以下操作:点击消息打开页面,或完全关闭消息。

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

通知屏幕截图

向 API 添加内容非常简单。您只需创建一个操作数组,并在从 ServiceWorker 注册(直接在 ServiceWorker 中或通过 navigator.serviceWorker.ready 在页面上)调用 showNotification 时将其添加到 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 开始),与通知的所有互动都是通过在您的服务工件中注册的 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 的通知测试 Harne,并阅读通知规范跟踪规范的更新