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

1656585371 kak dobavit push uvedomlenie v veb prilozhenie s pomoshhyu firebase

Леонардо Кардозо

5eWDu2fm8Eloe5rvqP0EEDUscp9HmxXnEtx1

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

Сегодня я подробно покажу вам шаги, необходимые для достижения такой функциональности в вашем веб-приложении Firebase.

Уведомления о Firebase

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

Для передачи уведомлений мы будем использовать службу под названием Cloud Messaging, которая позволяет отправлять сообщения на любое устройство с помощью HTTP-запросов.

Настройка проекта

Прежде всего, вам нужно иметь аккаунт Firebase, и вам нужно создать в нем новый проект.

Для этой демонстрационной установки я буду использовать простой проект, созданный с помощью create-react-appно вы можете использовать тот же код где угодно, где используется JavaScript.

Вдобавок к этому нам нужно добавить библиотеку Firebase к проекту.

npm install firebase --save

Так что приступаем к кодированию!

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

Давайте создадим файл в каталоге проекта с названием push-notification.js.

Давайте внутри файла создадим функцию, которая инициализирует Firebase и передает ключи вашего проекта.

import firebase from 'firebase';

export const initializeFirebase = () => {
  firebase.initializeApp({
    messagingSenderId: "your messagingSenderId"
  });
}

Ну, теперь, когда у нас есть функция, которую нужно вызвать.

Внутрь точки входа вашего проекта импортируйте функцию и вызовите ее.

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import { initializeFirebase } from './push-notification';

ReactDOM.render(<App />, document.getElementById('root'));
initializeFirebase();

Вы можете найти ключи к своему проекту внутри Консоль Firebase.

yXHjfM1BfNm78YYVB1v14m7so7gfYEBqr0eX
Получение ключей

Обслуживающие работники

Service Worker — это сценарий, который запускает ваш браузер в фоновом режиме, отдельно от веб-страницы, обеспечивающей функции, не требующие веб-страницы или взаимодействия с пользователем.

Чтобы получить onMessage события, вашей программе требуется сервисный работник. По умолчанию при запуске Firebase он ищет файл с названием firebase-messaging-sw.js.

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

export const inicializarFirebase = () => {
  firebase.initializeApp({
    messagingSenderId: 'your messagingSenderId'
  });
  
navigator.serviceWorker
    .register('/my-sw.js')
    .then((registration) => {
      firebase.messaging().useServiceWorker(registration);
    });
}

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

Надо добавить firebase-messaging-sw.js к месту, где обслуживаются ваши файлы. Поскольку я использую приложение create-react-app, я собираюсь добавить его в общедоступную папку с таким содержимым:

importScripts('
importScripts('

firebase.initializeApp({
    messagingSenderId: "your messagingSenderId again"
});

const messaging = firebase.messaging();

Запрос на разрешение отправлять уведомления

Ну, все знают, как раздражает заходить на сайт и просить авторизацию на рассылку уведомлений. Давайте сделаем это по-другому!
Позвольте пользователю выбирать, получать или нет уведомления.

Прежде всего, давайте создадим функцию, которая будет делать запрос и возвращать токен пользователя.

Внутри нашего файла push-notification.js добавьте функцию:

export const askForPermissioToReceiveNotifications = async () => {
  try {
    const messaging = firebase.messaging();
    await messaging.requestPermission();
    const token = await messaging.getToken();
    console.log('token do usuário:', token);
    
    return token;
  } catch (error) {
    console.error(error);
  }
}

Нам нужно откуда-нибудь вызвать эту функцию, поэтому я добавлю ее одним нажатием кнопки.

import React from 'react';
import { askForPermissioToReceiveNotifications } from './push-notification';

const NotificationButton = () => (
    <button onClick={askForPermissioToReceiveNotifications} >
      Clique aqui para receber notificações
    </button>
);

export default NotificationButton;

Ладно, давайте посмотрим, как это работает:

khiSZEmyAt - sOXC1UbIYm4-GlPRI3WzBBg-

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

Чтобы отправить уведомления, нам нужно запросить Firebase API, информируя его о маркере, который получит пользователь.

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

По сути, нам нужно сделать запрос POST, отправив JSON в теле запроса.

Ниже приведена структура JSON, которая будет отправлена:

{
    "notification": {
        "title": "Firebase",
        "body": "Firebase is awesome",
        "click_action": "
        "icon": "
    },
    "to": "USER TOKEN"
}

В заголовке запроса нам нужно передать ключ сервера нашего проекта Firebase и тип контента:

Content-Type: application/json
Authorization: key=SERVER_KEY

Ключ сервера можно найти в настройках проекта на консоли Firebase на вкладке Cloud Messaging.

RmPzmgbO2g2-9aexdELqtrpVyThMDDaMe4Mw

Сообщения в действии

Помните, что уведомления будут отображаться только в том случае, если приложение свернуто или работает в фоновом режиме.

ZCQkLJ-JT2iq1VXYSRjzio-tKEVdTEd6cSHl

Таким образом, мы отправляем прямое уведомление на устройство.

Отправлять уведомления группе пользователей

Теперь, когда мы увидели, как отправить уведомление одному пользователю, как отправить уведомление нескольким пользователям одновременно?

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

Как это сделать

Мы отправим запрос POST по адресу https://iid.googleapis.com/iid/v1/ТОКЕН/rel/topics/TOPIC_NAME, передача названия темы и маркера в URL.

Не забудьте передать в заголовке ту самую авторизацию, которую мы использовали для отправки оповещения.

SkEgziQtqdWRAY91Vqat-Pli8fqwYMLrni2q

Отправка оповещения пользователям, подписанным на любую тему, очень похожа на отправку оповещения одному пользователю. Разница в том, что нам нужно передать название темы в файле «до» атрибут вместо токена.

См. пример ниже:

{
    "notification": {
        "title": "Firebase",
        "body": "Firebase topic message",
        "click_action": "
        "icon": "
    },
    "to": "/topics/TOPIC_NAME"
}
NzN-fFuUxFDuNbMRd8e9-qGJsbZZPdZwGnn8

Вывод

Спасибо, что прочли это! Надеюсь, теперь вы поняли, как использовать push-сообщение. Репозиторий с демонстрационным кодом можно найти здесь.

Чтобы получать уведомления о моих будущих публикациях, следите за мной на GitHub или Twitter.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *