В начале 2015 года мы представили push-сообщения и уведомления в Chrome для Android и настольных компьютеров. Это был большой шаг вперед в Интернете. Пользователи могли начать более глубоко взаимодействовать с Интернетом, даже когда браузер был закрыт.
Хотя то, что вы можете отправлять эти сообщения, это здорово, единственное, что вы можете с ними сделать, — это либо щелкнуть по нему и открыть страницу, либо полностью закрыть ее.
Если вы посмотрите на уведомления, изначально предоставляемые приложениям на мобильных платформах, таких как iOS и Android, каждое из них позволяет разработчику определять контекстные действия, которые пользователь может вызывать и с которыми взаимодействовать. В Chrome 48 мы добавили аналогичную возможность для веб-уведомлений на рабочем столе и в Chrome для Android.
Дополнение к API довольно простое. Вам просто нужно создать массив действий и добавить их в объект NotificationOptions при вызове showNotification из регистрации ServiceWorker (либо непосредственно в ServiceWorker, либо на странице через navigator.serviceWorker.ready ).
В настоящее время Chrome поддерживает только два действия для каждого уведомления . Некоторые платформы могут поддерживать больше, а некоторые — меньше или вообще не поддерживать. Вы можете определить, что поддерживает платформа, проверив Notification.maxActions . В следующих примерах мы предполагаем, что платформа поддерживает два действия.
self.registration.showNotification('New message from Alice', {
actions: [
{action: 'like', title: 'Like'},
{action: 'reply', title: 'Reply'}]
});
Это создаст простое уведомление с двумя кнопками. Обратите внимание: напрямую добавить значки к действию невозможно ( пока ), но вы можете использовать Emoji и расширенный набор символов Юникода, чтобы добавить больше контекста к кнопкам уведомлений.
Например:
self.registration.showNotification("New message from Alice", {
actions: [
{action: 'like', title: '👍Like'},
{action: 'reply', title: '⤻ Reply'}]
});
Теперь, когда вы создали уведомление и придали ему вид 😻, пользователь может взаимодействовать с уведомлением в какой-то момент в будущем. В настоящее время все взаимодействия с уведомлением (начиная с Chrome 48) осуществляются через событие notificationclick , зарегистрированное в вашем сервисном работнике, и это может быть либо обычный щелчок по уведомлению, либо конкретное нажатие на одну из кнопок действий. Примечание: в будущем вы также сможете отвечать на событие NotificationClose .
Чтобы понять, какое действие предпринял пользователь, вам необходимо проверить свойство action события, а затем у вас есть выбор: либо открыть новую страницу, чтобы пользователь мог выполнить действие, либо выполнить задачу в фоновом режиме.
self.addEventListener('notificationclick', function(event) {
var messageId = event.notification.data;
event.notification.close();
if (event.action === 'like') {
silentlyLikeItem();
}
else if (event.action === 'reply') {
clients.openWindow("/messages?reply=" + messageId);
}
else {
clients.openWindow("/messages?reply=" + messageId);
}
}, false);
Интересно то, что действиям не нужно открывать новое окно, они могут выполнять общие взаимодействия с приложением без создания пользовательского интерфейса. Например, пользователь может поставить «Нравится» или «Удалить» публикацию в социальной сети, которая выполнит действие с локальными данными пользователя, а затем синхронизировать ее с облаком, не открывая пользовательский интерфейс (хотя хорошей практикой является сообщение об изменении данных на любые открытые окна, чтобы можно было обновить пользовательский интерфейс). Для действия, требующего взаимодействия с пользователем, вы откроете окно, в котором пользователь может ответить.
Поскольку платформы не будут поддерживать одинаковое количество действий или, в некоторых случаях, вообще не смогут поддерживать кнопки действий при уведомлении, вам необходимо убедиться, что вы всегда предоставляете разумный запасной вариант для задачи, которую вы ожидаете от пользователя. сделать, если бы они просто щелкнули уведомление.
Если вы хотите увидеть это в действии сегодня, ознакомьтесь с программой тестирования уведомлений Питера Беверлоо и прочитайте спецификацию уведомлений или следуйте инструкциям по мере ее обновления .