Улучшения веб-уведомлений в Chrome 50 — значки, события закрытия, настройки повторного уведомления и временные метки

Уведомления PPush позволяют вам предоставить вашим пользователям отличный опыт работы с приложением, предупреждая их о важных и своевременных обновлениях, таких как входящие сообщения в чате. Платформа уведомлений является относительно новой в браузерах, и по мере того, как становится все больше и больше вариантов использования и требований, мы видим множество дополнений к API-интерфейсам для уведомлений. Chrome 50 (бета-версия выйдет в марте 2016 г.) не является исключением: в нем имеется не менее четырех новых функций, которые дают разработчикам больше контроля над уведомлениями. Вы получаете возможность:

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

В Chrome 50 также добавлены полезные данные для push-уведомлений . Чтобы быть в курсе API уведомлений в том виде, в каком он реализован в Chrome, следуйте спецификации и системе отслеживания проблем со спецификациями .

Создавайте привлекательные кнопки действий с настраиваемыми значками

В недавнем сообщении о кнопках действий уведомлений в Chrome 49 я упоминал, что вы не можете прикреплять изображения к кнопкам уведомлений, чтобы сделать их эффектными и привлекательными, но вы можете использовать символы Юникода для встраивания смайлов и т. д. Теперь вам не нужно беспокойтесь: благодаря этому недавнему дополнению вы теперь можете указать изображение для кнопки действия:

self.registration.showNotification('New message from Alice', {
  actions: [
    {action: 'like', title: 'Like', icon: 'https://example/like.png'},
    {action: 'reply', title: 'Reply', icon: 'https://example/reply.png'}]
});
Уведомление на рабочем столе

Внешний вид значка действия зависит от платформы. Например, на Android значок будет иметь темно-серый фильтр, примененный в Lollipop и выше, и белый фильтр до Lollipop, а на рабочем столе он будет полноцветным. (Примечание: будущее этого на рабочем столе обсуждается .) Некоторые платформы могут даже не иметь возможности отображать значки действий, поэтому убедитесь, что вы используете значки для обеспечения контекста действия, а не в качестве единственного индикатора намерения. .

И, наконец, поскольку ресурсы необходимо загружать, рекомендуется делать значки как можно меньшими и предварительно кэшировать их в событии установки. (На момент написания этой статьи выборка ресурсов уведомлений в Chrome еще не маршрутизировалась через сервис-воркера.)

События закрытия уведомлений

Часто запрашиваемой функцией уведомлений является возможность узнать, когда пользователь отклонил уведомление. У нас не было возможности сделать это, пока недавний набор изменений в спецификации уведомлений не добавил событие NotificationClose.

Используя уведомлениеclick и событие NotificationClose, вы можете понять, как ваши пользователи взаимодействуют с вашими уведомлениями. Оставляют ли они их открытыми в течение длительного времени, а затем активно отклоняют их, или они сразу же действуют в соответствии с ними?

Одним из популярных вариантов использования является возможность синхронизации уведомлений между устройствами. Если пользователь отклоняет уведомление на своем настольном устройстве, то же самое уведомление на своем мобильном устройстве также должно быть отклонено. У нас пока нет возможности делать это автоматически (помните, что каждое push-сообщение должно иметь отображаемое уведомление), но использование NotificationClose открывает возможность справиться с этим, позволяя отслеживать состояние уведомления для пользователя на вашем сервере. и синхронизировать его с другими устройствами по мере их использования пользователем.

Чтобы использовать событие уведомления о закрытии, зарегистрируйте его внутри своего сервис-воркера, и оно будет срабатывать только тогда, когда пользователь активно отклонил уведомление, например, если пользователь отклоняет определенное уведомление или отклоняет все уведомления в своей области уведомлений (на Android).

Если флаг requireInteraction имеет значение false или не установлен, то, если уведомление не закрывается пользователем вручную, а автоматически системой, событие NotificationClose не будет инициировано.

Простая реализация показана ниже. Когда пользователь отклоняет уведомление, вы получаете доступ к объекту уведомления, из которого можно выполнять собственную логику.

self.addEventListener('notificationclose', e => console.log(e.notification));

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

Не раздражайте пользователей, заменяя существующее уведомление.

Я почти уверен , что дядя Бен имел в виду систему уведомлений, а не полномочия Питера Паркера, когда говорил: «С большой силой приходит и большая ответственность». Система уведомлений — мощное средство взаимодействия с пользователями. Если вы злоупотребите их доверием, они отключат все уведомления, и вы можете полностью их потерять.

Когда вы создаете уведомление, вы можете настроить его на создание звукового оповещения или вибрацию, чтобы привлечь внимание пользователя. Кроме того, вы можете заменить существующее уведомление, повторно используя его атрибут «тег» в новом объекте уведомления.

До Chrome 50 каждый раз, когда вы создавали уведомление или заменяли существующее, он запускал вибрацию или воспроизводил звуковой сигнал, и это могло вызвать разочарование у ваших пользователей. Теперь в Chrome 50 у вас есть контроль над тем, что происходит во время повторного уведомления, с помощью простого логического флага под названием «renotify». Новое поведение по умолчанию при использовании одного и того же «тега» для последующих уведомлений — молчать, и как разработчик вы должны выбрать «повторное уведомление» пользователя, установив для флага значение «истина».

self.registration.showNotification('Oi!', {
  'renotify': true,
  'tag': 'tag-id-1'
});

Вы можете попробовать это в генераторе уведомлений .

Управляйте меткой времени, отображаемой пользователю

На Android уведомления Chrome по умолчанию показывают время создания в правом верхнем углу. К сожалению, это может быть не тот момент, когда уведомление было фактически создано вашей системой. Например, событие могло быть инициировано, когда устройство находилось в автономном режиме, или могло отображаться уведомление о предстоящем собрании. Начиная с Chrome 50, в Chrome добавлено новое свойство timestamp , которое позволяет разработчикам указывать время, которое должно отображаться в уведомлении.

self.registration.showNotification('Best day evar!', {
  'timestamp': 360370800000
});

Временная метка в настоящее время видна только в Chrome для Android. Хотя оно не отображается на настольном компьютере, оно повлияет на порядок уведомлений как на мобильном, так и на настольном компьютере.