Как отправлять веб-push-уведомления с помощью Firebase (FCM)?

Опубликовано: 2021-12-29

Для облегчения своих служб уведомлений в Интернете, IOS и Android Firebase использует облачные службы. Firebase Cloud Messaging (FCM) работает путем создания уникальных токенов для каждого устройства, а затем использует их для отправки сообщений на соответствующие устройства. Для отправки push-уведомлений через Интернет Firebase создает токены с помощью javascript.

В этом блоге вы узнаете все о том, как реализовать веб-push-уведомления в firebase .

Что такое облачный обмен сообщениями Firebase?

Что такое Firebase-Cloud-Messaging

Firebase Cloud Messaging — это бесплатная мобильная служба уведомлений от Google. Он позволяет сторонним разработчикам приложений отправлять уведомления своим пользователям с серверов Google Cloud Messaging (GCM). Это позволяет информировать пользователей о различных данных, доступных для синхронизации в режиме реального времени.

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

Каковы преимущества отправки веб-push-уведомлений с помощью Firebase?

Ниже приведены преимущества отправки веб-push-уведомлений из firebase .

  • Бесплатное начало: вам не нужно платить Google за использование FCM. служба push-уведомлений. Кроме того, его легко масштабировать.  
  • Не беспокойтесь о разрешениях: поскольку библиотеки FCM используют слияние манифестов, они автоматически добавляют все необходимые разрешения. Это уменьшает количество усилий, которые вам нужно предпринять.
  • Упрощенная регистрация: адрес, который FCM использует для доставки сообщения на устройство, называется «регистрационным токеном». Этот процесс теперь был сделан асинхронным. Библиотеке Google автоматически назначается токен от вашего имени. Итак, когда вы запрашиваете токен, вам отправляется регистрационный токен. Чтобы начать обмен сообщениями, вам просто нужно отправить этот токен на ваши серверы.
  • Простота внедрения: Внедрение FCM выполняется быстро и легко. Поскольку его интуитивно понятные API доступны в одном пакете SDK, вы можете немедленно решать проблемы клиентов, не создавая сложной инфраструктуры.
  • Аналитика: вы получаете неограниченную аналитику бесплатно от Firebase. Вы получаете ценные данные об использовании приложений вашими пользователями, кликах по объявлениям и многом другом. Другие функции Firebase хорошо работают с Firebase Analytics. Таким образом, вы можете действовать на все.
  • Кроссплатформенная поддержка: поскольку API доступны в одном пакете SDK для C++, JavaScript, Android и iOS, вы можете расширить его на различные платформы, не изменяя свою инфраструктуру.
  • Обмен сообщениями по общим темам: если вы хотите уведомить пользователей, заинтересованных в определенной теме, вы просто публикуете свое сообщение в FCM. FCM доставит его всем пользователям, подписавшимся на эту тему. Лучше всего то, что у него нет ограничений на обмен сообщениями по темам.
  • Обмен сообщениями на разные темы: FCM также позволяет сегментировать клиентов, чтобы отправлять им релевантные сообщения. Например, если вы отправляете своим пользователям уведомления о дорожном движении, ваши пользователи в городе А будут получать сообщения о дорожном движении, относящиеся только к их городу, а пользователи в городе Б будут получать сообщения о дорожном движении, относящиеся только к их городу.

Как отправлять веб-push-уведомления с помощью Firebase?

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

1. Зарегистрируйте приложение Firebase

Регистрация-Firebase-приложение
  1. Перейдите по этой ссылке https://console.firebase.google.com/u/0/ и нажмите вкладку «Добавить проект».
  2. Дайте название проекту и выберите страну. Затем нажмите на вкладку «Создать проект». Google проверит название проекта на его доступность и уникальность.
  3. Теперь нажмите на вкладку «принять положения и условия», чтобы продолжить. Ваш проект будет построен в течение
  4. несколько секунд.
  5. Теперь добавьте в свой проект приложение Android/IOS/Web/Unity. Поскольку этот блог посвящен веб-push-уведомлениям Firebase , вам нужно продолжить, щелкнув веб-значок, показанный как </>.
  6. Дайте вашему приложению псевдоним. Этот ник предназначен только для пользователей. Таким образом, вы можете использовать эту функцию, чтобы лучше различать приложения в проекте для внутреннего использования.
  7. Если ваш проект не работает на HTTPS-сервере, добавьте для него хостинг. Если нет, просто пропустите этот шаг.
  8. Теперь нажмите «Зарегистрировать приложение».  
  9. Теперь, когда ваше приложение зарегистрировано, вы получите Firebase SDK, который представляет собой код. Скопируйте этот код

