Google 会使用 AI 技术将内容翻译成您偏好的语言。AI 翻译可能包含错误。

显示通知

Alexey Rodionov

Matt Gaunt

通知选项分为两个部分，一部分介绍视觉方面（本部分），另一部分介绍通知的行为方面（下一部分）。

您可以使用 Peter Beverloo 的通知生成器在各种平台上的各种浏览器中试用各种通知选项。

视觉选项

用于显示通知的 API 非常简单：

<ServiceWorkerRegistration>.showNotification(<title>, <options>);

title 和 options 这两个参数都是可选的。

标题是一个字符串，选项可以是以下任意一项：

{
  "//": "Visual Options",
  "body": "<String>",
  "icon": "<URL String>",
  "image": "<URL String>",
  "badge": "<URL String>",
  "dir": "<String of 'auto' | 'ltr' | 'rtl'>",
  "timestamp": "<Long>"

  "//": "Both visual & behavioral options",
  "actions": "<Array of Strings>",
  "data": "<Anything>",

  "//": "Behavioral Options",
  "tag": "<String>",
  "requireInteraction": "<boolean>",
  "renotify": "<Boolean>",
  "vibrate": "<Array of Integers>",
  "sound": "<URL String>",
  "silent": "<Boolean>",
}

我们来看看视觉选项：

通知界面剖析。

标题和正文选项

在 Windows 上的 Chrome 中，不含标题和选项的通知如下所示：

Windows 上的 Chrome 中不含标题和选项的通知。

如您所见，浏览器名称用作标题，“新通知”占位符用作通知正文。

如果设备上安装了渐进式 Web 应用，系统将使用 Web 应用名称，而不是浏览器名称：

通知中显示的是 Web 应用名称，而不是浏览器名称。

如果我们运行以下代码：

const title = 'Simple Title';

const options = {
  body: 'Simple piece of body text.\nSecond line of body text :)',
};

registration.showNotification(title, options);

我们会在 Linux 上的 Chrome 中收到以下通知：

Linux 上的 Chrome 中包含标题和正文的通知。

在 Linux 上的 Firefox 中，它将如下所示：

Linux 上的 Firefox 中包含标题和正文的通知。

以下是标题和正文中包含大量文本的通知在 Linux 上的 Chrome 中的显示效果：

Linux 版 Chrome 中标题和正文较长的通知。

Linux 上的 Firefox 会收起正文，直到您将鼠标悬停在通知上，通知才会展开：

Linux 上的 Firefox 中包含长标题和正文的通知。

在 Linux 上的 Firefox 中，当鼠标光标悬停在通知上时，通知会显示长标题和正文。

Windows 版 Firefox 中的相同通知如下所示：

Windows 上的 Firefox 中包含标题和正文的通知。

Windows 上的 Firefox 中标题和正文较长的通知。

如您所见，同一通知在不同的浏览器中可能呈现不同的外观。在不同平台上的同一浏览器中，它也可能看起来不同。

Chrome 和 Firefox 会在支持系统通知和通知中心的平台上使用这些功能。

例如，macOS 上的系统通知不支持图片和操作（按钮和内嵌回复）。

Chrome 还为所有桌面平台提供了自定义通知。您可以通过将 chrome://flags/#enable-system-notifications 标志设置为 Disabled 状态来启用它。

图标

icon 选项本质上是一个小图片，您可以在标题和正文旁边显示。

在代码中，您需要提供要加载的图片的网址：

const title = 'Icon Notification';

const options = {
  icon: '/images/demos/icon-512x512.png',
};

registration.showNotification(title, options);

您会在 Linux 版 Chrome 中收到以下通知：

以及 Linux 上的 Firefox 中：

遗憾的是，对于图标应使用多大尺寸的图片，并没有任何可靠的准则。

Android 似乎需要 64dp 的图片（即 64px 乘以设备像素比）。

假设设备的最高像素比为 3，则 192 像素或更大的图标尺寸是安全的选择。

徽章

badge 是一个单色小图标，用于向用户传达更多信息，让他们了解通知来自何处：

const title = 'Badge Notification';

const options = {
  badge: '/images/demos/badge-128x128.png',
};

registration.showNotification(title, options);

在撰写本文时，该标志仅在 Android 版 Chrome 中使用。

在其他浏览器（或没有徽章的 Chrome）上，您会看到浏览器的图标。

与 icon 选项一样，对于要使用的尺寸，没有实际的准则。

通过查阅 Android 指南，建议的尺寸为 24 像素乘以设备像素比。

