Поведение уведомлений

Alexey Rodionov
Alexey Rodionov
X GitHub LinkedIn

До сих пор мы рассматривали варианты, которые изменяют внешний вид уведомления. Также есть параметры, которые изменяют поведение уведомлений.

По умолчанию вызов showNotification() только с визуальными параметрами будет иметь следующее поведение:

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

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

Событие клика по уведомлению

По умолчанию при нажатии на уведомление ничего не происходит. Оно даже не закрывает и не удаляет уведомление.

Обычно при нажатии на уведомление оно закрывается и выполняется какое-либо действие, например открывается окно или выполняется вызов API.

Для этого нужно добавить прослушиватель событий 'notificationclick' в сервис-воркер. Он будет вызываться при каждом нажатии на уведомление.

self.addEventListener('notificationclick', (event) => {
  const clickedNotification = event.notification;
  clickedNotification.close();

  // Do something as the result of the notification click
  const promiseChain = doSomething();
  event.waitUntil(promiseChain);
});

Как видно из этого примера, доступ к уведомлению, на которое нажал пользователь, можно получить с помощью event.notification. Это позволит вам получить доступ к свойствам и методам уведомления. В этом случае вы вызываете метод close() и выполняете дополнительные действия.

Действия

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

Кнопки

В предыдущем разделе вы узнали, как определить командные кнопки при вызове showNotification():

const title = 'Actions Notification';

const options = {
  actions: [
    {
      action: 'coffee-action',
      title: 'Coffee',
      type: 'button',
      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);

Если пользователь нажимает командную кнопку, проверьте значение event.action в событии noticationclick, чтобы узнать, какая командная кнопка была нажата.

Переменная event.action будет содержать значение action, заданное в настройках. В примере выше значения event.action могут быть следующими: 'coffee-action', 'doughnut-action', 'gramophone-action' или 'atom-action'.

Это позволит отслеживать нажатия на уведомления или действия, например:

self.addEventListener('notificationclick', (event) => {
  if (!event.action) {
    // Was a normal notification click
    console.log('Notification Click.');
    return;
  }

  switch (event.action) {
    case 'coffee-action':
      console.log("User ❤️️'s coffee.");
      break;
    case 'doughnut-action':
      console.log("User ❤️️'s doughnuts.");
      break;
    case 'gramophone-action':
      console.log("User ❤️️'s music.");
      break;
    case 'atom-action':
      console.log("User ❤️️'s science.");
      break;
    default:
      console.log(`Unknown action clicked: '${event.action}'`);
      break;
  }
});

Встроенные ответы

В предыдущем разделе вы узнали, как добавить встроенный ответ в уведомление.

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

event.reply будет содержать значение, введенное пользователем в поле ввода:

self.addEventListener('notificationclick', (event) => {
  const reply = event.reply;

  // Do something with the user's reply
  const promiseChain = doSomething(reply);
  event.waitUntil(promiseChain);
});

Тег

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

Давайте покажем уведомление и добавим к нему тег 'message-group-1'. Уведомление будет показано с помощью следующего кода:

const title = 'Notification 1 of 3';

const options = {
  body: "With 'tag' of 'message-group-1'",
  tag: 'message-group-1',
};

registration.showNotification(title, options);

которое покажет наше первое уведомление.

Первое уведомление с тегом группы сообщений 1.

Давайте покажем второе уведомление с новым тегом 'message-group-2', например:

const title = 'Notification 2 of 3';

const options = {
  body: "With 'tag' of 'message-group-2'",
  tag: 'message-group-2',
};

registration.showNotification(title, options);

Пользователь увидит второе уведомление.

Два уведомления, где второй тег группы сообщений 2.

Теперь давайте покажем третье уведомление, но повторно используем первый тег 'message-group-1'. В результате первое уведомление будет закрыто и заменено новым.

const title = 'Notification 3 of 3';

const options = {
  body: "With 'tag' of 'message-group-1'",
  tag: 'message-group-1',
};

registration.showNotification(title, options);

Теперь у нас есть два уведомления, хотя метод showNotification() был вызван три раза.

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

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

Обратите внимание, что при замене уведомления с помощью tag не будет звукового сигнала или вибрации.

Для этого и нужен параметр renotify.

Повторное уведомление

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

В некоторых случаях может потребоваться, чтобы заменяющее уведомление не просто обновляло информацию, а привлекало внимание пользователя. Хороший пример – приложения для чатов. В этом случае для параметров tag и renotify нужно задать значение true.

const title = 'Notification 2 of 2';

const options = {
  tag: 'renotify',
  renotify: true,
};

registration.showNotification(title, options);

Без звука

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

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

const title = 'Silent Notification';

const options = {
  silent: true,
};

registration.showNotification(title, options);

Требуется взаимодействие

В Chrome на компьютере уведомления показываются в течение определенного времени, а затем скрываются. В Chrome на Android такого поведения нет. Уведомления показываются, пока пользователь не начнет с ними взаимодействовать.

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

const title = 'Require Interaction Notification';

const options = {
  requireInteraction: true,
};

registration.showNotification(title, options);

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

В следующем разделе мы рассмотрим некоторые распространенные шаблоны, используемые в Интернете для управления уведомлениями и выполнения таких действий, как открытие страниц при нажатии на уведомление.

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

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