Эта страница переведена с помощью Cloud Translation API.

Действия с уведомлениями в Chrome 48

Paul Kinlan

В начале 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'}]
});

Это создаст простое уведомление с двумя кнопками. Обратите внимание, что добавлять значки к действию напрямую ( пока ) невозможно, но вы можете использовать эмодзи и расширенный набор символов Unicode, чтобы добавить больше контекста к кнопкам уведомлений.

Например:

self.registration.showNotification("New message from Alice", {
  actions: [
    {action: 'like', title: '👍Like'},
    {action: 'reply', title: '⤻ Reply'}]
});

Теперь, когда вы создали уведомление и заставили его выглядеть 😻, пользователь может взаимодействовать с уведомлением в какой-то момент в будущем. Взаимодействия с уведомлением в настоящее время (начиная с Chrome 48) происходят через событие notificationclick , зарегистрированное в вашем service worker, и они могут быть либо общим нажатием на уведомление, либо определенным нажатием на одну из кнопок действий. Примечание: в будущем вы также сможете реагировать на событие 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);

Интересно то, что действия не обязательно должны открывать новое окно, они могут выполнять общие взаимодействия с приложением без создания пользовательского интерфейса. Например, пользователь может поставить отметку «Нравится» или «Удалить» публикацию в социальных сетях, которая выполнит действие с локальными данными пользователя, а затем синхронизировать ее с облаком, не открывая пользовательский интерфейс (хотя хорошей практикой является отправка сообщения об изменении данных в любые открытые окна, чтобы пользовательский интерфейс мог быть обновлен). Для действия, требующего взаимодействия с пользователем, вы откроете окно, чтобы пользователь мог ответить.

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

Если вы хотите увидеть это в действии сегодня, ознакомьтесь с тестом уведомлений Питера Беверлоо «Harnes » и ознакомьтесь со спецификацией уведомлений или следите за ее обновлениями .

Paul Kinlan

self.registration.showNotification('New message from Alice', {
  actions: [
    {action: 'like', title: 'Like'},
    {action: 'reply', title: 'Reply'}]
});

Например:

self.registration.showNotification("New message from Alice", {
  actions: [
    {action: 'like', title: '👍Like'},
    {action: 'reply', title: '⤻ Reply'}]
});

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

Действия с уведомлениями в Chrome 48 Оптимизируйте свои подборки Сохраняйте и классифицируйте контент в соответствии со своими настройками.

Действия с уведомлениями в Chrome 48