这意味着，72 像素或更大的图片应该没问题（假设设备像素比上限为 3）。

映像

image 选项可用于向用户显示更大的图片。这对于向用户显示预览图片特别有用。

const title = 'Image Notification';

const options = {
  image: '/images/demos/unsplash-farzad-nazifi-1600x1100.jpg',
};

registration.showNotification(title, options);

在 Linux 上的 Chrome 中，通知将如下所示：

Linux 版 Chrome 中带有图片的通知。

在 Android 版 Chrome 中，剪裁和比例有所不同：

Android 版 Chrome 中带有图片的通知。

鉴于桌面设备和移动设备之间的比例差异，很难提出统一的准则。

由于桌面版 Chrome 不会填满可用空间，且宽高比为 4:3，因此最好的方法可能是提供具有此宽高比的图片，并允许 Android 剪裁图片。也就是说，image 选项仍可能会发生变化。

在 Android 上，唯一的准则是宽度为 450dp。

根据此准则，宽度不小于 1350 像素的图片会是不错的选择。

操作（按钮）

您可以定义 actions，以在通知中显示按钮：

const title = 'Actions Notification';

const options = {
  actions: [
    {
      action: 'coffee-action',
      type: 'button',
      title: 'Coffee',
      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);

对于每项操作，您可以定义 title、action（本质上是一个 ID）、icon 和 type。标题和图标是您在通知中可以看到的内容。该 ID 用于检测操作按钮是否已被点击（下一部分将对此进行详细介绍）。类型可以省略，因为 'button' 是默认值。

在撰写本文时，只有 Chrome 和 Opera for Android 支持操作。

在上面的示例中，定义了四项操作，这说明您可以定义的操作数量可以多于将要显示的操作数量。如果您想知道浏览器将显示的操作数量，可以检查 window.Notification?.maxActions：

const maxVisibleActions = window.Notification?.maxActions;

if (maxVisibleActions) {
  options.body = `Up to ${maxVisibleActions} notification actions can be displayed.`;
} else {
  options.body = 'Notification actions are not supported.';
}

在桌面设备上，操作按钮图标会显示其颜色（请参阅粉色甜甜圈）：

Linux 上的 Chrome 中包含操作按钮的通知。

在 Android 6 及更低版本中，图标会根据系统配色方案着色：

Chrome（Android 版）上带有操作按钮的通知。

在 Android 7 及更高版本中，操作图标根本不会显示。

Chrome 有望在桌面设备上更改其行为，以与 Android 保持一致（即应用适当的配色方案，使图标与系统外观和风格保持一致）。在此期间，您可以通过将图标颜色设置为 #333333 来匹配 Chrome 的文本颜色。

另外值得一提的是，图标在 Android 设备上看起来很清晰，但在桌面设备上不清晰。

在桌面版 Chrome 上，我能使用的最佳尺寸是 24px x 24px。遗憾的是，这在 Android 上看起来很不协调

我们可以从这些差异中总结出以下最佳实践：

为图标采用一致的配色方案，这样至少所有图标都能以一致的方式向用户显示。
确保它们在单色模式下也能正常显示，因为某些平台可能会以这种方式显示它们。
测试尺寸，看看哪种尺寸适合您。128px × 128px 在 Android 上效果很好，但在桌面设备上质量不佳。
操作图标可能根本不会显示。

通知规范正在探索一种定义多种尺寸图标的方法，但似乎还需要一段时间才能达成一致。

操作（内嵌回复）

您可以通过定义具有 'text' 类型的操作，向通知添加内嵌回复：

const title = 'Alexey Rodionov';

const options = {
  body: 'How are you doing? )',
  image: '/images/demos/avatar-512x512.jpg',
  icon: '/images/demos/icon-512x512.png',
  badge: '/images/demos/badge-128x128.png',
  actions: [
    {
      action: 'reply',
      type: 'text',
      title: 'Reply',
      icon: '/images/demos/action-5-128x128.png',
    }
  ],
};

registration.showNotification(title, options);

在 Android 设备上，该功能将如下所示：

Android 上带有回复操作按钮的通知。

点击操作按钮会打开一个文本输入字段：

Android 上的通知，其中包含已打开的文本输入字段。

您可以自定义文本输入字段的占位符：

const title = 'Alexey Rodionov';

const options = {
  body: 'How are you doing? )',
  icon: '/images/demos/avatar-512x512.jpg',
  badge: '/images/demos/badge-128x128.png',
  actions: [
    {
      action: 'reply',
      type: 'text',
      title: 'Reply',
      icon: '/images/demos/action-5-128x128.png',
      placeholder: 'Type text here',
    }
  ],
};

registration.showNotification(title, options);

Android 上的通知，其中包含文本输入字段的自定义占位符。

在 Windows 版 Chrome 中，文本输入字段始终可见，无需点击操作按钮：

Windows 上的通知，其中包含文本输入字段和回复操作按钮。

您可以添加多个内嵌回复，也可以将按钮和内嵌回复结合使用：

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);

Windows 上的通知，包含一个文本输入字段和两个操作按钮。

方向

借助 dir 参数，您可以定义文本的显示方向，即从右到左或从左到右。

在测试中，方向似乎主要由文本决定，而不是由该参数决定。根据规范，这旨在向浏览器建议如何布局操作等选项，但我没有看到任何差异。

最好尽可能定义，否则浏览器应根据提供的文本执行正确的操作。

该参数应设置为 auto、ltr 或 rtl。

在 Linux 上的 Chrome 中，从右到左书写的语言如下所示：

Linux 版 Chrome 上从右到左书写的语言通知。

在 Firefox 中（将鼠标悬停在它上方时），您会看到以下内容：

Linux 上的 Firefox 中使用从右到左书写的语言的通知。

振动

借助振动选项，您可以定义在显示通知时运行的振动模式，前提是用户当前的设置允许振动（即设备未处于静音模式）。

振动选项的格式应为数字数组，用于描述设备应振动的毫秒数，后跟设备不应振动的毫秒数。

const title = 'Vibrate Notification';

const options = {
  // Star Wars shamelessly taken from the awesome Peter Beverloo
  // https://tests.peter.sh/notification-generator/
  vibrate: [
    500, 110, 500, 110, 450, 110, 200, 110, 170, 40, 450, 110, 200, 110, 170,
    40, 500,
  ],
};

registration.showNotification(title, options);

这只会影响支持振动的设备。

声音

通过 sound 参数，您可以定义收到通知时要播放的声音。

在撰写本文时，没有任何浏览器支持此选项。

const title = 'Sound Notification';

const options = {
  sound: '/demos/notification-examples/audio/notification-sound.mp3',
};

registration.showNotification(title, options);

时间戳

借助时间戳，您可以告知平台导致发送推送通知的事件发生的时间。

timestamp 应为自世界协调时间 (UTC) 00:00:00（即 1970 年 1 月 1 日，UNIX 纪元）以来的毫秒数。

const title = 'Timestamp Notification';

const options = {
  body: 'Timestamp is set to "01 Jan 2000 00:00:00".',
  timestamp: Date.parse('01 Jan 2000 00:00:00'),
};

registration.showNotification(title, options);

用户体验最佳实践

我见过的最严重的用户体验问题是，通知中显示的信息不够具体。

您应考虑最初发送推送消息的原因，并确保使用所有通知选项来帮助用户了解他们阅读该通知的原因。

说实话，看到这些例子，我们很容易会想：“我绝不会犯这样的错误。”但落入这个陷阱比你想象的要容易得多。

要避免的一些常见误区：

请勿在标题或正文中添加您的网站。浏览器会在通知中包含您的域名，因此请勿重复添加。
使用您掌握的所有信息。如果您因为有人向用户发送了消息而发送推送消息，请不要使用标题“新消息”和正文“点击此处阅读”，而应使用标题“John 刚刚发送了一条新消息”，并将通知的正文设置为消息的一部分。

浏览器和功能检测

在撰写本文时，Chrome 和 Firefox 在通知功能支持方面存在很大差异。

幸运的是，您可以通过查看 window.Notification 原型来检测对通知功能的支持。

假设我们想知道通知是否支持操作按钮，可以执行以下操作：

if ('actions' in window.Notification?.prototype) {
  // Action buttons are supported.
} else {
  // Action buttons are NOT supported.
}

这样，我们就可以更改向用户显示的通知。

对于其他选项，只需执行与上述相同的操作，将 'actions' 替换为所需的参数名称。

显示通知

视觉选项

标题和正文选项

图标

徽章

映像

操作（按钮）

操作（内嵌回复）

方向

振动

声音

时间戳

用户体验最佳实践

浏览器和功能检测

下一步做什么

Codelab

显示通知 使用集合让一切井井有条 根据您的偏好保存内容并对其进行分类。

视觉选项

标题和正文选项

图标

徽章

映像

操作（按钮）

操作（内嵌回复）

方向

振动

声音

时间戳

用户体验最佳实践

浏览器和功能检测

下一步做什么

Codelab

显示通知