Отображение нативных всплывающих окон с помощью API уведомлений JavaScript

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

Создание нового уведомления

Новые уведомления создаются с помощью конструктора Notification. Он принимает 2 аргумента: первый — это заголовок, второй (необязательный) — это объект с различными свойствами:

dir: место отображения уведомления. По умолчанию auto, но могут использоваться rtl для расположения справа и ltr для расположения слева.
lang: строковое значение для языка — языковые тэги BCP 47.
badge: строка, содержащая URL изображения, использованного для представления уведомления, если на экране для него недостаточно места.
body: строка с текстом уведомления.
tag: строка с тэгом-идентификатором уведомления.
icon: URL-строка с URL значка.
image: URL-строка для отображаемой картинки.
data: данные, которые мы хотим связать с уведомлением.
vibrate: настройки вибрации для устройств с поддержкой этой функции.
renotify: логическое значение, определяющее, следует ли уведомлять пользователя после того, как новое уведомление заменит старое. По умолчанию значение false.
requireInteraction: отображает, должно ли уведомление оставаться активным, пока пользователь не кликнет на него или не отклонит его. По умолчанию значение false.
actions: массив NotificationAction, содержащий действия, доступные пользователю при отображении уведомления. Это объект со свойствами name, title и icon.

Простое уведомление выглядит следующим образом:

const options = {
  body: "body",
  icon:
    "https://www.iconninja.com/files/926/373/306/link-chain-url-web-permalink-web-address-icon.png"
};

const n = new Notification("title", options);

Notification нужно настроить так, чтобы уведомления всегда отображались в браузере, тогда мы сможем увидеть созданное уведомление. Мы увидим текст и значок, заданный в свойстве icon.

Методы объекта Notification

Запрос разрешения

Мы можем запросить разрешение статичным методом requestPermission. Он возвращает промис, который решает, разрешен ли показ уведомления. Решение принимается с объектом, имеющим данные разрешения.

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

Например:

(async () => {
  try {
    const permission = await Notification.requestPermission();
    console.log(permission);
    const options = {
      body: "body",
      icon:
        "https://www.iconninja.com/files/926/373/306/link-chain-url-web-permalink-web-address-icon.png"
    };
    const n = new Notification("title", options);
  } catch (error) {
    console.log(error);
  }
})();

Если получено разрешение, console.log в блоке try запишет granted. В обратном случае он запишет denied из console.log в блоке catch.

Закрытие уведомления программным путем

Мы можем закрыть уведомление программным методом close — методом экземпляра объекта Notification.

Например:

(async () => {
  try {
    const permission = await Notification.requestPermission();
    console.log(permission);
    const options = {
      body: "body",
      icon:
        "https://www.iconninja.com/files/926/373/306/link-chain-url-web-permalink-web-address-icon.png"
    };
    const n = new Notification("title", options);
    await new Promise(resolve => {
      setTimeout(() => {
        n.close();
        resolve();
      }, 5000);
    });
  } catch (error) {
    console.log(error);
  }
})();

В примере выше мы вызвали close внутри обратного вызова метода setTimeout. Уведомление закроется автоматически через 5 секунд.

Обработчики событий

У объектов Notification также есть собственные обработчики событий: onclick, onclose, onerror и onshow. Им можно назначать собственные функции.

onclick

Мы можем назначить обработчик событий свойству onclick, если хотим сделать что-то при нажатии на уведомление. Например:

(async () => {
  try {
    const permission = await Notification.requestPermission();
    console.log(permission);
    const options = {
      body: "body",
      icon:
        "https://www.iconninja.com/files/926/373/306/link-chain-url-web-permalink-web-address-icon.png"
    };
    const n = new Notification("title", options);
    n.onclick = () => {
      alert("Notification clicked");
    };
  } catch (error) {
    console.log(error);
  }
})();

При нажатии на уведомление во вкладке браузера будет показано предупреждение. Этот обработчик событий принимает один параметр — объект события.

Поведение по умолчанию заключается в перемещении фокуса в область просмотра контекста, связанного с уведомлением. Чтобы предотвратить это, вызовем preventDefault() в передаваемом параметре event:

(async () => {
  try {
    const permission = await Notification.requestPermission();
    console.log(permission);
    const options = {
      body: "body",
      icon:
        "https://www.iconninja.com/files/926/373/306/link-chain-url-web-permalink-web-address-icon.png"
    };
    const n = new Notification("title", options);
    n.onclick = event => {
      event.preventDefault();
      alert("Notification clicked");
    };
  } catch (error) {
    console.log(error);
  }
})();

Назначив функцию обработчика событий свойству onclose, можно заставить уведомление делать что-то, когда оно закрыто.

То же самое можно сделать для свойства onerror для обработки ошибок и для свойства onshow для обработки события show, которое выполняется при отображении уведомления.

Вывод

Notification API — действительно простой способ отображения нативных уведомлений веб-приложений. Разрешение на отображение уведомлений запрашивается статичным методом Notification.requestPermission. Как только промис разрешается, если пользователь принимает отображение уведомлений, мы просто создаем объект Notification с необходимыми настройками. Готово, уведомления будут отображаться.

Перевод статьи John Au-Yeung: Use the JavaScript Notification API to Display Native Popups

Поделиться статьей:

Вернуться к статьям