Показ уведомления

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>",
}

Давайте рассмотрим визуальные варианты:

Варианты заголовка и текста

Вот как выглядит уведомление без заголовка и вариантов в Chrome на Windows:

Как видите, название браузера используется в качестве заголовка, а плейсхолдер "Новое уведомление" – в качестве текста уведомления.

Если на устройстве установлено современное веб-приложение, вместо названия браузера будет использоваться название этого приложения:

Если мы запустим следующий код:

const title = 'Simple Title';

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

registration.showNotification(title, options);

то в Chrome на Linux мы получим такое уведомление:

В Firefox на Linux это будет выглядеть так:

Вот как выглядит уведомление с большим количеством текста в заголовке и теле в Chrome на Linux:

Firefox в Linux сворачивает текст сообщения, пока вы не наведете указатель мыши на уведомление, в результате чего уведомление развернется:

В браузере Firefox на устройстве Windows уведомления выглядят так:

Как видите, одно и то же уведомление может выглядеть по-разному в разных браузерах. Оно также может по-разному выглядеть в одном и том же браузере на разных платформах.

Chrome и Firefox используют системные уведомления и центр уведомлений на платформах, где они доступны.

Например, системные уведомления в macOS не поддерживают изображения и действия (кнопки и встроенные ответы).

В Chrome также есть специальные уведомления для всех платформ настольных компьютеров. Чтобы включить его, установите для параметра chrome://flags/#enable-system-notifications значение Disabled.

Значок

icon – это небольшое изображение, которое можно показывать рядом с заголовком и основным текстом.

В коде необходимо указать URL изображения, которое вы хотите загрузить:

const title = 'Icon Notification';

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

registration.showNotification(title, options);

В Chrome на Linux вы получите следующее уведомление:

и в Firefox на Linux:

К сожалению, нет четких рекомендаций по размеру изображения для значка.

Для Android требуется изображение размером 64 dp (64 пикселя, умноженные на соотношение логических и физических пикселей устройства).

Если предположить, что максимальное соотношение пикселей для устройства равно 3, то размер значка 192 пикселя или более будет безопасным выбором.

Примечание. Некоторые браузеры могут требовать, чтобы изображение передавалось по протоколу HTTPS. Учитывайте это, если вы планируете использовать сторонний образ.

Значок

badge – это небольшой монохромный значок, который сообщает пользователю, откуда пришло уведомление.

const title = 'Badge Notification';

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

registration.showNotification(title, options);

На момент написания этой статьи значок используется только в Chrome на Android.

В других браузерах (или в 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);

В Chrome на Linux уведомление будет выглядеть так:

В Chrome на Android кадрирование и соотношение сторон отличаются:

Из-за различий в соотношении между компьютерами и мобильными устройствами крайне сложно предложить рекомендации.

Поскольку Chrome на компьютере не заполняет доступное пространство и имеет соотношение сторон 4:3, возможно, лучше всего будет показывать изображение с таким соотношением сторон и разрешить Android обрезать его. Однако вариант image все ещё может измениться.

На Android единственное требование – ширина 450 dp.

В соответствии с этим правилом, изображение шириной 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 (по сути, идентификатор), icon и type. Заголовок и значок – это то, что вы видите в уведомлении. Идентификатор используется для определения того, что была нажата командная кнопка (подробнее об этом в следующем разделе). Тип можно не указывать, поскольку значением по умолчанию является 'button'.

На момент написания этой статьи действия поддерживаются только в Chrome и Opera для 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.';
}

На компьютере значки командных кнопок отображаются в цвете (см. розовый пончик):

На устройствах с Android 6 и более ранними версиями ОС значки окрашены в соответствии с цветовой схемой системы:

На устройствах с Android 7 и более поздними версиями ОС значки действий не показываются.

Надеемся, что в Chrome для компьютеров будет реализовано такое же поведение, как и в Android (т.е. будет применяться подходящая цветовая схема, чтобы значки соответствовали внешнему виду системы). Пока же вы можете сделать цвет значков таким же, как цвет текста в Chrome, задав для них значение #333333.

Также стоит отметить, что значки выглядят четкими на Android, но не на компьютере.

Оптимальный размер для Chrome на компьютере – 24 x 24 пикселя. К сожалению, на Android это выглядит неуместно.

