此页面由 Cloud Translation API 翻译。

显示通知

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 中）。

这是标题和正文中有许多文字的通知在 Chrome 中的显示效果如下： Linux：

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 的图片（即设备的像素比为 64 像素的倍数）。

假设某设备的最高像素比为 3，则 192px 或更大的图标大小为安全。

徽章

badge 是一个单色小图标，用于向告知用户通知来源：

const title = 'Badge Notification';

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

registration.showNotification(title, options);

在撰写本文时，徽章仅适用于 Android 版 Chrome。

在其他浏览器（或不带徽章的 Chrome）上，您会看到相应浏览器的图标。

与 icon 选项一样，对于应该使用哪种尺寸，并没有实际的准则。

仔细阅读 Android 指南建议的尺寸为 24 像素乘以设备像素比。

也就是说，72px 或更大的图片应该才是不错的图片（假设设备最大像素比为 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' 是默认值。

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

在上例中，我们定义了四种操作，以说明您可以定义更多操作，。如果您想知道浏览器显示的操作数量，您可以查看 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。很遗憾，这看起来不太合适。

根据这些差异，我们可以总结出的最佳做法：

确保图标的配色方案保持一致，以便至少所有图标保持一致显示给用户
请确保图片以单色显示，因为某些平台可能会以单色显示。
测试尺寸并找出最适合您的尺寸。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);

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

声音

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

在撰写本文时，尚无浏览器支持此选项。

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' 替换为所需的参数名称。