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

Сегодня я подробно покажу вам шаги, необходимые для достижения такой функциональности в вашем веб-приложении с помощью 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 Console.

Сервисные работники

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-response-app, я собираюсь добавить его в общую папку со следующим содержанием:

importScripts('https://www.gstatic.com/firebasejs/4.8.1/firebase-app.js');
importScripts('https://www.gstatic.com/firebasejs/4.8.1/firebase-messaging.js');
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;

Хорошо, посмотрим, как это работает:

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

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

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

По сути, нам нужно сделать POST-запрос на https://fcm.googleapis.com/fcm/send, отправив JSON в теле запроса.

Ниже представлена ​​структура отправляемого JSON:

{
    "notification": {
        "title": "Firebase",
        "body": "Firebase is awesome",
        "click_action": "http://localhost:3000/",
        "icon": "http://url-to-an-icon/icon.png"
    },
    "to": "USER TOKEN"
}

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

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

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

Уведомления в действии

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

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

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

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

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

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

Обычно мы отправляем POST-запрос на адрес https://iid.googleapis.com/iid/v1/ TOKEN / rel / themes / TOPIC_NAME, передавая название темы и токен в URL.

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

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

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

{
    "notification": {
        "title": "Firebase",
        "body": "Firebase topic message",
        "click_action": "http://localhost:3000/",
        "icon": "http://localhost:3000/icon.png"
    },
    "to": "/topics/TOPIC_NAME"
}

Заключение

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

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