Вот что мы рекомендуем делать с учетом этих различий:

• Используйте одну цветовую схему для всех значков, чтобы они выглядели единообразно.
• Убедитесь, что они хорошо выглядят в монохромном режиме, поскольку на некоторых платформах они могут отображаться именно так.
• Протестируйте разные размеры и выберите подходящий. Размер 128 × 128 пикселей хорошо подходит для Android, но на компьютере качество изображения было низким.
• Значки действий не будут показываться.

В спецификации Notification рассматривается возможность задавать значки разных размеров, но, похоже, до принятия окончательного решения пройдет ещё немало времени.

Действия (встроенные ответы)

Вы можете добавить в уведомление встроенный ответ, определив действие с типом '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:

При нажатии на командную кнопку открывается поле ввода текста:

Вы можете настроить плейсхолдер для поля ввода текста:

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

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

Направление

Параметр dir позволяет указать направление текста: справа налево или слева направо.

В ходе тестирования выяснилось, что направление в основном определяется текстом, а не этим параметром. Согласно спецификации, это должно подсказать браузеру, как разместить такие элементы, как действия, но я не заметил разницы.

Рекомендуем задать его, если это возможно. В противном случае браузер должен выполнить правильное действие в соответствии с предоставленным текстом.

Для этого параметра можно задать значение auto, ltr или rtl.

Вот как выглядит язык с письмом справа налево в Chrome на Linux:

В Firefox (при наведении указателя мыши) вы увидите следующее:

Вибросигнал.

Внимание! Поддержка vibrate прекращена в Android 8 и более поздних версиях.

Параметр vibrate позволяет задать шаблон вибрации, который будет использоваться при показе уведомления, если это разрешено текущими настройками пользователя (например, устройство не находится в режиме без звука).

Формат параметра vibrate должен представлять собой массив чисел, описывающих количество миллисекунд, в течение которых устройство должно вибрировать, за которым следует количество миллисекунд, в течение которых устройство не должно вибрировать.

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

Временная метка

Временная метка позволяет сообщить платформе, когда произошло событие, в результате которого было отправлено push-уведомление.

Значение timestamp должно быть указано в миллисекундах, прошедших с 00:00:00 UTC 1 января 1970 г. (эпоха 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);

Рекомендации по улучшению интерфейса

Самая большая ошибка UX, которую я видел в уведомлениях, – это отсутствие конкретики в отображаемой информации.

Подумайте, зачем вы отправляете push-уведомление, и используйте все доступные настройки, чтобы пользователям было понятно, почему они его получили.

Честно говоря, легко увидеть примеры и подумать: «Я никогда не совершу такую ошибку». Но попасть в эту ловушку проще, чем вы думаете.

Вот некоторые распространенные ошибки:

• Не указывайте адрес сайта в заголовке или тексте. Браузеры включают домен в уведомление, поэтому не дублируйте его.
• Используйте всю доступную информацию. Если вы отправляете push-уведомление о том, что пользователь получил сообщение, не используйте заголовок "Новое сообщение" и текст "Нажмите здесь, чтобы прочитать". Лучше написать "Иван отправил вам сообщение" и добавить в текст уведомления часть сообщения.

Браузеры и определение функций

На момент написания статьи между Chrome и Firefox существует довольно большая разница в поддержке функций уведомлений.

К счастью, вы можете определить, поддерживаются ли функции уведомлений, посмотрев на прототип window.Notification.

Допустим, мы хотим узнать, поддерживает ли уведомление командные кнопки. Для этого нужно сделать следующее:

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

Это позволит нам изменить уведомление, которое мы показываем пользователям.

Для других вариантов сделайте то же самое, заменив 'actions' на нужное название параметра.

Куда отправиться дальше

• Общие сведения о push-уведомлениях из веб-приложений
• Как работает push-уведомление
• Как подписать пользователя
• Permission UX
• Отправка сообщений с помощью библиотек Web Push
• Протокол Web Push
• Обработка событий push-уведомлений
• Показ уведомления
• Поведение уведомлений
• Распространенные шаблоны уведомлений
• Часто задаваемые вопросы о push-уведомлениях
• Распространенные проблемы и сообщения об ошибках

Практические работы

• Как создать клиент для push-уведомлений
• Как создать сервер push-уведомлений