Cách triển khai thông báo đẩy trong React bằng Firebase

Định cấu hình Firebase và Dịch vụ nhắn tin qua đám mây

Trụ sở của bạn Thiết lập dự án trên bảng điều khiển dành cho nhà phát triển và sao chép đối tượng cấu hình Firebase được cung cấp. bên trong src thư mục, tạo mới firebase.js tập tin và thêm mã sau đây.

 import { initializeApp } from "firebase/app";
import { getMessaging, getToken, onMessage } from 'firebase/messaging';
const firebaseConfig = {
  apiKey: "",
  authDomain: "",
  projectId: "",
  storageBucket: "",
  messagingSenderId: "",
  appId: ""
};
const app = initializeApp(firebaseConfig);
const messaging = getMessaging(app); 

Thay thế ở trên firebaseConfig đối tượng với đối tượng bạn đã sao chép từ Thiết lập dự án trang. Mã này sẽ thiết lập phiên bản Firebase và khởi tạo đối tượng nhắn tin trên đám mây để bật chức năng FCM trong ứng dụng của bạn.

Quản lý yêu cầu cấp phép người dùng của thông báo

Để cho phép các ứng dụng React nhận thông báo đẩy từ dịch vụ Nhắn tin qua đám mây của Firebase, bạn cần xử lý các quyền của người dùng.

Điều này liên quan đến việc xác định và gọi các xin phep phương thức được cung cấp bởi đối tượng nhắn tin mà bạn đã cấu hình trước đó. Nó đảm bảo rằng bạn xử lý đúng phản hồi của người dùng đối với các yêu cầu cấp phép của thông báo.

Thêm đoạn mã sau vào firebase.js file sau khi khởi tạo đối tượng nhắn tin.

 export const requestPermission = () => {
    console.log("Requesting User Permission......");
    Notification.requestPermission().then((permission) => {
      if (permission === "granted") {
        console.log("Notification User Permission Granted."); 
        return getToken(messaging, { vapidKey: `Notification_key_pair` })
          .then((currentToken) => {
            if (currentToken) {
              console.log('Client Token: ', currentToken);
            } else {
              
              console.log('Failed to generate the app registration token.');
            }
          })
          .catch((err) => {
            console.log('An error occurred when requesting to receive the token.', err);
          });
      } else {
        console.log("User Permission Denied.");
      }
    });
  }
requestPermission(); 

Mã được cung cấp yêu cầu quyền của người dùng đối với thông báo và xử lý phản hồi về quyền. Nếu được cấp quyền, nó sẽ tiến hành lấy mã thông báo đăng ký cho ứng dụng bằng cách sử dụng Nhận được mã thông báo chức năng.

Mã thông báo đăng ký đóng vai trò là mã định danh cho thiết bị hoặc trình duyệt nhận thông báo. Sau đó, bạn có thể sử dụng mã thông báo này để thiết lập chiến dịch thông báo trong trang cài đặt Nhắn tin qua đám mây của Firebase.

Đảm bảo rằng bạn thay thế trình giữ chỗ Notification_key_pair với cặp khóa thực mà bạn đã tạo trước đó trong Cấu hình web phần.

Xác định người nghe thông báo

Để xử lý mọi loại thông báo đến, cần phải thiết lập trình nghe tin nhắn để theo dõi các thông báo đến và chức năng gọi lại để kích hoạt bất kỳ sự kiện nhắn tin nào.

trong bạn firebase.js tập tin, thêm mã sau đây.

 export const onMessageListener = () =>
  new Promise((resolve) => {
    onMessage(messaging, (payload) => {
      resolve(payload);
    });
}); 

Chức năng này thiết lập trình nghe tin nhắn dành riêng cho thông báo đẩy. Các onMessage chức năng bên trong onMessageListener được kích hoạt bất cứ khi nào ứng dụng nhận được thông báo đẩy và đang được lấy nét.

Khi nhận được thông báo, tải trọng tin nhắn sẽ chứa dữ liệu liên quan được liên kết với thông báo, chẳng hạn như tiêu đề và nội dung của tin nhắn.

Xác định nhân viên dịch vụ nhắn tin Firebase

FCM yêu cầu nhân viên dịch vụ Nhắn tin Firebase xử lý các thông báo đẩy đến.

Service worker là một tệp JavaScript chạy trong nền và xử lý thông báo đẩy—tệp này cho phép ứng dụng web nhận và hiển thị thông báo, ngay cả khi người dùng đã đóng ứng dụng hoặc chuyển sang tab hoặc cửa sổ khác.

bên trong /công cộng thư mục, tạo mới firebase-nhắn tin-sw.js tập tin và bao gồm đoạn mã sau.

 importScripts("https://www.gstatic.com/firebasejs/9.0.0/firebase-app-compat.js");
