Push.js

При разработке полноценного веб-приложения бывает необходимо реализовать отправку push-уведомлений прямо на рабочий стол пользователя. Например, в веб-версии WhatsApp и многих других мессенджерах. Самостоятельно с нуля разработать такую функцию очень сложно, даже готовых решений в этом направлении не очень много. Библиотека pushjs позволит вам максимально просто реализовать такую функцию.

Из этого урока вы узнаете:

• Как подключить библиотеку Pushjs?
• Создание простого уведомления
• Другие опции и настройки для уведомлений

1) Как подключить библиотеку Pushjs?

Подключить библиотеку можно двумя способами — либо напрямую, скачав нужные файлы из репозитория на GitHub, либо же через NPM.

Для установки напрямую необходимо зайти в репозиторий библиотеки на GitHub и скачать оттуда 2 файла — ServiceWorker.js и Push.js из папки bin. Первый файл — это сценарий, запускаемый браузером в фоновом режиме. Этот файл необходим для работы push уведомлений на рабочем столе. Второй файл — это сама библиотека.

Необходимые файлы библиотеки можно посмотреть и скачать по ссылке ниже: https://github.com/Nickersoft/push.js/tree/master/bin. В этой папке есть файлы с расширением .min.js. Это минифицированные версии для увеличения производительности сайта, их можно использовать вместо обычных.

После скачивания необходимых файлов, нужно ещё создать файлы styles.css и script.js. В первом файле будут прописаны стили сайта, во втором — логика появления push уведомления и его контент. Теперь ваша директория с проектом будет выглядеть следующим образом:

Теперь библиотека Pushjs подключена в проект и можно заняться созданием уведомлений.

2) Создание простого уведомления

Создание уведомлений в библиотеке Pushjs реализовано максимально просто. Вам нужно всего лишь заполнить необходимые поля. Напишем в файле index.html вот такой код:

Здесь на данный момент мы всего лишь подключили библиотеку push.js в конце тега body. Выглядит это пока так:

Необходимо добавить немного стилей в файл styles.css.

Теперь наш HTML-шаблон выглядит немного приятнее:

Осталось разобраться с логикой создания push уведомлений. Тут всё очень просто. Напишем такой код в файл script.js:

Здесь мы делаем следующее:

• Создаем функцию start. В ней содержится весь код для создания уведомления.
• В функции start мы вызываем метод create у объекта Push. Первым параметром мы передаем заголовок уведомления. Второй параметр — это массив в котором содержится ещё несколько свойств для уведомления.
• Свойство body отвечает за текст в теле уведомления. Свойство icon отвечает за картинку в уведомлении. timeout — это время жизни уведомления.
• В последнюю очередь мы обрабатывает клик по кнопке. Если клик произошёл, вызываем функцию, которая отображает push уведомление.

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

Теперь мы получили работающее push уведомление на рабочий стол с вашего сайта за 5 минут.

3) Другие опции и настройки для уведомлений

Эта библиотека не заканчивается рассмотренными выше функциями. Из интересных возможностей можно привести опцию vibrate. Это массив, который принимает длительность вибрации от уведомления на мобильных устройствах. Например, сначала вызывается вибрация на 200мс, а потом на 100мс. Также для Chrome версии 43 и выше доступна функция бесшумных уведомлений. Для этого нужно добавить опцию silent. Кроме того, можно устанавливать дату появления уведомления, обрабатывать закрытие уведомления или клик на него и многое другое.

Вы можете ознакомиться со всеми возможностями данной библиотеки на официальном сайте библиотеки pushjs. Ссылка: https://pushjs.org/. На сайте вы найдете небольшую и понятную документацию по остальным возможностям библиотеки.