Облачный обмен сообщениями Firebase с React

Привлекайте и развивайте свое веб-приложение с помощью push-уведомлений (Firebase Cloud Messaging) и React

Основы ФКМ

✔️FCM — это бесплатный сервис, который позволяет вам отправлять сообщения на устройства ваших пользователей, чтобы они могли открыть ваше приложение.

✔️Они должны дать согласие на получение сообщений.

✔️Сообщения можно отправлять на отдельные устройства, группы устройств или устройства, «подписанные» на темы.

Вы можете проверить мое введение в FCM с React с помощью этого видеоурока, который я создал.

Вводные шаги

1️⃣Зарегистрируйте экземпляр пользовательского приложения на серверах Firebase Cloud Messaging Server.

2️⃣Зарегистрируйте на своем сервере устройства по: id, группе или теме.

✔️95% сообщений доставляются, открываемость высокая, менее чем за 250 мс.

Первые шаги

1️⃣ Создайте проект Firebase.

2️⃣Включите Cloud Messaging API (Legacy) и Firebase Cloud Messaging API (V1) в настройках проекта -> Cloud Messaging. Вам нужно будет включить облачный обмен сообщениями в Google Cloud Console.

3. Создайте сертификат Web Push. Вам понадобится это как VAPID_KEY позже в коде реакции.

firebase.js

Добавьте свой объект конфигурации firebase.

Здесь вы должны экспортировать объект приложения, чтобы использовать его в своем App.js.

// Import the functions you need from the SDKs you need
import { initializeApp } from "firebase/app";

// TODO: Add SDKs for Firebase products that you want to use
// https://firebase.google.com/docs/web/setup#available-libraries

// Your web app's Firebase configuration
// For Firebase JS SDK v7.20.0 and later, measurementId is optional
const firebaseConfig = {

};

// Initialize Firebase
const app = initializeApp(firebaseConfig);

export default app;

App.js

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

Мы используем react-toastify, чтобы стиль уведомлений выглядел красиво.

import './App.css';
import { getAnalytics } from "firebase/analytics";
import { getMessaging, getToken, onMessage } from "firebase/messaging";
import {getAuth, signInAnonymously} from "firebase/auth"
import {ToastContainer, toast} from 'react-toastify'
import app from './firebase'; 
import "react-toastify/dist/ReactToastify.css"
import React from 'react';
const analytics = getAnalytics(app);
function App() {
  const singUpAnonymously= ()=>{
    signInAnonymously(getAuth(app)).then(user=> console.log(user));
  }
 
const messaging = getMessaging(app);
const activateMessages = async() => {
  const token = await getToken(messaging, {
    vapidKey: "YOUR_VAPID_KEY"
  }).catch(error => console.log("error generatin token"))

  if (token) console.log("token", token);
  if (!token) console.log("no token")

}
//We only run once using react hook useEffect
React.useEffect(()=>{
  singUpAnonymously();
  activateMessages();
  onMessage(messaging, message=>{
    console.log("your message: ", message)
   
    toast(message.notification.title)
   // console.log("payload.data.url"+message.data.url)
//window.location.replace("http://localhost:3000/"+message.data.url)
  })


})




  return (
    <div>
    <h1>Firebase Cloud Messages</h1>
    <ToastContainer/>
    <button onClick={singUpAnonymously}>Log In</button>
    <button onClick={activateMessages}>Generate Token</button>
    </div>
  );
}

export default App;

общедоступный/firebase-сообщения-sw.js

Работник службы может получать событие onMessage, приложение должно определить этого работника службы обмена сообщениями Firebase.

importScripts("https://www.gstatic.com/firebasejs/9.17.1/firebase-app-compat.js")
importScripts("https://www.gstatic.com/firebasejs/9.17.1/firebase-messaging-compat.js")
importScripts("https://www.gstatic.com/firebasejs/9.17.1/firebase-auth-compat.js")


// https://firebase.google.com/docs/web/setup#available-libraries

// Your web app's Firebase configuration
// For Firebase JS SDK v7.20.0 and later, measurementId is optional
const firebaseConfig = {
  
};

// Initialize Firebase
const app =firebase.initializeApp(firebaseConfig);
const messaging = firebase.messaging(app);
messaging.onBackgroundMessage(payload =>{
    console.log("you received a message when you haven't the app active");
    console.log(payload)

    const notificationTitle = payload.notification.title;
    const notificationOptions = {
        body: payload.notification.body,
        icon: "/logo192.png"
    }

    //added for auth for writing to database that message was delivered
  /*  const singUpAnonymously= ()=>{
        firebase.auth(app).signInAnonymously().then(user=> console.log("us"+firebase.auth().currentUser.uid));
      }
singUpAnonymously();*/

    return self.registration.showNotification(
        notificationTitle,
        notificationOptions
    )
})

Полный код этого приложения React, которое регистрируется в FCM и получает сообщение, можно найти на моем GitHub.

Заключение

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

Дополнительные материалы на PlainEnglish.io.

Подпишитесь на нашу бесплатную еженедельную рассылку новостей. Подпишитесь на нас в Twitter, LinkedIn, YouTube и Discord .

Заинтересованы в масштабировании запуска вашего программного обеспечения? Ознакомьтесь с разделом Схема.