importScripts("https://www.gstatic.com/firebasejs/9.0.0/firebase-messaging-compat.js");
 
const firebaseConfig = {
    "configuration information"
  };
firebase.initializeApp(firebaseConfig);
const messaging = firebase.messaging();
messaging.onBackgroundMessage(function(payload) {
  console.log('Received background message ', payload);
  const notificationTitle = payload.notification.title;
  const notificationOptions = {
    body: payload.notification.body,
  };
  self.registration.showNotification(notificationTitle,
    notificationOptions);
}); 

Đoạn mã này thiết lập một nhân viên dịch vụ cho Firebase Cloud Messaging trong ứng dụng React, cho phép xử lý và hiển thị thông báo.

Tạo một thành phần thông báo

Tạo một cái mới thành phần/Thông báo.js tập tin trong /src thư mục và thêm mã sau đây.

 import React, { useState, useEffect } from 'react';
import { Toaster, toast } from 'react-hot-toast';
import { requestPermission, onMessageListener } from '../firebase';
function Notification() {
  const [notification, setNotification] = useState({ title: '', body: '' });
  useEffect(() => {
    requestPermission();
    const unsubscribe = onMessageListener().then((payload) => {
      setNotification({
        title: payload?.notification?.title,
        body: payload?.notification?.body,
      });
      toast.success(`${payload?.notification?.title}: ${payload?.notification?.body}`, {
        duration: 60000, 
        position: 'top-right', section of the browser page
      });
});
    return () => {
      unsubscribe.catch((err) => console.log('failed: ', err));
    };
  }, []);
  return (
    <div>
      <Toaster />
    </div>
  );
}
export default Notification; 

Mã này định nghĩa một thành phần xử lý thông báo đẩy. Nó sử dụng các reac-hot-toast thư viện để hiển thị thông báo cho người dùng.

Thành phần yêu cầu quyền của người dùng, lắng nghe các tin nhắn đến bằng cách sử dụng onMessageListener và theo mặc định sẽ hiển thị thông báo chúc mừng với tiêu đề và nội dung nhận được trong khoảng thời gian một phút ở phần trên cùng bên phải của trang trình duyệt. Bạn có thể tùy chỉnh thêm thông báo với sự trợ giúp của tài liệu chính thức về react-hot-toast và thuộc tính vị trí CSS.

Cuối cùng, cập nhật các App.js tập tin để nhập Thông báo thành phần.

 import './App.css';
import Notification from './components/Notification';
function App() {
  return (
    <div className="App">
      <header className="App-header"> 
      <Notification />
      </header> 
    </div>
  );
}
export default App; 

Kiểm tra tính năng thông báo đẩy

Hãy tiếp tục và khởi động máy chủ phát triển và mở http://locahlhost:3000 trên trình duyệt của bạn để truy cập ứng dụng. Bạn sẽ nhận được cửa sổ bật lên sau để cho phép ứng dụng nhận thông báo.

Nhấp chuột Cho phép. Các mã thông báo khách hàng nên được tạo và đăng nhập vào bảng điều khiển trình duyệt. Bạn sẽ sử dụng mã thông báo để gửi các chiến dịch thông báo đến ứng dụng React của mình.

Sao chép mã thông báo khách hàng và đi tới bảng điều khiển dành cho nhà phát triển của Firebase Tổng quan dự án trang. Nhấn vào Nhắn tin qua đám mây thẻ dưới Phát triển và thu hút khán giả của bạn phần.

Nhấp chuột Tạo chiến dịch đầu tiên của bạnlựa chọn Tin nhắn thông báo Firebase, đồng thời cung cấp tiêu đề và nội dung cho thông báo của bạn. Bên dưới Xem trước thiết bị phần, bấm vào Gửi tin nhắn kiểm tra.

Dán và thêm mã thông báo ứng dụng khách trong cửa sổ bật lên sau đó và nhấp vào Bài kiểm tra để gửi thông báo đẩy.

Nếu bạn đang sử dụng ứng dụng, bạn sẽ nhận được thông báo đẩy. Nếu không, bạn sẽ nhận được thông báo nền.

Gửi thông báo đẩy bằng dịch vụ nhắn tin đám mây Firebase

Thông báo đẩy là một tính năng có giá trị để nâng cao trải nghiệm người dùng cho cả ứng dụng web và thiết bị di động. Hướng dẫn này nêu bật các bước để tích hợp thông báo đẩy bằng Firebase, bao gồm xử lý quyền của người dùng và thiết lập trình nghe tin nhắn.

Bằng cách tận dụng API nhắn tin qua đám mây của Firebase, bạn có thể cung cấp các bản cập nhật kịp thời và thông báo được cá nhân hóa một cách hiệu quả cho các ứng dụng React của mình.