Как сделать уведомление
Добавил пользователь Валентин П. Обновлено: 05.10.2024
Наверняка все, кто пользовался почтой от Google, хоть раз видели уведомления вроде этого:
Уведомления почты gmail
Эти уведомления называются HTML5 Notifications, и они видны, даже если перейти в другую вкладку или вообще свернуть браузер.
После прочтения этой статьи вы сможете сделать такие же уведомления и для своего сайта. Код простой, кроссплатформенный, и непосредственно отправка уведомления занимает всего 1 строку на любимом JavaScript.
Также в конце статьи есть готовая функция, с помощью которой можно начать отправлять уведомления, не вникая в подробности.
Перед тем, как непосредственно отправлять уведомления, нам нужно получить права (permission) на это.
Сделать это можно методом Notification.requestPermission() :
После выполнения метода, результат запроса на права будет лежать в переменной permission .
Вот её разные значения с пояснениями:
- default — запрос на получение прав не отправлялся;
- granted — пользователь разрешил показывать уведомления;
- denied — пользователь запретил показывать уведомления.
Получив права, можем приступать непосредственно к отправке уведомлений.
Делается это очень просто, одной строкой:
title — заголовок уведомления,
options (опционально) имеет следующие параметры:
- body — тело уведомления (основной текст), в разных браузерах и ОС обрезается по-разному (например, в Chrome под Win 8.1 максимальная длинна — 200 символов);
- dir — направление отображения уведомления, может быть auto, ltr (слева направо) или rtl (справа налево);
- lang — язык уведомления;
- tag — уникальный идентификатор уведомления, с помощь которого можно заменить его другим уведомлением или удалить;
- icon — URL изображения, которое будет показано в уведомлении (рекомендуем разрешение 40×40 px).
Результат выполнения кода выше
Также у notification есть методы-обработчики событий onclick , onshow , onerror , onclose :
Одна функция для всего
Теперь соберем всё в единую функцию и добавим несколько проверок на ошибки:
Теперь у нас есть красивая функция, с помощью которой можно просто отправлять уведомления, не отвлекаясь на запрос прав или поддержку браузера:
Он написан на чистом JavaScript без использования сторонних библиотек.
Подключение и использование
Подключение компонента осуществляется посредством:
Подробное описание
С помощью классов в CSS добавляются стили к этим элементам:
Задание темы осуществляется посредством добавления класса.
Например, тема primary устанавливается так:
Помещение элементов .toast выполняется в контейнер .toast-container . Его создание тоже осуществляется с помощью JavaScript, но только в том случае, если его нет на странице.
Данный элемент по умолчанию располагается в правом верхнем углу страницы и имеет ширину 270 пикселей. Если нужно расположить в другом месте, то измените стили.
С 2015 года начала стремительно набирать популярность технология Push API от Chrome. Все чаще, заходя на различные новостные (и не только новостные) сайты, посетителям вылетает вот такой системный фрейм с запросом:
Я искренне считаю этот канал доставки контента (или привлечения пользователей, называйте как хотите) одним из самых перспективных. Возможно даже, через пару лет эти пуши будут таким же обязательным атрибутом каждого уважающего себя новостного сайта, коими сегодня являются RSS и паблики в социальных сетях.
Однако сегодня эта техноло г ия еще довольно молода и руководств по её использованию мало не только в отечественном интернете, но и в зарубежном. Для примера далеко ходить не надо — даже сам “Google”, когда анонсировал Push API, выпустил до слёз скудный пресс-релиз. И только сейчас, несколько часов покопавшись в гугловских FAQ для разработчиков, можно собрать информацию, чтобы собрать худо-бедно работающие скрипты для отправки Push-уведомлений своим читателям.
Как же сделать такие Push-уведомления для своего сайта? Тут есть два пути: использовать сторонние сервисы (они уже есть и некоторые из них очень даже неплохи) или создать собственное решение. Поскольку я сторонник минимального использования сторонних сервисов на сайте, то наш путь в Городе был предрешен.
Но, ради справедливости, стоит замолвить пару словечек и о внешних решениях. Признаюсь, я не очень изучал этот рынок (причина названа чуть выше), однако нельзя не упомянуть сервис OneSignal, самая привлекательная черта которого в том, что их услуги абсолютно бесплатны — зарабатывают они на продаже данных о посетителях клиентского сайта. Так же есть сервис Jeapie, на их стороне очень грамотный маркетинг и, как правило, хорошие отзывы. Однако стоит отметить, что в свое время от их услуг отказалась Медуза — Платформа была попросту не готова к тому количеству пушей, которые приходилось отправлять для огромной аудитории Медузы.
Реализация. Получение учетных данных от Google.
В исходных данных сайт, написанный на Rails 3.2.8 и задача сделать на нём пушер уведомлений для Chrome.
Далее идем в Google Сloud Platform, где регистрируем новый проект, назвав его, например, MySite-Push.
Через несколько секунд, когда проект будет создан, через раздел Подключение к API Google, по ссылке Включить и настроить API переходим в раздел, где целый список методов API для всех сервисов Google. Там мы должны включить метод Google Cloud Messaging из раздела Mobile API.
Скорее всего, при подключении к методу, Google попросит зарегистрировать дополнительные данные. Например, попросит уточнить откуда будет вызываться API, тогда мы указываем необходимый нам тип обработчика (например, Веб-сервер).
После чего указываем IP сервера (если спросит) и генерируем закрытый ключ, по которому будет происходить авторизация запросов. Этот ключ, разумеется, нам в будущем понадобится.
После нажатия кнопки Готово мы окажемся на странице, где нужно будет указать домен и подтвердить на него права через инструменты Search Console. Об этом тоже довольно много статей в интернете, да и сама процедура интуитивно понятна. Так что не будем здесь останавливаться.
Далее возвращаемся на главную страницу нашего проекта MySite-Push и запоминаем индикатор нашего проекта. Он нам тоже пригодится.
По сути, нам больше от Coogle Cloud Platform ничего и не надо. Ключ и идентификатор.
Реализация. Первичная настройка сайта.
Теперь в корневую папку нашего сайта нам нужно добавить файл manifest.json, в котором будет указано следующее:
Это самый необходимый минимум информации для манифеста. Можно погуглить и узнать, какие дополнительные параметры там можно указывать.
Ну и добавить в секцию мета-тег со ссылкой на манифест:
Теперь там же, в корневой папке, создаем файл push.js, куда вписываем вот такой код:
Теперь создадим Service Worker. Это будет файл sw.js в корневой папке:
Можно скрипт чуть передать, чтобы и иконка была динамичным параметром, но, как мне кажется, это будет абсолютно лишним, лучше уведомления брендировать, чем снабжать изображением, которое толком и не рассмотришь в небольшом пуше.
Ну и, наконец, создаем latest.json, из которого и будет браться информация для уведомлений. Думаю, не трудно догадаться, что лежать он будет в корневой папке. А вот и его содержимое:
Полагаю, объяснять что есть что в этом json’е нет смысла, всё и так понятно.
Скрыть уведомление
Наведите указатель мыши на уведомление — справа от него появится значок . Нажмите значок. Уведомление будет скрыто.
Настроить уведомления
Откройте и отметьте категории уведомлений, которые хотите получать. Внизу страницы нажмите Сохранить .
Чтобы вернуться к настройкам по умолчанию, нажмите Сбросить настройки .
Совет. Настройки уведомлений хранятся в , если вы вошли в аккаунт. Если не вошли — настройки будут храниться в cookie и пропадут при очистке cookie или переустановке браузера. Кроме того, если настройки хранятся в Яндекс ID, то на любом своем устройстве вы будете видеть привычный интерфейс главной страницы.
Отключить показ уведомлений
Откройте и отключите категории уведомлений, которые вам не интересны. Внизу страницы нажмите Сохранить .
Чтобы вернуться к настройкам по умолчанию, нажмите Сбросить настройки .
Скрыть уведомление
Наведите указатель мыши на уведомление — справа от него появится значок . Нажмите значок. Уведомление будет скрыто.
Настроить уведомления
Откройте и отметьте категории уведомлений, которые хотите получать. Внизу страницы нажмите Сохранить .
Чтобы вернуться к настройкам по умолчанию, нажмите Сбросить настройки .
Совет. Настройки уведомлений хранятся в , если вы вошли в аккаунт. Если не вошли — настройки будут храниться в cookie и пропадут при очистке cookie или переустановке браузера. Кроме того, если настройки хранятся в Яндекс ID, то на любом своем устройстве вы будете видеть привычный интерфейс главной страницы.
Отключить показ уведомлений
Откройте и отключите категории уведомлений, которые вам не интересны. Внизу страницы нажмите Сохранить .
Читайте также: