Привлекайте и развивайте свое веб-приложение с помощью 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 .
Заинтересованы в масштабировании запуска вашего программного обеспечения? Ознакомьтесь с разделом Схема.