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

Автор оригинала: FreeCodeCamp Community Member.

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

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

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

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

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

Чтобы отправить уведомления, мы будем использовать сервис под названием Облачные сообщения , что позволяет нам отправлять сообщения на любое устройство, используя 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(, document.getElementById('root'));
initializeFirebase();

Сервисники

Получить 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('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 = () => (
    
);

export default NotificationButton;

Хорошо, давайте посмотрим, что это работает:

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

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

По сути, нам нужно сделать запрос на пост 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 имеет функцию под названием Тема , где вы вставляете несколько токенов на определенную тему, и вы можете отправить одно и то же уведомление всем из них из одного запроса.

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

Мы будем в основном отправить запрос на сообщение по адресу https://iid.googleapis.com/iid/v1/ Токен /ol/topics/ Topic_name , Передача названия темы и токен в URL.

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

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

Смотрите пример ниже:

{
    "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 Отказ