Уведомление в браузере php
Уведомления в браузере ( типа вк или другое)
3 ответа 3
Есть два типа пуш уведомлений: на одном вебсокеты точеные, с другим проблем тоже хватает.
Для реализации первого типа вам по сути нужна любая обычная система мессаджей от вашего сервера вашему клиенту. Это могут быть хоть вебсокеты, может быть лонг поллинг, может быть sse. Да хоть сигнальные костры на гуглмапс =)
Алексей Шиманский в своем комментарии подразумевал именно этот тип сообщений.
Со вторым типом все сложнее. И реализовать их «просто прикрутив какую-то библиотеку или плагин на js» нельзя. Потому что нету этого вашего клиентского js когда вкладка закрыта. Ну собственно почему у клиента должен выполняться ваш скрипт если он не у вас на сайте?
Сделать это можно, но на пути нас поджидают неприятности.
Начнем с того, что есть спецификация Notifications api. Но разумеется она еще совсем не готова, браузеры ее нормально не поддерживают (что поддерживать то, что десять раз еще поменяется). Использовать в кровавом энтерпрайзе нельзя точно. Если у вас много энтузиазма и смузи, можете попробовать прикрутить для каких-то браузеров.
Это разумеется порождает следующую проблему: для того чтобы у вас все было чудесно кроссбраузерно и розовые единороги прыгали по зеленой лужайке, вам нужно найти как можно больше таких сервисов и для каждого написать прослойку на своей стороне, которая будет этот сервис дергать. А универсального формата нету. А сервисов не так уж и мало. И каждый что-то да меняет иногда, и придется поддерживать как-то этот зоопарк.
Соответственно появились прослойки разной степени надежности, функциональности и платности. Упомянутые пользователем mics onesignal.com и clevertap.com относятся к таким прослойкам.
А теперь к плохому. Готовое работающее исключительно бесплатное решение я не нашел (искал где-то полдня, если кто-то подскажет, буду благодарен.). Есть решения платные, есть сервисы предоставляющие бесплатную триалку и есть «бесплатные».
Браузерные Push-уведомления на Javascript и PHP
Предисловие
В попытке найти годную статью по настройке уведомлений в браузере, я получал только статьи где в основном описывалось использование совместно с Firebase, но мне такой вариант не особенно то и подходил.
В данной статье не будут «размусолены» принципы работы и тонкости Push уведомлений, только код, только хардкор.
Push-уведомления работают только с HTTPS.
К слову, в добавок с HTTPS должен присутствовать валидный SSL сертификат, подойдет и Let’s Encrypt
Для разработки подойдёт localhost. Проблем возникнуть не должно, но если все же возникли данная статья поможет разобраться с ними.
Да будет код
Авторизация (VAPID)
Для начала стоит установить библиотеку WebPush в ваш php проект:
Далее для авторизации вашего сервера браузером (VAPID), вам нужно сгенерировать публичный и приватный ssh ключи. Данные ключи понадобятся как на сервере, так и на клиенте (за исключением того что на клиенте нужен лишь публичный).
Чтобы сгенерировать несжатый публичный и приватный ключ, закодированный в Base64, введите следующее в свой Linux bash:
Так же автор библиотеки предоставляет генерацию vapid ключей с помощью встроенного метода:
Подписка
Этап 1 (JS)
В начале стоит проверить наличие поддержки ServiceWorker, PushManager, а так же showNotification в браузере:
Создаем файл sw.js и далее регистрируем его:
Так же нам понадобится функция для проверки состояния подписки:
С сервера нам нужно получить публичный ssh ключ сгенерированный выше:
Далее на ваше усмотрение, вешаем вызов окна на разрешение получение уведомлений. В моем примере человек через 10 секунд получает предложение подписаться.
Далее если процесс получения разрешения подписки прошел успешно вызываем функцию successSubscriptionHandler
Формируем данные пользователя для дальнейшей отправки уведомлений.
Так же нам нужно сформировать отправляемое уведомление
Вы можете манипулировать данными уведомления при помощи Post Message API
Этап 2 (PHP)
Далее в файле subscribeUserToPushNotifications на который мы сделали запрос с фронта при получении разрешения на подписку, мы формируем данные пользователя
На данном этапе мы можем записать данные пользователя в Базу данных (Ну или что у вас там), для последующей отправки уведомлений.
Непосредственно сама отправка происходит следующим образом
Достаем юзера с места его сохранения, и далее создаем объект подписчика:
Далее формируем VAPID для авторизации:
После того как сформировали нужные данные, создаем новый объект WebPush:
Ура! Наконец мы можем отправить запрос на отправку Push уведомления
Для отправки уведомлений в итерации, стоит использовать функцию, с теми же параметрами, что и в функции выше:
Полезные источники
О WebPush от хабровчанина
Пример использования от разработчика библиотеки
Реализуем пуш-уведомления на фронтенде и бэкенде
В предыдущей статье об iss-observer.com я обещал рассказать о технической стороне реализации пуш-уведомлений. Изначально я планировал сконцентрироваться на проблемах, с которыми пришлось иметь дело в процессе работы над iss-observer.com. Теперь я думаю, будет полезнее посвятить материал базовым вопросам, и уточнять детали, где это необходимо. Обращаю ваше внимание, что фронтенд частично опирается на этот урок.
Фронтенд
Начнем с клиентской части. Первое, что нужно сделать — убедиться, что браузер поддерживает пуш-уведомления. Если да, загружаем наш JavaScript.
Посмотрим на push.js. Здесь мы регистрируем сервис-воркер и подписываемся на уведомления:
В первую очередь создаем константу addServiceKey : ей присваиваем значение с открытым ключ VAPID (о нем мы говорили выше). Также создаем несколько элементов и переменных. Записываем функцию urlB64ToUint8Array() : она понадобится для конвертации ключа из base64 в Uint8Array.
Метод subscribe() возвращает промис, а в качестве аргумента принимает объект с двумя свойствами:
Теперь отправляем данные подписки на сервер. Смело используем Fetch API, так как все браузеры, которые поддерживают пуш-уведомления, поддерживают и Fetch. После получения ответа выводим результат — завершена ли подписка успешно.
Этот этап прекрасно подходит для уточнения нужных параметров у пользователя. Например, на iss-observer.com он может выбрать время получения уведомлений (утро и/или вечер). Я также отправляю на сервер данные о стране, регионе и городе, по которому пользователь хочет получать уведомления; данные сохраняются и могут потребоваться при отправке уведомлений.
Последний шаг — регистрация сервис-воркера.
Сервис-воркер
Бэкенд
Переходим к серверной части, в которой мы используем web-push library. В нашем случае это реализация библиотеки для Node.js, но версии для PHP, Java и C# также доступны.
Я предполагаю, что у вас есть базовые знания Node.js и опыт использования Express. В ином случае, я рекомендую вам ознакомиться с ними прежде чем продолжить.
Итак, в первую очередь:
Теперь передаем данные VAPID. Помимо сгенерированной в начале пары ключей, нужно указать адрес электронной почты (с префиксом mailto: ) либо URL сайта. Контактные данные могут потребоваться сервису для связи с вами. Обратите внимание на комментарии: я предпочел сохранить ключи в переменную окружения. Вы можете поступить так же или выбрать свой метод, но главное помните, закрытый ключ должен быть всегда защищен от обращений извне. Собственно поэтому он так и назван.
Переходим к функции подписки:
Прим. переводчика: endpoint — это уникальный URI, создаваемый для каждого пользователя индивидуально в соответствии с паттерном : p256dh — открытый ключ, auth — закрытый ключ.
Затем получаем наше первое уведомление — то, которое приветствует подписавшегося пользователя. Метод sendNotification() принимает три аргумента:
TTL (Time To Live) — срок жизни уведомления —по умолчанию четыре недели. Это значит, что оно будет ожидать появления пользователя онлайн в течение этого срока. Например, если вы отправили уведомление пользователю в оффлайне, и он подключится к сети только через две недели, сообщение все равно будет доставлено. В моем случае разумно изменить TTL на более короткий срок.
Если пользователь отменяет подписку, удаляем информацию о ней из базы.
Дополнительно
Вероятно, каждый из вас столкнется со своим случаем применения пуш-уведомлений, и просто скопировать код не получится. Однако я надеюсь, что этот урок поможет вам реализовать искомую функциональность как на стороне клиента, так и на стороне сервера.
Демо проекта, исходный код опубликован на GitHub.
Для более глубокого погружения в тему рекомендую бесплатную книгу Web Push Book и примеры на servicewore.rs.
Если вам есть что спросить, или есть что добавить, пишите в Twitter или по электронной почте.
Push рассылки на PHP (Android и IOS). Минимальное готовое решение
О рассылке Push уведомлений уже много раз писали на Хабре, например тут и тут, но прямого руководства к действию до сих пор нет. Итак, если интересно, прошу под кат.
Регистрация токенов устройств
В первую очередь разработчик приложения творит магию, в которой указывает адрес регистрации, он может быть таким: htpp://test.ru/secret/android?token=value и htpp://test.ru/secret/ios?token=value.
Самое примечательное что защиты от левых регистраций просто нет, хотя может магия подвела либо была не совсем качественной, если все таки защита есть, отпишите в комментариях, я обязательно дополню статью полезным советом.
На входе получаем значение токена который приходит при установке приложения, могут быть небольшие задержки, но буквально 10-20 секунд. Токены уникальны, но можно сделать и проверку на уникальность при записи в базу данных.
Пример токена для android:
На этом шаге с регистрацией устройств мы закончили.
Рассылка уведомлений
Apple использует сервис APNS, а Google GCM (C2DM считается устаревшим, учитывайте это) и после прочтения документации можно перейти к любимому делу, а именно к велосипедостроению, но бюджет был ограничен и я начал поиски готовых решений. Самое годное что встретилось это ApnsPHP и GCMMessage, работают как на 5.3+ так и на 5.4+.
При использовании библиотек самое главное получить правильные сертификаты и секретную фразу в случае с APNS и секретный токен для работы с GCM.
Пример готового кода для отправки уведомлений для GCM, токены советуют отправлять пачкой, работает даже при больших количествах довольно таки быстро, сервис возвращает недействительные токены (пользователи удалили приложение), их сразу стоит удалить.
Везде пишут что APNS весьма прост в использовании, в принципе это соответствует действительности, если учитывать что есть сертификаты для теста и продакшена, стоит обратить внимание, нужен сертификат, секретная фраза и корневой сертификат, все это получается в личном кабинете разработчика.
Пользователи имеют свойство удалять особо назойливые приложения, так что перед отправкой стоит удалить мертвые токены.
Затем сама отсылка:
Если Вы не напутали с сертификатами, то рассылка пройдет успешно.
Уведомления в браузере и пример того, как их можно использовать с пользой
Вероятно, вы все уже слышали про технологию «Веб-push» в составе Push API и Notifications API. Я уверен, что среди вас есть те, кто возлагает надежды на эту технологию, как на новый канал коммуникации с пользователем. И я не исключаю возможность, что данную статью будут читать основатели тех немногочисленных стартапов, которые всерьёз занялись окучиванием технологии «Веб-push» для рекламы и маркетинга. Сегодня я вам расскажу, о том как можно использовать данную технологию.
Современные веб стандарты подарили нам возможность посылать пользователю уведомления. Это такие всплывающие сообщения в правом нижнем углу экрана, хотя местоположение зависит от используемого браузера, а повлиять на расположение сообщения разработчик напрямую не может. И вот эти сообщения всплывают значит и показывают какую-то информацию. Информацию заведомо нужную пользователю, так как нельзя распространить эти уведомления на аудиторию, которая на них не подписана. И всё вроде бы логично, но пользователи упорно жмут кнопку «Отказаться», когда им предлагают подписаться на получение таких уведомлений. Попробуем разобраться почему так происходит.
Технология «веб-push» буксует на одном месте и это очевидно. Помимо раздражающего фактора наличия самого уведомления, которое стремительным, ослепительно белым аэропланом врывается на поверхность рабочего стола, есть ещё одна причина. Это использование технологии не по назначению. Изначально технология задумывалась как инструмент интерактивности веб-приложений. Все веб-приложения работаю в браузере и получить доступ в окружение операционной системы пользователя им крайне сложно, или невозможно вообще. Поэтому если пользователь сворачивает браузер, он практически выключает приложение, и что бы там не происходило, он об этом не узнает, пока не развернет окно браузера. Технология уведомлений позволяет обратить внимание пользователя на приложение даже когда браузер свернут. Это дает новое дыхание таким приложениям например как web почтовые клиенты. Но некоторым людям захотелось использовать этот канал связи для интернет-маркетинга и рекламы. Предполагается, что пользователи добровольно будут подписываться на такого рода рассылки.
Но так или иначе технология существует и её надо осваивать. Настал тот момент, когда я решил встроить уведомления на сайт. Как оказалось, технология (Web Push API и Notification API) достаточно простая и естественно появилось желание поэкспериментировать. В процессе ознакомления я определил проблемы и неудобства, которые неприемлемы для лично меня:
Собственно, для начала было сделано расширение для браузера, которое умеет бегать на сервер и спрашивать есть ли для него сообщения (ссылка на код расширения в конце статьи). Если сообщения есть, то в зависимости от настроек пользователя, появляются уведомления на рабочем столе. Так же пользователь может получить доступ к списку активных уведомлений в любое время нажав на иконку расширения в браузере. Есть опция «Не беспокоить», которая позволяет отключать уведомления, но оставляет возможность пользователю получить доступ к пришедшим уведомлениям через кнопку расширения. Так же вне зависимости от настроек на кнопке расширения присутствует индикация наличия непрочитанных сообщений.
Установка расширения выполнена в inline стиле, благодаря чему подписка на уведомления сводится к двум кликам мышкой. Необходимо разместить кнопку, при нажатии на которую пользователю будет предложено установить расширение. Данную кнопку можно разместить в любом месте сайта. Также кнопку подписки можно прятать если расширение уже установлено. Вот пример посадочной страницы подписки на уведомления, который я сделал для приложения Пример посадочной страницы подписки
Расширение можно удалить стандартным способом, т.е. так же, как и любое другое расширение для браузера, но для удобства, дополнительно добавлена кнопка для удаления. На случай самоликвидации отправителя, существует способ удаленно деинсталлировать расширение со всех устройств пользователей, послав в заголовке сообщения секретную команду, где вы ещё такое найдёте :).
Что касается серверной части, то тут мы имеем небольшую админку написанную на PHP для внесения уведомлений в БД и шлюз для приема запросов от пользователей и соответственно выдачу уведомлений из БД. Этот же шлюз используется для сбора статистики и пишет всё в ту же БД.
Вот пример того как сервер отдает JSON для уведомлений (установлен лимит в 3 сообщения).
А вот так формирую JSON для отображения в расширении. Тут отдаём HTML снипет:
Формируем HTML снипет extention_m.php:
Осталось рассказать про статистику. Я много делать не стал. В свою базу добавляю по минимуму. С остальным хорошо справляется Google Analytics. Просто при публикации расширения я указал Google Analytics ID и могу получать всю информацию о просмотрах и переходах по ссылкам, которые содержатся в уведомлениях.
Вот таким способом мне удалось оптимизировать технологию веб-push уведомлений и сделать её более удобной (по крайней мере для себя). Учитывая широкие возможности браузерных расширений, в данное приложение можно добавить более богатый функционал.
В завершение, как доказательство возможности применения Notification API в реальных задачах, хочу сказать, что мной написано два действительно важных приложения, одно из которых может оповещать о температуре в серверной, а второе присылает уведомления, если на маршрутизатор ядра логинится кто-то из админов.