Без Push-уведомления сейчас не может работать не один серьезный ресурс, да, мы знаем что на нашем сайте их пока нет, но мы обязательно в ближайшее время все прикрутим. Спасибо Танечке за подробную инструкцию.

Push-уведомления работают только если на сайте есть HTTPS.

Без валидного SSL сертификата запустить не получится. То есть сначала надо купить домен, на котором будет размещаться сайт, потом подключить к нему SSL сертификат (у многих хостеров эта услуга предоставляется бесплатно) и только потом надо начинать повторять наш гайд 🙂

Все файлы и папки, которые я упоминаю в гайде прикреплены в архивах к посту.

Файлы, которые нам понадобятся server.zip и land.zip

Создание проекта в Firebase

1. В качестве сервера сообщений мы будем использовать Firebase Cloud Messaging, поэтому мы начинаем с регистрации и создания проекта на Firebase.

• Заходим на сайт;
• Регистрируемся;
• Жмём кнопку Create new project или Import Google project, если у вас уже есть проект;
• При создании указываем название проекта и страну;
• После создания проекта попадаем на его dashboard;
• В меню наводим на колесико рядом с Overview и выбираем Project settings;

2. На открывшейся странице переходим во вкладку Cloud Messaging;

Нас интересует Ключ сервера, который будет использоваться для отправки сообщений с сервера и Сертификат для Web Push который будет использоваться для получения сообщений на стороне клиента

3. Затем на вкладке Общие нажимаем Добавить Firebase в свое веб-приложение.

4. В открывшемся окне будет код для инициализации нашего веб-приложения. Нам понадобится не весь, только тот, который выделен на скриншоте.

Приступаем к настройке лендинга

Копируем содержимое папки land в корень сайта — то есть в ту папку, где у вас лежит index.html

Файл firebase-messaging-sw.js обязательно должен находиться в корне проекта, то есть доступен по адресу https://example.com/firebase-messaging-sw.js

1. Заменяем содержимое файла firebase/init.js кодом инициализации, полученным в ЛК firebase

2. В 3 строке файла firebase/firebase_subscribe.js добавляем ключ сертификата, полученный в ЛК.

3. Открываем файл send_subscribe.php и прописываем URL, по которому будет находиться наш скрипт, сохраняющий подписки.

4. Подключаем все скрипты к лендингу. Перед закрывающим тэгом body добавляем след. код:

<script src=»firebase/jquery.js»></script>

<script src=»firebase/firebase-app.js»></script>

<script src=»firebase/firebase-messaging.js»></script>

<script src=»firebase/init.js»></script>

<script src=»firebase/firebase_subscribe.js»></script>

Настройка сохранения подписок

В данном примере мы будем сохранять идентификаторы устройств подписавшихся пользователей в файл.

Для реального проекта желательно использовать базу данных для хранения подписок.

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

Итак, для продолжения настройки необходимо скопировать содержимое папки server на хостинг, где будет располагаться система сохранения и обработки подписок. В данном случае просто скопируем в папку с лендингом.

В файле save_push.php находится скрипт, который сохраняет id устройств, подписавшихся пользователей в текстовый файл push.txt

В файле send_push.php представлен скрипт для отправки 1 push-уведомления.
Для его работы необходимо добавить ключ сервера, который нужно взять из ЛК firebase. (3 строка файла)

Пробная подписка

После того, как все настроено, необходимо совершить пробную подписку.Для этого надо просто зайти на свой сайт, куда был установлен скрипт и подписаться 🙂

После этого в файле push.txt должна появиться скрока вида

cwU1aVjaw0w:APA91bEICUeF-​ASm8nVYfXb6eiaUxgIkBffq5As1bgq6lCIm3_6Z4ArIN3QnZb5zEHftp2CqpnYWsCayHZ0Dvy7hTNfymxW1FGNeGUWLDnxoS346-Y3YkJMT4PUIvM9OfTlcLBotETOH

Это идентификатор устройства. Он необходим для отправки уведомлений.

Отправка уведомлений

Чтобы отправить тестовое уведомление, нужно открыть в браузере скрипт send_push.php и передать ему в параметре token идентификатор устройства.

http://УРЛ_НА_КОТОРОМ_НАХОДИТСЯ_СКРИПТ?token=ИД_УСТРОЙСТВА
Например:
https://push.site-guard.info/send_push.php?token=cwU1aVjaw0w:APA91bEICUeF-ASm8nVYfXb6eiaUxgIkBffq5As1bgq6lCIm3_6Z4ArIN3QnZb5zEHftp2CqpnYWsCayHZ0Dvy7hTNfymxW1FGNeGUWLDnxoS346-Y3YkJMT4PUIvM9OfTlcLBotETOH

После этого на экране появится ответ от сервиса уведомлений и если уведомление было отправлено корректно, то оно должно прийти на устройство, с которого была совершена подписка.

Некоторые моменты

1. Если в момент отправки подписки, в браузере открыта страница сайта, на котором была совершена подписка, то уведомление не будет показано.

2. Скрипт работает корректно, но на некоторых устройствах и браузерах могут возникать неполадки. Например, на моем последнем Mac у меня не показываются пуши в хроме, хотя во всех остальных браузерах — работают. При этом не понятно в чем причина, в маке или в хроме, потому что на моем старом макбуке пуши показываются в хроме и во всех остальных браузерах.

3. Push на iPhone не работают, только Android телефоны.