通知行为

Alexey Rodionov

Matt Gaunt

到目前为止，我们已经了解了用于更改通知视觉外观的选项。还有 以及用于更改通知行为的选项。

默认情况下，仅使用可视化选项调用 showNotification() 时，代码如下： 行为：

• 点击通知没有任何反应。
• 系统会依次显示每条新通知。浏览器不会收起 通知
• 平台可能会使用户的设备响铃或振动（具体取决于平台）。
• 在某些平台上，该通知很快就会消失，而另一些平台则会显示 除非用户与之互动，否则显示通知。（例如，比较您的通知 。）

在本部分中，我们将了解如何使用选项来更改这些默认行为。 。这些都是相对容易实现和利用的。

通知点击事件

当用户点击通知时，默认行为是没有任何反应。没有 甚至关闭或移除通知

通知点击的常见做法是关闭通知并执行一些其他逻辑（即 打开窗口或对应用进行一些 API 调用）。

为此，您需要向 Service Worker 添加一个 'notificationclick' 事件监听器。这个 每当点击通知时都会调用 。

self.addEventListener('notificationclick', (event) => {
  const clickedNotification = event.notification;
  clickedNotification.close();

  // Do something as the result of the notification click
  const promiseChain = doSomething();
  event.waitUntil(promiseChain);
});

如本例所示，点击的通知可以通过以下方式访问： event.notification。您可以从中访问通知的属性和方法。在本课中， 在这种情况下，您可以调用其 close() 方法并执行额外的工作。

警告 ：您需要使用 event.waitUntil() 来让 Service Worker 在代码处于忙碌状态时保持运行。

操作

通过操作功能，您可以与用户进行另一层互动，只需点击 通知。

按钮

在上一部分中，您了解了如何在调用 showNotification() 时定义操作按钮：

const title = 'Actions Notification';

const options = {
  actions: [
    {
      action: 'coffee-action',
      title: 'Coffee',
      type: 'button',
      icon: '/images/demos/action-1-128x128.png',
    },
    {
      action: 'doughnut-action',
      type: 'button',
      title: 'Doughnut',
      icon: '/images/demos/action-2-128x128.png',
    },
    {
      action: 'gramophone-action',
      type: 'button',
      title: 'Gramophone',
      icon: '/images/demos/action-3-128x128.png',
    },
    {
      action: 'atom-action',
      type: 'button',
      title: 'Atom',
      icon: '/images/demos/action-4-128x128.png',
    },
  ],
};

registration.showNotification(title, options);

如果用户点击操作按钮，请检查 noticationclick 中的 event.action 值 事件来判断用户点击的是哪个操作按钮。

event.action 将包含选项中设置的 action 值。在上面的示例中， event.action 值将为以下值之一：'coffee-action'、'doughnut-action'、 'gramophone-action' 或 'atom-action'。

我们可以据此检测通知点击或操作点击，如下所示：

self.addEventListener('notificationclick', (event) => {
  if (!event.action) {
    // Was a normal notification click
    console.log('Notification Click.');
    return;
  }

  switch (event.action) {
    case 'coffee-action':
      console.log("User ❤️️'s coffee.");
      break;
    case 'doughnut-action':
      console.log("User ❤️️'s doughnuts.");
      break;
    case 'gramophone-action':
      console.log("User ❤️️'s music.");
      break;
    case 'atom-action':
      console.log("User ❤️️'s science.");
      break;
    default:
      console.log(`Unknown action clicked: '${event.action}'`);
      break;
  }
});

内嵌回复

此外，在上一部分中，您了解了如何向通知添加内嵌回复：

const title = 'Poll';

const options = {
  body: 'Do you like this photo?',
  image: '/images/demos/cat-image.jpg',
  icon: '/images/demos/icon-512x512.png',
  badge: '/images/demos/badge-128x128.png',
  actions: [
    {
      action: 'yes',
      type: 'button',
      title: '👍 Yes',
    },
    {
      action: 'no',
      type: 'text',
      title: '👎 No (explain why)',
      placeholder: 'Type your explanation here',
    },
  ],
};