вниз. Он пригодится в следующем разделе. Если вы не скопируете это сейчас, вы можете получить его из раздела «Настройки».

2. Добавьте firebase в свой проект

Добавьте firebase в свой проект
  1. Подойдите к приборной панели. На боковой панели вы найдете значок «Настройки». Нажмите здесь. В появившемся меню нажмите «Настройки проекта».
  2. Когда откроется страница настроек (Общие настройки), прокрутите вниз до конца страницы и скопируйте код, показанный для выбранного CDN.
  3. Включите следующий код в свой HTML-файл в конце. Также включите сценарий CDN для обмена сообщениями Firebase.

< script src = "https://www.gstatic.com/firebasejs/8.3.2/firebase-app.js" > </script>

<script src = "https://www.gstatic.com/firebasejs/8.3.2/firebase-analytics.js" > </script>

3. Операционная служба Firebase

1. Для кода, указанного вверху, добавьте код, указанный внизу, после того, как вы найдете // Initialize Firebase.

// Инициализировать Firebase

firebase.initializeApp(firebaseConfig);const messages=firebase.messaging(); //Пользовательская функция для запуска службы firebase

  получитьстартовый токен(); //Этот код получает сообщение с сервера/вашего приложения и выводит сообщение на консоль, если та же вкладка открыта, что и проект в браузере

message.onMessage (функция (полезная нагрузка) {console.log («onMessage», полезная нагрузка);});

2. Вы можете написать код внизу в отдельном файле js, присутствующем на вашей HTML-странице, или вы можете добавить его к коду вверху в теге <script>.

messaging.getToken() — это функция, используемая для получения токенов с помощью Firebase SDK. Если токен найден, он отправляется на сервер для сохранения, в противном случае разрешение пользователя запрашивается с помощью функции RequestPermission().

setTokenSentToServer() — это еще одна функция, которая использует локальное хранилище для присвоения 1 в качестве значения sendTokenToServer, если токен уже был отправлен на сервер, и 0, если токен не отправлен на сервер из-за возникновения ошибки при его отправке на сервер. сервер или извлекается из Firebase SDK.

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

Отправка сообщения из проекта

Теперь, когда все, что вам нужно для отправки уведомлений из проекта, готово, вот подробности о том, как вы можете отправить уведомление конечному пользователю, чей токен вам известен:

1. Изначально необходимо получить сервисный ключ. Выполните следующие шаги-

  • Откройте консоль Firebase.
  • Нажмите на настройки проекта
  • Нажмите «Обмен сообщениями в облаке».
  • Вы найдете код в поле «Ключ сервера». Скопируйте это.

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

Давайте воспользуемся платформой postman для отправки push-уведомлений из Firebase . Вот что вам нужно сделать, это-

3. Установите тип запроса POST.

4. Введите URL-адрес: https://fcm.googleapis.com/fcm/send.

5. Щелкните раздел Заголовки.

Вам нужно заполнить два заголовка, а именно: авторизация и тип контента.

· Авторизация: Вставьте скопированный ключ сервера.

· Тип содержимого: приложение/JSON (обозначение объекта JavaScript)

6. Теперь нажмите, чтобы открыть раздел Body. Вставьте токен пользователя, полученный Firebase во время регистрации пользователя.

7. Теперь отправьте запрос. Вы сможете отправлять push-уведомления своим пользователям с сервера.

Обратите внимание, что когда вы отправляете свое первое push-уведомление пользователю, веб-браузер запросит его/ее разрешение на получение уведомлений от вас. Только если он/она даст разрешение, вы сможете постоянно отправлять push-уведомления. Вы можете убедиться, что ваш пользователь дает свое разрешение, следуя нашим советам по push-уведомлениям.

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

Ознакомиться с продуктом

Также читайте:

  • 7 переоцененных факторов веб-push-уведомлений
  • Веб-push-уведомления | Тактика прямого электронного маркетинга
  • 41 статистика веб-пуш-уведомлений, которую нужно знать маркетологам
  • 15 лучших программ и инструментов для push-уведомлений в 2022 году {в сравнении}
  • Насколько веб-пуш-уведомления эффективнее других маркетинговых средств?