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

Предпосылки

Прежде чем мы начнем

Есть только одна проблема с push-уведомлением, оно не работает с IE. Все остальные основные браузеры, такие как Chrome, Firefox, Edge, Opera и Safari, совместимы и должны работать должным образом. Не все функции доступны в мобильных браузерах, поэтому я бы сказал, что это полезно только для настольных push-уведомлений.

Чтобы понять, как работает Notification API, перейдите к документации Notification API.

Далее в руководстве я объясню, почему требуется Visual Studio Code Extension Live Server.

С этим не по пути.

Приступаем к кодированию

HTML

Это будет простой HTML-код, так как основное внимание в этом руководстве уделяется push-уведомлениям.

Приведенный выше HTML не требует пояснений.

JavaScript

Мы собираемся добавить приведенный ниже JavaScript в раздел заголовка HTML.

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

document.addEventListener("DOMContentLoaded"...) в основном говорит вашему браузеру прослушивать событие, когда вся DOM загружена. Это чем-то похоже на $(document).ready(function(){..... в Jquery, подробнее по этой ссылке. Есть 3 возможных результата проверки разрешений, и они

  • denied— Пользователь отказывается от отображения уведомлений
  • granted — пользователь соглашается с отображением уведомлений.
  • default — Выбор пользователя неизвестен, поэтому браузер будет действовать так, как если бы значение было отклонено.

Вышеизложенное взято из Руководства разработчика Mozilla по Notification API.

В приведенном выше случае, когда разрешение отличается от granted, API запросит разрешение, вызывая, таким образом, функцию Notification.requestPermission(), и это вызовет предупреждение о разрешении.

Ниже приведен пример уведомления из браузера Chrome.

Вторая часть скрипта — это само уведомление. Как я упоминал ранее, IE не поддерживает push-уведомления, поэтому мы должны сообщить об этом нашим пользователям. Это то, что пытаются сделать строки с 6 по 11 выше. Когда Notification API недоступен, мы просто предупреждаем пользователя. Alert может быть не лучшим способом, когда дело доходит до реальной реализации, и это просто пример для образовательных целей.

Строка 13 существует на всякий случай, если по какой-либо причине прослушиватель событий не сработал, и когда мы попытаемся отправить уведомление, он убедится и проверит, разрешено ли уведомление.

Когда уведомление разрешено, мы можем настроить само уведомление, которое находится в строках с 15 по 18. Синтаксис для создания и отправки уведомления так же прост, как new Notification(title, options) . Здесь мы даем название нашему уведомлению Новое сообщение. Доступно несколько вариантов, вы можете перейти по этой ссылке для получения подробной информации о каждом варианте. В этом примере мы просто предоставляем значок и текст уведомления.

Notification API поддерживает 4 обработчика событий onclick , onclose , onerror и onshow . В этом примере в строке 20 мы хотели вызвать некоторую функцию, когда пользователь нажимает на уведомление, и API сосредоточится на браузере и вкладке, которая запускает уведомление, а затем закроет уведомление.

Существует много творческих способов, которыми вы можете решить поступить со своим веб-сайтом во время каждого события уведомления, например, вы можете вызвать перезагрузку страницы, когда пользователь щелкает ее или переходит на другую страницу. У вас будет доступ к объекту window для выполнения различных операций.

Тело

В этом примере мы добавим кнопку для запуска уведомления. Добавьте <button onclick="notifyMe()">Notify me!</button> к телу. При нажатии кнопки будет выполнена функция notifyMe().

Окончательный HTML

Окончательный HTML будет выглядеть так, как показано ниже.

Время проверить это

Убедитесь, что вы сохранили HTML-файл, и давайте просмотрим HTML-файл, который мы создали.

На компьютере с Windows или Mac Chrome вас встретит предупреждение о разрешении, как показано ниже, и когда вы нажмете «Разрешить» и нажмете «Уведомить меня!» кнопка. Он снова и снова будет предлагать одно и то же окно. Что здесь не так?

В Safari на компьютере Mac ничего не происходит. Поле разрешения не отображается, и при нажатии на кнопку ничего не происходит. Что здесь не так?

Вы поняли это? Ответ: push-уведомление не работает с файлом. Он должен быть размещен или сайт или локальный хост по крайней мере. Вот где пригодится расширение Visual Studio Live Server. Конечно, существует множество способов локального размещения файла, таких как xampp или Inetpub для пользователей Windows. Для простоты мы просто выберем расширение Live Server.

Давайте сначала создадим папку и переместим в нее наш HTML-файл. Запустите Visual Studio Code и откройте папку, содержащую файл HTML. После загрузки щелкните правой кнопкой мыши файл в окне «Проводник» и выберите «Открыть с помощью Live Server». Ваш браузер по умолчанию должен открыться с локальным хостом и портом, и ваш сайт будет доступен.

На этот раз вы можете нажать «Разрешить» в поле разрешений и нажать кнопку «Уведомить меня». Поздравляем!, ваше первое push-уведомление. Пример уведомления показан ниже.

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

Следующий шаг — проявить творческий подход и внедрить push-уведомления, когда это необходимо для вашего веб-сайта. Удачи!