Категории

Популярные тэги

Настройка десктопных push-уведомлений

  • 17 февраля 2021
  • 445
  • Нет комментариев

Сообщество разработчиков не заботится о реализации push-уведомлений. А они играют важную роль в привлечении пользователей — помогают вернуть их обратно на ваш сайт.

Но часто это раздражает пользователей, если не делать это осторожно. Отправка уведомлений одного за другим — плохая практика. Мы должны уведомлять пользователя только по значимым/критическим причинам, которые требует срочного внимания.

С учетом этого, давайте начнем.

Для реализации push-уведомлений мы будем использовать связку Laravel и Firebase Cloud Messaging.

Если вы не имеете представления о Firebase, ознакомьтесь с этой замечательной статьей в Hackernoon

Настройка Firebase

  • Создайте аккаунт на https://firebase.google.com/
  • Перейдите в консоль https://console.firebase.google.com/.
  • Добавьте новый проект с нужным именем
  • Добавьте новое приложение внутри созданного проекта.
  • Скопируйте себе Firebase SDK.

Инициализация Firebase

Чтобы инициализировать Firebase на вашем сайте, вставьте полученный фрагмент кода Firebase SDK в файл layout.blade.php.

Наряду с этим вам также необходимо включить Firebase messaging kit, которого нет в сниппете. Вы можете импортировать скрипт с этой строкой. 

<script src=”https://www.gstatic.com/firebasejs/6.2.4/firebase-messaging.js"></script>

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

Ваш окончательный файл layout.blade.php будет выглядеть так 

<!doctype html>
<html lang="{{ app()->getLocale() }}">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Laravel</title>
        <!-- Fonts -->
        <link href="https://fonts.googleapis.com/css?family=Raleway:100,600" rel="stylesheet" type="text/css">
        <!-- The core Firebase JS SDK is always required and must be listed first -->
        <script src="https://www.gstatic.com/firebasejs/6.2.4/firebase-app.js"></script>
            <script src="https://www.gstatic.com/firebasejs/6.2.4/firebase-messaging.js"></script>
        <!-- TODO: Add SDKs for Firebase products that you want to use
            https://firebase.google.com/docs/web/setup#config-web-app -->
        <script>
            // Your web app's Firebase configuration
            var firebaseConfig = {
                apiKey: "---",
                authDomain: "---",
                databaseURL: "---",
                projectId: "---",
                storageBucket: "",
                messagingSenderId: "---",
                appId: "---"
            };
            // Initialize Firebase
            firebase.initializeApp(firebaseConfig);
            const messaging = firebase.messaging();
        </script>
        
    </head>
    <body>
        <div class="flex-center position-ref full-height">
            
            <div class="content">
                <div class="title m-b-md">
                    Laravel Desktop Push Notifications
                </div>
            </div>
        </div>
    </body>
</html>

Получение согласие пользователя и токена

Прежде чем вы начнете отправлять push-уведомления, вам нужно сгенерировать токен firebase и согласие пользователя. Вы можете сделать это, используя следующий фрагмент кода. 

// consent-token.js 
messaging.requestPermission()
  .then(function(){
      return messaging.getToken();
  })
  .then(function(token){
      console.log('token generated');
      console.log(token);
      console.log('token generated');
  })
  .catch(function(err){
      console.log(err);
  })

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

Регистрация Service Worker

Firebase предоставляет собственную настройку Service Worker в файле «firebase-messaging-sw.js».

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

Давайте создадим этот файл и добавим тот же фрагмент Firebase SDK, который был получен в консоли Firebase. 

// firebase-messaging-sw.js
importScripts('https://www.gstatic.com/firebasejs/6.2.4/firebase-app.js');
importScripts('https://www.gstatic.com/firebasejs/6.2.4/firebase-messaging.js');
// Your web app's Firebase configuration
var firebaseConfig = {
    apiKey: "---",
    authDomain: "---",
    databaseURL: "---",
    projectId: "---",
    storageBucket: "",
    messagingSenderId: "---",
    appId: "---"
};
// Initialize Firebase
firebase.initializeApp(firebaseConfig);
var mesaging = firebase.messaging();

Примечание. Этот файл должен быть создан в каталоге public/ вашего Laravel приложения.

Получение push-уведомлений

Вы можете получить два типа уведомлений:

  1. Уведомления в приложении — когда пользователь уже использует приложение и получает уведомления.
  2. Фоновые уведомления — когда пользователь вне вашего приложения.

Во-первых, давайте посмотрим, как мы можем получить уведомление в приложении. Для этого необходимо добавить следующий код в файл layout.blade.php. 

messaging.onMessage(function(payload){
  console.log('onMessage:', payload);
});

Вышеупомянутая функция позволяет нам получать уведомления в приложении, и payload будет содержать все данные, которые вы отправляете через серверную часть.

Для получения фоновых push-уведомлений вы должны использовать следующий фрагмент кода: 

mesaging.setBackgroundMessageHandler(function(payload){
  console.log(payload)
  return self.registration.showNotification(title, options)
});

Этот фрагмент кода позволяет нам получать фоновые уведомления. Так же, как уведомление в приложении, payload содержит все данные, которые отправляются из серверной части. Заметили return? Он говорит браузеру отображать уведомление, даже когда браузер закрыт.

Примечание. Вы можете добавить этот код фоновых уведомлений в файл firebase-messaging-sw.js.

Файл манифеста

Последний шаг — создание файла manifest.json с идентификатором Google Cloud Messaging Sender. Идентификатор гарантирует, что firebase может отправлять push-уведомление приложению. Ваш файл manifest.json будет таким 

// manifest.json
{
  "gcm_sender_id": "103953800507"
}

Примечание. Идентификатор GCM является общим для всех, поэтому не меняйте его.

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

Для простоты мы будем отправлять уведомления с помощью cURL.

Вы можете использовать этот CURL для тестирования ваших push-уведомлений 

curl -X POST \
  https://fcm.googleapis.com/fcm/send \
  -H 'Authorization: key=<YOUR_API_KEY>' \
  -H 'Content-Type: application/json' \
  -d '{
    "to": "<RECEIVER_TOKEN>",
    "notification": {
        "title": "Push Notification",
        "body": "Hello World!",
        "icon" : "notification-icon.png"
    }
}

Вот и все, теперь ваши пользователи готовы получать push-уведомления вашего приложения.

Надеюсь этот урок был полезен для вас.



Загрузка комментариев...