registration.showNotification(title, options);

event.reply 将包含用户在输入字段中输入的值：

self.addEventListener('notificationclick', (event) => {
  const reply = event.reply;

  // Do something with the user's reply
  const promiseChain = doSomething(reply);
  event.waitUntil(promiseChain);
});

标记

tag 选项本质上是一个用于“分组”的将多个通知整合到一起，轻松 确定向用户显示多条通知的方式。这是最容易解释的 举个例子。

我们来显示一条通知并为其添加 'message-group-1' 标记。我们展示的是 通知：

const title = 'Notification 1 of 3';

const options = {
  body: "With 'tag' of 'message-group-1'",
  tag: 'message-group-1',
};

registration.showNotification(title, options);

此时将显示我们的第一条通知。

我们使用新标记 'message-group-2' 显示第二条通知，如下所示：

const title = 'Notification 2 of 3';

const options = {
  body: "With 'tag' of 'message-group-2'",
  tag: 'message-group-2',
};

registration.showNotification(title, options);

这将向用户显示第二条通知。

现在，我们来显示第三个通知，但要重复使用 'message-group-1' 的第一个标记。执行此操作 系统会关闭第一条通知，并将其替换为新的通知。

const title = 'Notification 3 of 3';

const options = {
  body: "With 'tag' of 'message-group-1'",
  tag: 'message-group-1',
};

registration.showNotification(title, options);

现在，即使 showNotification() 被调用了三次，我们也有两条通知。

tag 选项只是一种对消息进行分组的方式， 如果当前显示的与新通知的标记相同，则会关闭。

使用 tag 的巧妙之处在于，当它取代通知时，替代不发出提示音 或振动。

这就是 renotify 选项的用武之地。

重新通知

在撰写本文时，这在很大程度上适用于移动设备。设置此选项会导致新的 通知会振动并播放系统提示音。

在某些情况下，您可能希望替换通知来通知用户，而不是通知用户。 静默更新。聊天应用就是一个很好的例子。在这种情况下，您应该设置 tag 和 将renotify更改为true。

const title = 'Notification 2 of 2';

const options = {
  tag: 'renotify',
  renotify: true,
};

registration.showNotification(title, options);

警告 ：如果您在没有 tag 的通知中将 renotify 设置为 true，则会收到以下错误：TypeError: Failed to execute 'showNotification' on 'ServiceWorkerRegistration': Notifications which set the renotify flag must specify a non-empty tag

静音

通过此选项，您可以显示新通知，但禁止振动、 并打开设备显示屏。

如果您的通知不需要用户立即关注，那么这是理想之选。

const title = 'Silent Notification';

const options = {
  silent: true,
};

registration.showNotification(title, options);

注意 ：如果您同时定义了 silent 和 renotify，则 silent 优先。

需要互动

桌面版 Chrome 会先在一定的时间段内显示通知，然后再隐藏通知。Chrome 已开启 Android 没有此行为。在用户与通知互动之前，系统会一直显示通知。

如需强制通知保持可见状态，直到用户与其互动，请添加 requireInteraction 选项。此操作将一直显示通知，直到用户关闭或点击通知。

const title = 'Require Interaction Notification';

const options = {
  requireInteraction: true,
};

registration.showNotification(title, options);

请慎重选择。显示通知并强制用户停止 关闭通知的操作可能会令人沮丧。

在下一节中，我们将了解一些用于网络优化的 管理通知和执行操作（例如，在用户点击通知时打开网页）。

下一步做什么

• 网络推送通知概览
• 推送的工作原理
• 订阅用户
• 权限用户体验
• 使用 Web 推送库发送消息
• 网络推送协议
• 处理推送事件
• 显示通知
• 通知行为
• 常见通知模式
• 推送通知常见问题解答
• 常见问题和报告 bug

Codelab

• 构建推送通知客户端
• 构建推送通知服务器