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