Уведомления PPush позволяют вам предоставлять пользователям отличный опыт работы в приложении, оповещая их о важных и своевременных обновлениях, таких как входящие сообщения чата. Платформа уведомлений относительно нова в браузерах, и по мере того, как все больше и больше вариантов использования и требований конкретизируются, мы видим много дополнений к API для уведомлений. Chrome 50 (бета-версия в марте 2016 года) не является исключением, с не менее чем четырьмя новыми функциями, которые дают разработчикам больше контроля над уведомлениями. Вы получаете возможность:
- добавить значки к кнопкам уведомлений,
- изменить временную метку, чтобы обеспечить единообразие опыта,
- отслеживать события закрытия уведомлений, чтобы синхронизировать уведомления и предоставлять аналитику,
- управлять повторным уведомлением, когда уведомление заменяет текущее отображаемое уведомление.
Chrome 50 также добавил полезные нагрузки для Push-уведомлений . Чтобы оставаться в курсе API уведомлений, реализованного в Chrome, следите за спецификацией и трекером ошибок спецификации .
Создавайте привлекательные кнопки действий с пользовательскими значками
В недавнем посте о кнопках действий уведомлений в Chrome 49 я упоминал, что вы не можете прикреплять изображения к кнопкам уведомлений, чтобы сделать их броскими и привлекательными, но вы можете использовать символы Unicode для встраивания эмодзи и т. д. Теперь вам не о чем беспокоиться: с этим недавним дополнением вы теперь можете указать изображение на кнопке действия:
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 еще не направлялась через Service Worker.)
Уведомление о закрытии событий
Часто запрашиваемая функция уведомлений — это возможность узнать, когда пользователь отклонил уведомление. У нас не было возможности сделать это, пока недавний набор изменений в спецификации уведомлений не добавил событие notificationclose.
Используя событие notificationclick и notificationclose, вы можете понять, как ваши пользователи взаимодействуют с вашими уведомлениями. Оставляют ли они их открытыми в течение длительного времени, а затем активно отклоняют их или же они сразу же реагируют на них.
Одним из популярных вариантов использования является возможность синхронизации уведомлений между устройствами. Если пользователь отклоняет уведомление на своем настольном устройстве, то же самое уведомление на его мобильном устройстве также должно быть отклонено. У нас пока нет возможности делать это молча (помните, что каждое push-сообщение должно иметь отображаемое уведомление), но использование notificationclose открывает возможность справиться с этим, позволяя вам отслеживать состояние уведомления для пользователя на вашем сервере и синхронизировать его с другими устройствами, когда пользователь их использует.
Чтобы использовать событие notificationclose, зарегистрируйте его внутри своего Service Worker, и оно будет срабатывать только тогда, когда пользователь активно закрыл уведомление, например, если пользователь закрыл определенное уведомление или закрыл все уведомления в трее (на Android).
Если флаг requireInteraction имеет значение false или не установлен, то, если уведомление не будет закрыто вручную пользователем, а будет закрыто автоматически системой, событие notificationclose не будет запущено.
Ниже показана простая реализация. Когда пользователь отклоняет уведомление, вы получаете доступ к объекту уведомления, из которого вы можете выполнить пользовательскую логику.
self.addEventListener('notificationclose', e => console.log(e.notification));
Вы можете проверить это в генераторе уведомлений ; вы получите оповещение, когда закроете уведомление.
Не раздражайте своих пользователей, заменяя существующее уведомление.
Я почти уверен, что дядя Бен говорил о системе уведомлений, а не о полномочиях Питера Паркера, когда он сказал: «С большой силой приходит большая ответственность». Система уведомлений — это мощное средство взаимодействия с пользователями. Если вы злоупотребите их доверием, они отключат все уведомления, и вы можете потерять их навсегда.
При создании уведомления вы можете настроить его на создание звукового оповещения или вибрации для привлечения внимания пользователя. Кроме того, вы можете заменить существующее уведомление, повторно используя его атрибут 'tag' в новом объекте уведомления.
До Chrome 50 каждый раз, когда вы создавали уведомление или заменяли существующее, оно запускало шаблон вибрации или воспроизводило звуковое оповещение, и это могло вызвать разочарование у ваших пользователей. Теперь в Chrome 50 вы теперь можете контролировать то, что происходит во время повторного уведомления, с помощью простого логического флага, называемого «renotify». Новое поведение по умолчанию при использовании того же «тега» для последующих уведомлений — быть беззвучным, и как разработчик вы должны выбрать «повторное уведомление» пользователя, установив флаг на «true».
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. Хотя она не видна на десктопе, она повлияет на порядок уведомлений как на мобильном устройстве, так и на десктопе.