78. Notifications API

JavaScript: Мозги. Урок: Notifications API

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

Что такое Notifications API?

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

Как это работает?

Чтобы использовать Notifications API, нужно выполнить несколько шагов:

1. Проверить разрешение: Убедиться, что у вашего сайта есть разрешение на отправку уведомлений.
2. Запросить разрешение (если нужно): Если разрешения нет, запросить его у пользователя.
3. Создать уведомление: Создать объект Notification с нужными параметрами (заголовок, текст, иконка и т.д.).

Вот пример кода:

// Проверяем, поддерживается ли Notifications API в браузере
if ("Notification" in window) {
  // Проверяем, есть ли у нас разрешение на отправку уведомлений
  if (Notification.permission === "granted") {
    // Если разрешение есть, создаем и показываем уведомление
    new Notification("Привет, мир!", {
      body: "Это ваше первое уведомление!",
      icon: "icon.png" // необязательно
    });
  } else if (Notification.permission !== "denied") {
    // Если разрешения нет (и пользователь еще не отказал), запрашиваем его
    Notification.requestPermission().then(function (permission) {
      // Если пользователь дал разрешение, создаем и показываем уведомление
      if (permission === "granted") {
        new Notification("Привет, мир!", {
          body: "Спасибо за разрешение!",
          icon: "icon.png" // необязательно
        });
      }
    });
  }
} else {
  alert("Ваш браузер не поддерживает Notifications API.");
}

Дополнительные параметры

У уведомлений можно задавать разные параметры, например:

• body: Текст уведомления.
• icon: URL иконки уведомления.
• data: Произвольные данные, которые можно использовать при обработке событий уведомления.
• tag: Уникальный идентификатор уведомления. Если придет уведомление с таким же tag, то старое уведомление будет заменено новым.
• actions: Массив кнопок, которые будут отображаться в уведомлении.

Пример с tag:

new Notification("Новое сообщение!", {
  body: "У вас новое сообщение от друга.",
  tag: "new-message"
});

Если после этого отправить еще одно уведомление с tag: "new-message", то старое уведомление будет заменено.

События уведомлений

У уведомлений есть несколько событий, на которые можно подписаться:

• onclick: Событие, которое срабатывает при клике на уведомление.
• onclose: Событие, которое срабатывает при закрытии уведомления.
• onerror: Событие, которое срабатывает при ошибке отображения уведомления.
• onshow: Событие, которое срабатывает при отображении уведомления.

Пример обработки события onclick:

let notification = new Notification("Напоминание!", {
  body: "Пора сделать перерыв!"
});

notification.onclick = function() {
  window.focus(); // Переключаемся на окно браузера, если оно свернуто
  // Дополнительная логика, например, открытие нужной вкладки
};

Жизненный пример

Notifications API широко используется в различных веб-приложениях:

• Социальные сети: Уведомления о новых сообщениях, упоминаниях, лайках.
• Email-клиенты: Уведомления о новых письмах.
• Приложения для управления задачами: Уведомления о приближающихся сроках выполнения задач.
• Новостные сайты: Уведомления о важных новостях.
• Фреймворки: Некоторые фреймворки, такие как Angular и React, предоставляют обертки над Notifications API для упрощения работы с ними.

Ключевые моменты

• Notifications API позволяет отправлять системные уведомления пользователю.
• Перед отправкой уведомлений необходимо запросить разрешение у пользователя.
• У уведомлений можно задавать различные параметры (заголовок, текст, иконка и т.д.).
• Можно подписываться на события уведомлений (например, onclick, onclose).
• Notifications API широко используется в различных веб-приложениях для информирования пользователя о важных событиях.

Интерактивный пример