Настраиваем пуши

Сразу к делу, для настройки push-уведомлений на сайте, нам понадобится:

1) Авторизоваться на https://firebase.google.com/ со своей gmail-почтой (нажать "Перейти в консоль")

2) Ткнуть "Create a project"

3) Придумать название для своего проекта

4) Нажать Continue

5) Связать аккаунт с Google Analytics, который используется на сайте, где мы собираемся реализовывать пуши. Если такого нет - создать.

6) Теперь переходим в дэшборд нашего нового Firebase-проекта. Открываем Project settings

Нас интересует Project number

Копируем его значение и переходим к нашему сайту. В корневой директории необходимо создать файл firebase-messaging-sw.js. В этом файле мы разместим следующий код:

// firebase-messaging-sw.js
importScripts('https://www.gstatic.com/firebasejs/3.6.8/firebase-app.js');
importScripts('https://www.gstatic.com/firebasejs/3.6.8/firebase-messaging.js');
firebase.initializeApp({
  messagingSenderId: '1488'
});
const messaging = firebase.messaging();

В параметре messagingSenderId мы должны указать project number, который получили в настройках Firebase.

Теперь, мы возвращаемся в личный кабинет Firebase и на той же странице, где мы брали Project number чуть ниже расположен HTML-код.

Его нам необходимо скопировать на наш сайт. С помощью этого кода мы подключаем библиотеку, которая откроет нам возможности работы с push-уведомлениями от Google Firebase.

Теперь, разместим на сайте следующий JS-код:

<script>
if ('Notification' in window) {
var messaging = firebase.messaging();
if (Notification.permission === 'granted') {
subscribe();
}
}

function subscribe() {
messaging.requestPermission()
.then(function () {
messaging.getToken().then(function (currentToken) {
//
if (currentToken) {
sendTokenToServer(currentToken);
} else {
//
setTokenSentToServer(false);
}
}).catch(function (err) {
//
setTokenSentToServer(false);
});
}).catch(function (err) {
//
});
}

function sendTokenToServer(currentToken) {
if (!isTokenSentToServer(currentToken)) {
//
var url = '/push.php';
jQuery.post(url, {
token: currentToken
});
setTokenSentToServer(currentToken);
} else {
//
}
}

function isTokenSentToServer(currentToken) {
return window.localStorage.getItem('sentFirebaseMessagingToken') == currentToken;
}

function setTokenSentToServer(currentToken) {
window.localStorage.setItem(
'sentFirebaseMessagingToken',
currentToken ? currentToken : ''
);
}

jQuery(document).ready(function() {
subscribe();
});
</script>

Теперь, каждый пользователь еще не подписанный на наши push-уведомления увидит вот такое предложение подписаться на них при попытке открыть сайт.

Далее, в корневой директории нашего сайта создаем файл push.php и копируем туда следующий код:

<?php
  $file = fopen('push.log', 'a');
  foreach ($_REQUEST as $key => $val){
    fwrite($file, $key . ' => ' . $val . "\n");
}
fclose($file);

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

Теперь, подготовим скрипт, который будет рассылать push-уведомления, для этого создадим файл send-push.php и разместим в нём следующий код:

<?php
$CLIENT_TOKEN_ID = "CLIENT_TOKEN";
$request_body = [
'to' => $CLIENT_TOKEN_ID,
'notification' => [
'title' => 'ТЕСТ',
'body' => 'Слыш, купи сайт',
'icon' => 'https://cdn.icon-icons.com/icons2/2261/PNG/512/vibrator_sex_toy_icon_icon_140364.png',
'click_action' => 'http://prodviga.ru',
],
];
$url = 'https://fcm.googleapis.com/fcm/send';
$YOUR_API_KEY = 'SERVER_KEY';
$fields = json_encode($request_body);
$request_headers = [
'Content-Type: application/json',
'Authorization: key=' . $YOUR_API_KEY,
];
$ch = curl_init();
curl_setopt($ch, CURLOPT_URL, $url);
curl_setopt($ch, CURLOPT_CUSTOMREQUEST, 'POST');
curl_setopt($ch, CURLOPT_HTTPHEADER, $request_headers);
curl_setopt($ch, CURLOPT_POSTFIELDS, $fields);
curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
curl_setopt($ch, CURLOPT_FOLLOWLOCATION, true);
$response = curl_exec($ch);
curl_close($ch);
echo $response;
?>

В параметре $CLIENT_TOKEN_ID мы указываем идентификатор пользователя, который мы сохранили в файле push.log

В параметре $YOUR_API_KEY мы должны указать наш API-ключ для рассылки уведомлений. Он находится в личном кабинете Firebase в разделе "Project settings" - "Cloud Messaging"

Также, в массиве $request_body мы должны указать:

• Заголовок сообщения
• Текст сообщения
• Иконку
• CTA-ссылку, куда перейдет пользователь по клику на push-уведомление

Переходим по ссылке /send-push.php и наше push-уведомление успешно отправлено