Отображение нативных всплывающих окон с помощью 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 с необходимыми настройками. Готово, уведомления будут отображаться.