Руководство по API уведомлений

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

Введение в API уведомлений

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

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

В сочетании сPush APIэта технология может быть успешным способом повысить вовлеченность пользователей и расширить возможности вашего приложения.

API уведомлений активно взаимодействует сСервисные работники, поскольку они необходимы для push-уведомлений. Тыможетиспользовать API уведомлений без Push, но варианты его использования ограничены.

if (window.Notification && Notification.permission !== "denied") {
	Notification.requestPermission((status) => {
    // status is "granted", if accepted by user
		var n = new Notification('Title', {
			body: 'I am the body text!',
			icon: '/path/to/icon.png' // optional
		})
	})
}
n.close()

Разрешения

Чтобы показать уведомление пользователю, у вас должно быть разрешение на это.

ВNotification.requestPermission()вызов метода запрашивает это разрешение.

Вы можете позвонить

Notification.requestPermission()

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

Чтобы что-то делать, когда пользователь взаимодействует (разрешает или запрещает), вы можете прикрепить к нему функцию обработки:

const process = (permission) => {
  if (permission === "granted") {
    // ok we can show the permission
  }
}

Notification.requestPermission((permission) => { process(permission) }).then((permission) => { process(permission) })

Посмотрите, как мы передаем обратный вызов, а также ожидаемобещать. Это связано с разными реализациямиNotification.requestPermission()сделанные в прошлом, которые мы теперь должны поддерживать, поскольку заранее не знаем, какая версия запущена в браузере. Поэтому, чтобы хранить все в одном месте, я извлек обработку разрешений вprocess()функция.

В обоих случаях этой функции передаетсяpermissionстрока, которая может иметь одно из следующих значений:

  • granted: пользователь принял, мыможетпоказать разрешение
  • denied: пользователь отказал, мыне могупоказать любое разрешение

Эти значения также можно получить, проверивNotification.permissionсвойство, которое - если пользователь уже предоставил разрешения - оценивается какgrantedили жеdenied, но если вы не звонилиNotification.requestPermission()тем не менее, он разрешитdefault.

Создать уведомление

ВNotificationобъект, выставленныйwindowобъект в браузере позволяет создавать уведомление и настраивать его внешний вид.

Вот простейший пример, который работает после того, как вы запросили разрешения:

Notification.requestPermission()
new Notification('Hey')

Create a notification

У вас есть несколько вариантов настройки уведомления.

Добавить тело

Во-первых, вы можете добавить тело, которое обычно отображается в виде одной строки:

new Notification('Hey', {
  body: 'You should see this!'
})

Add a body to the notification

Добавить изображение

Вы можете добавить свойство значка:

new Notification('Hey', {
  body: 'You should see this!',
  icon: '/user/themes/writesoftware/favicon.ico'
})

Add an image to the notification

Дополнительные параметры настройки со свойствами, зависящими от платформы, можно найти по адресуhttps://developer.mozilla.org/docs/Web/API/Notification

Закрыть уведомление

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

Для этого создайте ссылку на открываемое уведомление:

const n = new Notification('Hey')

а затем вы можете закрыть его позже, используя:

n.close()

или с таймаутом:

setTimeout(n.close(), 1 * 1000)

Скачать мою бесплатнуюРуководство для начинающих по JavaScript


Больше руководств по браузеру: