Php push уведомления на телефон
Без Push-уведомления сейчас не может работать не один серьезный ресурс, да, мы знаем что на нашем сайте их пока нет, но мы обязательно в ближайшее время все прикрутим. Спасибо Танечке за подробную инструкцию.
Без валидного SSL сертификата запустить не получится. То есть сначала надо купить домен, на котором будет размещаться сайт, потом подключить к нему SSL сертификат (у многих хостеров эта услуга предоставляется бесплатно) и только потом надо начинать повторять наш гайд 🙂
Все файлы и папки, которые я упоминаю в гайде прикреплены в архивах к посту.
Файлы, которые нам понадобятся server.zip и land.zip
Создание проекта в Firebase
- Заходим на сайт;
- Регистрируемся;
- Жмём кнопку Create new project или Import Google project, если у вас уже есть проект;
- При создании указываем название проекта и страну;
- После создания проекта попадаем на его dashboard;
- В меню наводим на колесико рядом с Overview и выбираем Project settings;
2. На открывшейся странице переходим во вкладку Cloud Messaging;
3. Затем на вкладке Общие нажимаем Добавить Firebase в свое веб-приложение.
4. В открывшемся окне будет код для инициализации нашего веб-приложения. Нам понадобится не весь, только тот, который выделен на скриншоте.
Приступаем к настройке лендинга
Копируем содержимое папки land в корень сайта — то есть в ту папку, где у вас лежит index.html
1. Заменяем содержимое файла firebase/init.js кодом инициализации, полученным в ЛК firebase
2. В 3 строке файла firebase/firebase_subscribe.js добавляем ключ сертификата, полученный в ЛК.
3. Открываем файл send_subscribe.php и прописываем URL, по которому будет находиться наш скрипт, сохраняющий подписки.
4. Подключаем все скрипты к лендингу. Перед закрывающим тэгом body добавляем след. код:
Настройка сохранения подписок
В данном примере мы будем сохранять идентификаторы устройств подписавшихся пользователей в файл.
Для реального проекта желательно использовать базу данных для хранения подписок.
В этом примере скрипт для сохранения подписок будет находиться на том же сервере, где и лендинг, но если есть необходимость централизованного сбора подписок с разных сайтов, то можно разместить его на отдельном сервере, отведенном для обработки подписок.
Итак, для продолжения настройки необходимо скопировать содержимое папки server на хостинг, где будет располагаться система сохранения и обработки подписок. В данном случае просто скопируем в папку с лендингом.
В файле save_push.php находится скрипт, который сохраняет id устройств, подписавшихся пользователей в текстовый файл push.txt
В файле send_push.php представлен скрипт для отправки 1 push-уведомления.
Для его работы необходимо добавить ключ сервера, который нужно взять из ЛК firebase. (3 строка файла)
После того, как все настроено, необходимо совершить пробную подписку.Для этого надо просто зайти на свой сайт, куда был установлен скрипт и подписаться 🙂
После этого в файле push.txt должна появиться скрока вида
Это идентификатор устройства. Он необходим для отправки уведомлений.
Отправка уведомлений
Некоторые моменты
2. Скрипт работает корректно, но на некоторых устройствах и браузерах могут возникать неполадки. Например, на моем последнем Mac у меня не показываются пуши в хроме, хотя во всех остальных браузерах — работают. При этом не понятно в чем причина, в маке или в хроме, потому что на моем старом макбуке пуши показываются в хроме и во всех остальных браузерах.
Принцип работы скрипта достаточно прост. В нём имеются функции для регистрации (удаления) токенов устройств, ну и собственно сами функции рассылки. Большая часть мануалов? которые мне удалось найти были написаны либо неправильно, либо попросту были неполными.
Введение
Apple, iOS и ApnsPHP
Но одних библиотек нам мало. Самое сложное, это генерация и конвертирование сертификатов для работы с Push на iOS. Я опишу полный алгоритм экспорта и конвертации сертификатов, а затем их дальнейшее применение в скриптах.
Будем предполагать, что вы уже создали и настроили сертификаты в личном кабинете разработчика и загрузили их в «Связку ключей» на ваш Mac.
- Запускаем утилиту «Связка ключей» и в левой части выбираем раздел «Мои сертификаты».
- Раскрываем сертификат интересующего нас проекта. БУДЬТЕ ВНИМАТЕЛЬНЫ! Есть две версии сертификатов, Developer (используется при отладке и разработке) и Production (используется для рабочей версии). Выбираем сертификат и закрытый ключ данного сертификата.
- Нажимаем правой кнопкой и выбираем пункт «Экспортировать объектов: 2». Сохраняем полученные сертификаты. Я сохранил с именами server_certificates_bundle_sandbox.p12 (для сертификата разработки) и server_certificates_bundle_prod.p12 (для сертификата публикации). Внимание! При экспорте поле пароля оставляем пустым. В дальнейшем вы сможете усложнить систему защиты и выгрузить сертификаты с указанием пароля.
Для подтверждения валидности сертификатов пользователя которые мы только что получили, необходим корневой сертификат. Для получения корневого сертификата необходимо выполнить следующие действия:
- Переходим на сайт загрузки корневых сертификатов.
- Выбираем «Personal Use and Secure Server Installation» и нажимаем кнопку «Download Certificates».
- Нажимаем на «Root Certificates».
- Нас интересуют два сертификата «entrust_ssl_ca.cer» и «entrust_2048_ca.cer». Скачиваем их. Вообще, в изначальном описании написано, что сертификат «entrust_ssl_ca.cer» используется в Prodution режиме, а «entrust_2048_ca.cer» в режиме Development. Но есть пометка, что после 22 декабря 2010 в качестве Production сертификата так же можно использовать «entrust_2048_ca.cer». Т. е. данный сертификат можно использовать в обоих режимах работы, меняя лишь сертификаты пользователя.
Далее, нам необходимо открыть скачанные сертификаты на Mac’е, т. е. импортировать их в «Связку ключей». Для этого просто делаем двойной клик на каждом сертификате.
На данный момент, мы получили 3 основных файла для работы с сервисом APNS:
- «entrust_root_certification_authority_2048.pem» — корневой сертификат.
- «server_certificates_bundle_sandbox.p12» — сертификат пользователя для режима Development.
- «server_certificates_bundle_prod.p12» — сертификат пользователя для режима Production.
Как можно заметить, сертификаты пользователя имеют расширение *.p12, но для работы нам необходимы файлы формата *.pem.
Для конвертации я воспользовался бесплатным набором утилит OpenSSL для Windows.
После установки пакета, для простоты выполнения команд я использовал TotalCommander.
- Открываем в левой части каталог установленного OpenSSL и переносим туда наши сертификаты.
- В нижней части TotalCommander в командной строке выполняем следующие команды:
На запрос ввода пароля, просто нажимаем Enter.
Google и GCM
Для работы с Google и GCM мы будем использовать библиотеку GCM PHP Server Library. Скачанный архив библиотек и пример работы из коробки у меня по какой-то причине отказался работать, поэтому пришлось немного модифицировать код.
Для работы с GCM нам потребуется API ключ проекта. Выполняем следующие действия:
- Открываем консоль разработчика Google.
- Выбираем интересующий нас проект.
- Открываем раздел «APIs & auth» — «Credentials» и копируем ключ Server Key.
- Если вы ещё не создавали ключи, то вам потребуется включить API «Google Cloud Messaging for Android».
База данных
Текст скрипта для создания базы данных выглядит так.
Для добавления устройств в базу данных используется отдельная функция скрипта сервера, но об этом чуть позже.
Сервер
В состав сервера входит файл конфигурации. Приведу отдельно его текст.
Думаю, что раздел конфигурации базы данных не требует объяснения, тут надо указать настройки для доступа к базе данных, в которой хранится таблица «Devices».
Дальше идут настройки API ключа и указание каталогов сертификатов, что в общем-то тоже я думаю понятно всем.
Отдельно рассмотрим ключ:
Данный ключ переключает режим работы сервера. Development или Production режимы рассылки.
Как можно заметить, все сертификаты необходимо положить в каталог «Certificates» рядом со скрипом.
Если при генерации сертификатов Apn использовался пароль, то в настройках, необходимо указать пароль:
Работа со скриптом
После заполнения файла конфигурации скрипт готов к работе, осталось зарегистрировать устройства.
Скрипт сервера push.php принимает 2 значения параметра action:
В каждом действии требуются дополнительные параметры. Для регистрации устройства дополнительными параметрами являются:
Delphi
Настало время рассмотреть небольшой код написанный для Delphi, который позволяет регистрировать токены устройств на нашем сервере. Каждое мобильное устройство после запуска приложения получает свой DeviceID и токен, после чего отправляет полученные данные на наш сервер.
В разделе public нашего юнита добавляем следующие строки:
А в раздел type добавляем описание 2-х функций:
В момент отображения формы добавляем код получения DID и токена. Будьте внимательны, значение PROJECTNUM необходимо заменить на свой номер проекта из личного кабинета Google разработчика.
Так же, надо добавить функцию, которая срабатывает при изменении состояния получения DID и токена.
В результате мы получаем почти готовую программу. Кто был более внимательным, заметил, что в коде есть несколько функций, не объявленных ранее, таких как ShowNotification или RegisterDevice. Для удобства, я вынес их в отдельный файл global.pas. Достаточно добавить данный файл в проект, чтобы не копипастить функции. В данном файле вам потребуется заменить константу DOMAIN для указания пути к файлу скрипта на сервере, и если вы положили скрипт не в корне сервера, а в случайный каталог, то потребуется внести дополнительные изменения для указания точной адресации.
Все функции в файле global.pas имеют подробное описание и думаю их использование не вызовет никаких вопросов.
Используемые файлы.
Заключение
Данная статья не претендует на оригинальность и истину последней инстанции. Имеются открытые места в безопасности, такие, как сертификаты без паролей, открытый доступ к функциям скрипта без идентификации пользователей и пр.
Если у кого-нибудь будет желание доработать данный скрипт в плане безопасности или внести поправки я буду только рад. Ваши изменения и замечания вы можете писать в комментариях к статье.
Если вы хотите углубиться в исходный код, то смотрите в GitHub-репозиторий и на пример, демонстрирующий его работу.
Начнем с клиентской части. Первое, что нужно сделать — убедиться, что браузер поддерживает пуш-уведомления. Если да, загружаем наш JavaScript.
Прежде чем писать код, выполним ряд требований. Нам потребуются Application Server Keys (VAPID Key). Получаем их здесь, либо с помощью библиотеки web-push. Кстати, она нам еще потребуется для бэкенд-части. Устанавливаем библиотеку: npm install -g web-push , генерируем ключи: web-push generate-vapid-keys . В независимости от способа в результате у вас должны быть закрытый ключ (private key) и открытый ключ (public key). Сохраните их в надежном месте.
До появления спецификации Application server key/VAPID первые браузеры (Chrome, Opera) реализовали функциональность пуш-уведомлений с помощью Google Cloud Messaging. Все современные браузеры, за исключением Samsung Internet, поддерживают VAPID. Поэтому в этой статье я не буду касаться GCM. Как добавить поддержку для Samsung Internet и старых версий Chrome и Opera — читайте здесь.
Посмотрим на push.js. Здесь мы регистрируем сервис-воркер и подписываемся на уведомления:
В первую очередь создаем константу addServiceKey : ей присваиваем значение с открытым ключ VAPID (о нем мы говорили выше). Также создаем несколько элементов и переменных. Записываем функцию urlB64ToUint8Array() : она понадобится для конвертации ключа из base64 в Uint8Array.
Затем декларируем функцию updatePushButton() . Мы будем вызывать её каждый раз при изменении статуса уведомлений, чтобы обновить отвечающие за него элементы интерфейса.
Далее видим функцию регистрации подписки subscribeUser() . Как вы наверно заметили, в начале скрипта была объявлена переменная let serviceWorkerRegistration . Она содержит результат регистрации сервис-воркера: посмотрите в конец файла, мы записываем его в переменную в момент регистрации.
Метод subscribe() возвращает промис, а в качестве аргумента принимает объект с двумя свойствами:
После этого, создаем функцию отписки unsubscribeUser() . Используем метод getSubscription() объекта PushManager , с его помощью получаем детали подписки, которые отправляем на сервер (снова Fetch API). На этот раз, чтобы удалить её базы.
Записываем функцию initPush() . В ней — событие для кнопки pushButton, которое вызывает функцию подписки или отписки в зависимости от текущего состояния. После, не забываем обновить это состояние. Использованный в примере код можно найти на GitHub.
Последний шаг — регистрация сервис-воркера.
В этой части мы разберем два необходимых для реализации пуш-уведомлений события: push и notificationonclick .
Начнем с push . Проверяем содержимое объекта notificationData (свойства title , body и icon ), и, если не находим их, присваиваем дефолтные значения. После вызываем метод showNotification , он покажет уведомление пользователю.
В дополнение к трём перечисленным свойствам могут использоваться и другие, например, badge , tag , vibrate . На момент написания этой статьи (февраль 2017) многие из них поддерживались только некоторыми браузерами. title , body и icon , доступных во всех браузерах, поэтому ограничимся ими.
Событие notificationOnClick срабатывает в момент клика по уведомлению. Сначала закрываем уведомление. Затем проверяем, открыт ли наш сайт в текущей вкладке браузера, если нет, то открываем его с помощью openWindow() .
Я предполагаю, что у вас есть базовые знания Node.js и опыт использования Express. В ином случае, я рекомендую вам ознакомиться с ними прежде чем продолжить.
Итак, в первую очередь:
Теперь передаем данные VAPID. Помимо сгенерированной в начале пары ключей, нужно указать адрес электронной почты (с префиксом mailto: ) либо URL сайта. Контактные данные могут потребоваться сервису для связи с вами. Обратите внимание на комментарии: я предпочел сохранить ключи в переменную окружения. Вы можете поступить так же или выбрать свой метод, но главное помните, закрытый ключ должен быть всегда защищен от обращений извне. Собственно поэтому он так и назван.
Переходим к функции подписки:
В функции отправки подписки на сервер, получаем доступ к объекту subscription . В нем — значение endpoint и ключи доступа. Здесь я не буду останавливаться на вопросах работы с базой данных. Для примера укажу только, что для демо использована Mongo DB.
Прим. переводчика: endpoint — это уникальный URI, создаваемый для каждого пользователя индивидуально в соответствии с паттерном: p256dh — открытый ключ, auth — закрытый ключ.
Затем получаем наше первое уведомление — то, которое приветствует подписавшегося пользователя. Метод sendNotification() принимает три аргумента:
Если пользователь отменяет подписку, удаляем информацию о ней из базы.
Вероятно, каждый из вас столкнется со своим случаем применения пуш-уведомлений, и просто скопировать код не получится. Однако я надеюсь, что этот урок поможет вам реализовать искомую функциональность как на стороне клиента, так и на стороне сервера.
Демо проекта, исходный код опубликован на GitHub.
Для более глубокого погружения в тему рекомендую бесплатную книгу Web Push Book и примеры на servicewore.rs.
Если вам есть что спросить, или есть что добавить, пишите в Twitter или по электронной почте.
Технология push-уведомлений – это новый маркетинговый канал для коммуникации с клиентами. Push-рассылка обладает рядом уникальных характеристик, не свойственных никакому другому маркетинговому инструменту. Это делает «пуши» чрезвычайно привлекательной технологией, которую активно продвигает компания Google, а поддерживают все популярные платформы.
Владельцы сайтов все чаще задумываются о подключении push-уведомлений, однако здесь возникает множество вопросов. Как и любая инновационная технология, пуш-рассылка все еще остается достаточно незнакомым инструментом даже для разработчиков и маркетинговых агентств, не говоря уже об «обычных» бизнес-клиентах. Многие клиенты попросту не знают обо всех возможностях этого маркетингового инструмента, которые вовсе не с каждым сервисом доступны в полном объеме (а зачем «брать» неполный объем услуг?).
Внедрение инноваций часто становится и полем для злоупотреблений – когда за те же деньги предлагают услуги более низкого качества (а зачем платить за низкокачественную услугу?).
Все упирается в незнание основных преимуществ push-уведомлений, из-за чего многие клиенты покупают услугу, не понимая, что получат в итоге. Кто-то подключает «пуши», потому что «сейчас все так делают». Но при грамотном подходе push-уведомления подключают как маркетинговый инструмент коммуникации и возврата посетителей (чтобы получить профит для бизнеса).Между тем, подключить «пуши» к своему сайту с готовым сервисом можно буквально за четверть часа.
Давайте разберемся в плюсах и минусах таких подходов:
- использование push-уведомлений от специализированного онлайн-сервиса;
- создание функционала push-уведомлений для вашего веб-сайта силами собственных разработчиков.
Пуш-уведомления – лишь один из маркетинговых каналов коммуникации, но он особенный. Хотя бы потому, что технология предполагает максимально широкую и подробную сегментацию клиентской базы. Таргетирование рассылки достигает уровня высшего пилотажа, если говорить о «пушах». А особенности анализа кампании позволяют корректировать условия рассылок на каждом этапе, применяя уникальные инструменты.
Какие еще преимущества push-уведомлений?
Многие веб-ресурсы уже внедрили push-технологии и активно используют их преимущества. Вот, к примеру, как выглядит предложение о подписке на «пуши» на сайте The Washington Post:
Как сделать пуш-рассылку при помощи подключения готового сервиса «под ключ»?
Gravitec . net – это SaaS сервис , в котором доступна отправка уведомлений на любые устройства ( пк , планшеты, смартфоны) через все популярные браузеры.
Как работает пуш-технология?
Использование сервиса при базе подписчиков до тысячи пользователей бесплатное. После превышения лимита оплата взимается за каждую тысячу подписчиков ежемесячно.
Первый шаг – регистрация в сервисе.
После перехода по кнопке, необходимо заполнить форму: указать email и пароль.
После подтверждения внесенных данных на почтовый ящик придет письмо от сервиса с предложением активировать учетную запись. Кликаем по ссылке в письме.
Далее выбираем «Добавить сайт». Следующий этап – интеграция пуш-сервиса с сайтом.
Полученный архив распаковываем в корневую папку сайта.
К SDK-файлам должен быть доступ по ссылкам:
На этом подключение push-уведомлений к сайту завершено. Теперь каждый посетитель вашего веб-ресурса сможет подписаться на пуши через сервисное окно браузера.
Если у вас остались вопросы по установке, вот ссылка на техническое руководство.
Теперь в панели управления выбранного сайта жмем «Создать кампанию» («Create campaign»).
Мы переходим непосредственно к созданию push-уведомления. Здесь можно задать такие его параметры:
После того, как удалось сделать push-уведомление для сайта, переходим к планированию кампании.
В случае необходимости, отменить запуск рассылки можно в разделе «История кампаний».
- Большие картинки;
- Дополнительные кнопки.
Как сделать push-рассылку своими руками (на базе JavaScript): руководство
Push-уведомления можно внедрить на своем веб-ресурсе самостоятельно без использования сервисов «под ключ». Однако необходимо понимать, что этот инструмент состоит из совокупности различных технологий, его разработка требует времени и усилий, а эффективность конечного продукта будет зависеть от грамотности подхода, профессионализма создателей и внимания к деталям.
Техническая документация по разработке базового функционала содержится на сайте компании Google, по нескольким ссылкам:
Укажем основные этапы самостоятельного внедрения push-уведомлений на сайт. Чтобы приступить к практическому описанию процесса, разберемся с принципом работы технологии.
После того, как мы получили ключи, нужно создать файл manifest.json в корневой папке сайта, где вместо <Your Sender ID> вставляем идентификатор отправителя из Firebase Cloud Messaging.
Теперь ссылаемся на созданный манифест в html страницы (между <header> и </header>).
Файл Service Worker можно создать так, как описано в технической документации Google, либо с помощью подключения библиотек Firebase.
Опять везде, где есть указания на ‘Sender-ID’, нужно прописывать идентификатор отправителя, полученный ранее в Firebase.
Это только самые основные этапы установки пуш-уведомлений на свой сайт с базовыми функциями. Здесь не учтено создание панели управления рассылками, сбора статистики и всех тех инструментов, которые нужны для разработки маркетинговой стратегии, отслеживания результатов и т.п.
Сравнение подходов
Попробуем сравнить два метода подключения «пушей» (в готовом сервисе и при создании «своими руками») по пяти параметрам:
- Скорость установки;
- Стоимость разработки;
- Удобство использования;
- Информативность;
- Безопасность внедрения.
Безусловно по первому пункту предпочтительней задействовать готовый сервис.
Сравнить стоимость услуг сложнее, но попытаемся ориентировочно сопоставить цены для обоих вариантов.
Следующие пункты сравнительной шкалы напрямую зависят от количества вложенных средств на этапе разработки продукта. Удобный, продуманный интерфейс для планирования кампаний, а также возможность сбора статистики – это те элементы, которые выходят за рамки базового набора функций при установке push-уведомлений на сайт. А потому их создание – это дополнительные деньги и время без гарантии удовлетворительного результата.
- расширенной статистикой с данными о времени подписки, отправленных, доставленных и открытых уведомлениях;
- историей рассылок по всем кампаниям с CTR, тематикой, временем отправки и т.п.;
- сегментацией базы подписчиков по тегам, персональным идентификаторам, метаданным браузера (город, страна, устройство и т.п.).
Исходя из проведенного анализа, самостоятельная разработка инструмента push-уведомлений, как минимум, по четырем параметрам уступает готовому сервису подключения «пушей» к сайту.
Важно помнить, что за готовым сервисом стоит длительная работа команды разработчиков, нацеленная на положительный отклик пользователя. Именно поэтому в нем предусмотрены и протестированы различные возможности, недоступные в базовых версиях технологии.
Читайте также: