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

Уведомления JavaScript — это способ отправки сообщений вашим пользователям в режиме реального времени. Вы можете использовать их, чтобы уведомлять об обновлениях вашего веб-сайта, новых сообщениях в чате, электронных письмах или любых действиях в социальных сетях. Вы также можете использовать уведомления для напоминаний календаря (например, о приближающейся встрече в Google Meet или Zoom).

Узнайте, как создавать уведомления о событиях в JavaScript и отправлять их на телефон или веб-браузер. Вы добьетесь этого, используя встроенный клиентский JavaScript — внешняя библиотека не требуется!

Запрос разрешения на отправку уведомлений

Для создания уведомления необходимо вызвать Уведомление класс для создания объекта. Он дает вам доступ к различным свойствам и методам, которые вы можете использовать для настройки уведомлений. Но перед созданием уведомления вам необходимо сначала запросить разрешение у пользователя.

instagram viewer

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

константа кнопка = документ.querySelector('кнопка')
 button.addEventListener("щелкнуть", ()=> {
 Notification.requestPermission().then(разрешение => {
 оповещение (разрешение)
 })
})

Когда вы нажмете на кнопку, вы можете получить предупреждение, которое говорит отклонен. Это означает, что браузер запретил JavaScript отправлять уведомления о событиях. Статус разрешения отклонен для случаев, когда пользователь явно запретил сайтам отправлять уведомления (через настройки браузера) или пользователь просматривает страницы в режиме инкогнито.

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

Отправка основных уведомлений

Вы создаете push-уведомление, создавая Уведомление объект с новым ключевым словом. Чтобы глубже погрузиться в объектно-ориентированное программирование, вы можете обратиться к нашему руководству по как создавать классы в JavaScript.

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

константа кнопка = документ.querySelector('кнопка')
button.addEventListener("щелкнуть", ()=> {
 Notification.requestPermission().then(пермь => {
если(пермь 'предоставленный') {
новый Уведомление("Пример уведомления")
 }
 })
})

Нажмите на кнопку, и вы получите push-уведомление в правом нижнем углу веб-браузера с указанным текстом.

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

Дополнительные свойства уведомлений

В дополнение к заголовку уведомления вы также можете передать аргумент параметров конструктору при создании объекта уведомления. Этот аргумент опций должен быть объектом. Здесь вы можете добавить несколько параметров для настройки уведомлений.

Свойство тела

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

константа кнопка = документ.querySelector('кнопка')
button.addEventListener("щелкнуть", ()=> {
 Notification.requestPermission().then(пермь => {
если(пермь 'предоставленный') {
новый Уведомление("Пример уведомления", {
 тело: "Это больше текста",
 })
 }
 })
})

Если вы запустите этот код, основной текст будет отображаться в push-уведомлении под Пример уведомления заголовок.

Атрибут данных

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

button.addEventListener("щелкнуть", ()=> {
 Notification.requestPermission().then(пермь => {
если(пермь 'предоставленный') {
константа уведомление = новый Уведомление("Пример уведомления", {
 тело: "Это больше текста",
 данные: {привет: "мир"}
 })

 предупреждение (notification.data.hello)
 }
 })
})

Вы можете получить доступ к данным из данные аналогично тому, как показано в приведенном выше блоке кода (внутри тревога()).

Вы также можете привязать прослушиватели событий к своим уведомлениям. Например, следующий прослушиватель событий выполняется всякий раз, когда вы закрываете push-уведомление. Функция обратного вызова просто регистрирует пользовательское сообщение.

константа уведомление = новый Уведомление("Пример уведомления", { 
 тело: "Это больше текста",
 данные: {привет: "мир"} 
})
уведомление. добавить прослушиватель событий ("закрывать", е => {
консоль.log (e.target.data.hello)
})

Это отличный способ передачи данных, если вам нужно что-то сделать, когда кто-то закрывает уведомление или нажимает на него. Отдельно от закрывать событие (которое выполняется, когда вы закрываете уведомление), вы должны сохранить эти прослушиватели событий в твоих мыслях:

  • показывать: выполняется при отображении уведомления.
  • нажмите: выполняется, когда пользователь щелкает в любом месте уведомления.
  • ошибка: выполняется, когда вы отказываете JavaScript в разрешении на отправку уведомлений.

Значок Свойство

икона Свойство предназначено для добавления значка в push-уведомление. Предполагая, что у вас есть значок логотипа с именем логотип.png в текущем каталоге, вы можете использовать его в своих уведомлениях следующим образом:

константа уведомление = новый Уведомление("Пример уведомления", { 
 икона: "логотип.png"
})

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

Когда вы сохраните файл, обновите браузер и нажмете кнопку, в уведомлении будет отображаться изображение слева от заголовка и основного текста.

Атрибут тега

Когда вы устанавливаете ярлык атрибут в вашем уведомлении, вы в основном даете уведомлению уникальный идентификатор. Два уведомления не могут существовать вместе, если они имеют один и тот же тег. Вместо этого самое новое уведомление перезапишет старое уведомление.

Рассмотрим наш предыдущий пример кнопки (без тега). Если вы нажмете кнопку три раза подряд, появятся три уведомления, и они будут накладываться друг на друга. Теперь предположим, что вы добавили в уведомление следующий тег:

константа уведомление = новый Уведомление("Пример уведомления", { 
 тело: "Это больше текста",
 ярлык: "Мой новый тег"
})

Если вы снова нажмете кнопку, появится только одно окно уведомления. Каждый последующий щелчок будет перезаписывать предыдущее уведомление, поэтому будет отображаться только одно уведомление, независимо от того, сколько раз вы нажимаете кнопку. Это полезно, если вы хотите добавить динамические данные (например, Math.random()) к телу:

константа уведомление = новый Уведомление("Пример уведомления", { 
 тело: Математика.случайный()
 икона: "логотип.png",
 ярлык: "Мой тег тела"
})

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

Пример push-уведомления с использованием JavaScript

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

позволять уведомление
документ.addEventListener("видимость-изменение", ()=> {
если(документ.visibilityState "скрытый") {
 уведомление = новый Уведомление("Вернись пожалуйста", {
 тело: "Не уходи пока :("
 ярлык: "Вернись"
 })
 } еще {
 уведомление.close()
 }
})

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

Узнайте больше о JavaScript

Уведомление о событии — это лишь одна из многочисленных функций, которые вы можете найти в JavaScript. Чтобы действительно хорошо работать с уведомлениями, вы должны сначала понять основные языковые функции и синтаксис JavaScript. Создание простых игр — это один из способов улучшить свои навыки и ознакомиться с основными понятиями языка.