Push уведомления в браузере

Доброго времени суток, дорогой читатель! Наверняка Вы видели уведомления, которые запускает браузер, в правом нижнем углу (расположение зависит от браузера). Даже если обозреватель свернут и даже если какой-то сайт не открыт у вас, браузер все ровно может уведомлять о новостях сайта. Чтобы такое сделать для Google Chrome (например) следует начать от сюда: https://console.developers.google.com/apis/library, и как сказано необходимо иметь сертификат «SSL». На данный момент сертификат имеют далеко не все сайты. В этой статье я расскажу, как сделать Push уведомления в браузере без сертификата, без подключения, каких-то примочек и прочего, единственное, что будет необходимо это написать небольшой сценарий (JS). Минус такого решения – уведомления не крутятся, когда сайт не открыт, зато уведомления видны при открытом сайте, даже если пользователь находится на другой вкладке и даже если браузер свернут.

Push уведомления поддерживаются только современными обозревателями, необходимо проверить будет ли работать Push в браузере пользователя, если нет то остановить выполнение сценария. Если браузер поддерживает, то «получаем добро» на показ каких-то событий в виде коротких сообщений. Если мы будем показывать уведомления без разрешения, это может вызвать негативные эмоции у ваших пользователей, и они попросту распрощаются с вашим сайтом. Получив разрешение, не стоит надоедать пользователю, то есть не крутите уведомления часто. При частых напоминаниях о себе, пользователь может отключить уведомления вообще, так что знайте меру.

Теперь собственно сам код, для понимания, что у чему оставил комментарии:

Функция есть, теперь расскажу на примере, как ей пользоваться, код так же полностью прокомментировал:

Вот собственно и все. Еще раз хочу сказать, что данный сценарий не выводит ровным счетом ни чего, когда сайт закрыт, только если есть вкладка с сайтом, не важно активна она, или свернут браузер.

Надеюсь, мой пост оказался полезным. Если у вас остались вопросы или есть, что добавить, пожалуйста, пишите комментарий.
Спасибо за внимание.

Добавить комментарий

Войти с помощью: 

Ваш e-mail не будет опубликован. Обязательные поля помечены *