显示通知

Alexey Rodionov
Alexey Rodionov
Matt Gaunt

通知选项分为两个部分,一部分用于处理视觉元素(本部分),另一部分用于说明通知的行为方面(下一部分)。

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

用于显示通知的 API 很简单:

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

titleoptions 这两个参数都是可选的。

标题是字符串,选项可以是以下任一项:

{
  "//": "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 应用名称,而不是浏览器名称:

通知中显示的是网站应用名称,而不是浏览器名称。

如果我们运行以下代码:

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 版 Chrome 中的带图标的通知。

在 Linux 上的 Firefox 中:

Linux 版 Firefox 中的带图标的通知。

遗憾的是,对于应该为图标使用何种尺寸的图片,并没有明确的准则。

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

假设某设备的最高像素比为 3,那么确定不小于 192px 的图标大小是稳妥的。

徽章

badge 是一个小型单色图标,用于向用户提供有关通知来源的更多信息:

const title = 'Badge Notification';

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

registration.showNotification(title, options);

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

Android 版 Chrome 中的带标记的通知。

在其他浏览器(或不带徽章的 Chrome)上,您会看到相应浏览器的图标。

Android 版 Firefox 中的带标记的通知。

icon 选项一样,没有关于使用哪种大小的实际准则。

仔细研究 Android 准则后,我们发现建议的大小为 24px x 设备像素比率。

也就是说,图片应至少为 72 像素(假设设备像素比上限为 3)。

Image

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,因此最佳做法可能是提供宽高比为 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);

对于每项操作,您可以定义 titleaction(本质上是 ID)、icontype。标题和图标是指您在通知中看到的内容。在检测到用户点击了操作按钮时,系统会使用此 ID(下一部分会对此进行详细介绍)。可以省略类型,因为默认值为 'button'

在撰写本文时,只有适用于 Android 的 Chrome 和 Opera 支持操作。

在上面的示例中,定义了 4 项操作,以说明您可以定义的操作数量多于实际显示的操作数量。如果您想知道浏览器将显示的操作数量,可以查看 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 上看起来不太合适。

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

  • 请为图标采用一致的配色方案,以便至少向用户显示一致的所有图标。
  • 请确保它们在单色模式下也能正常运行,因为某些平台可能会以这种方式显示它们。
  • 测试大小,看看哪种大小最适合您。128 像素 x 128 像素在 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 参数,您可以定义文本应显示的方向(从右到左还是从左到右)。

在测试中,方向似乎主要由文本(而非此参数)决定。根据规范,这是为了向浏览器建议如何布局操作等选项,但我发现没有区别。

如果可以,最好进行定义,否则浏览器应根据提供的文本执行正确的操作。

该参数应设置为 autoltrrtl

在 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