在 React js 中使用 Firebase 云消息服务工作线程和 env

Question

我正在尝试从 Firebase 云消息传递注册后台 Web 服务，以在我的 ReactJS 应用程序中接收推送通知。

这里需要注意的是：在

firebase-messaging-sw.js

文件中，firebase 的配置需要根据该项目所处的环境而有所不同，例如：dev、staging 或 prod。由于我的 Reactjs 项目中的 .env 文件中已经包含此信息，因此我想使用它。

由于我无法直接使用公共文件夹中 .env 中的值，因此我正在执行以下操作，尽管它不起作用

#src/index.js


// register firebase push notification service worker with env variable
if ('serviceWorker' in navigator) {
  navigator.serviceWorker.register('/firebase-messaging-sw.js', {
    scope: '/'
  })
  .then(function(registration) {
    console.log('Registration successful, scope is:', registration.scope);
    // Pass environment variables to the service worker
    registration.active.postMessage({
      apiKey: process.env.REACT_APP_FIREBASE_ANALYTICS_API_KEY,
      authDomain: process.env.REACT_APP_FIREBASE_ANALYTICS_AUTH_DOMAIN,
      projectId: process.env.REACT_APP_FIREBASE_ANALYTICS_PROJECT_ID,
      storageBucket: process.env.REACT_APP_FIREBASE_ANALYTICS_STORAGE_BUCKET,
      messagingSenderId: process.env.REACT_APP_FIREBASE_ANALYTICS_MESSAGING_SENDER_ID,
      appId: process.env.REACT_APP_FIREBASE_ANALYTICS_APP_ID,
      measurementId: process.env.REACT_APP_FIREBASE_ANALYTICS_MEASUREMENT_ID,
    });
  })
  .catch(function(err) {
    console.log('Service worker registration failed, error:', err);
  });
}

#src/App.js


useEffect(() => {
    navigator.serviceWorker.ready.then(() => {
      generateCloudMessagingToken();
  
      if (Notification.permission === "granted") {
        onMessage(messaging, (payload) => {
          console.log("MESSAGING: ", payload);
          toast.success(payload.notification.title);
        });
      }
    });
  }, [Notification.permission]);

最后，这是

firebase-messaging-sw.js

文件：

// firebase-messaging-sw.js
importScripts('https://www.gstatic.com/firebasejs/8.10.1/firebase-app.js');
importScripts('https://www.gstatic.com/firebasejs/8.10.1/firebase-messaging.js');

self.addEventListener('message', (event) => {
  const {
    apiKey,
    authDomain,
    projectId,
    storageBucket,
    messagingSenderId,
    appId,
    measurementId
  } = event.data;

  firebase.initializeApp({
    apiKey: apiKey,
    authDomain: authDomain,
    projectId: projectId,
    storageBucket: storageBucket,
    messagingSenderId: messagingSenderId,
    appId: appId,
    measurementId: measurementId,
    // databaseURL: 'https://project-id.firebaseio.com', // Uncomment if needed
  });

  // Retrieve an instance of Firebase Messaging
  const messaging = firebase.messaging();

  // Listen for background messages
  messaging.onBackgroundMessage((payload) => {
    console.log('[firebase-messaging-sw.js] Received background message ', payload);

    // Customize notification here
    const notificationTitle = payload.notification.title;
    const notificationOptions = {
      body: payload.notification.body,
      icon: payload.notification.image
    };

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

也许这会有所帮助。允许通知权限后，我的浏览器中出现以下错误：

Failed to execute 'subscribe' on 'PushManager': Subscription failed - no active Service Worker
    at getPushSubscription (http://localhost:3000/static/js/bundle.js:677620:37)
    at async getTokenInternal (http://localhost:3000/static/js/bundle.js:677537:28)
    at async generateCloudMessagingToken (http://localhost:3000/static/js/bundle.js:23462:19)

Answer 1

您好，这里是使用 React Js 实现 firebase 消息（推送通知）的最终代码。请按照以下步骤操作..

Steps-1

：在项目根位置运行

npm i firebase

此命令。

Step-2

：打开

App.js

文件代码并添加到文件顶部，在

import "./App.css";

这一行下方。

import { getToken, onMessage } from "firebase/messaging"; import { messaging } from "./firebase";

将下面提到的代码添加到App功能中

 const [notificaitonData, setNotificationData] = useState({
    body: "",
    title: "",
  });
  const [showNotification, setShowNotification] = useState(false);
  useEffect(() => {
    const requestPermission = async () => {
      try {
        const permission = await Notification.requestPermission();
        if (permission === "granted") {
          console.log("Notification permission granted.");
          // // Get the token
          const deviceToken = await getToken(messaging, {
            vapidKey:
              "ENTER_YOUR_KEY",
          });
          console.log("Device token:", deviceToken);
          // You can now send this token to your server to subscribe the user to your notifications
        } else {
          console.error("Notification permission not granted.");
        }
      } catch (error) {
        console.error("requestPermission", error);
      }
    };
    requestPermission();
    // Handle incoming messages
    onMessage(messaging, (payload) => {
      console.log("Message received. ", payload);
      // Customize your UI notification here
      setNotificationData({
        ...notificaitonData,
        body: payload?.notification?.body,
        title: payload?.notification?.title,
      });
      setShowNotification(true);
    });
  }, []);

  if ("serviceWorker" in navigator) {
    navigator.serviceWorker
      .register("/firebase-messaging-sw.js")
      .then((registration) => {
        console.log(
          "Service Worker registered with scope:",
          registration.scope
        );
      })
      .catch((error) => {
        console.error("Service Worker registration failed:", error);
      });
  }

将此代码添加到return中

   {showNotification ? (
        <>
          <div className="alert alert-secondary row notification notificationSettings">
            <div className="col-xl-12 text-left">
              <img
                className="w-50 text-center"
                src="https://saffronmeta.com/assets/images/sft.svg"
              />
              <p className="notificaiton-title mb-2">
                <strong>{notificaitonData?.title}</strong>
              </p>
              <p>{notificaitonData?.body}</p>
              <button
                className="btn btn-secondary btn-sm"
                onClick={(e) => {
                  setShowNotification(false);
                }}
              >
                Close
              </button>
            </div>
          </div>
        </>
      ) : null} 

Step-3

: 在根目录中创建一个文件

firebase.js

文件名。

将以下代码

firebase.js

粘贴到该文件中并更新您的 Firebase 配置键设置。

// src/firebase.js
import firebase from "firebase/compat/app";
import { getMessaging, getToken } from "firebase/messaging";

const firebaseConfig = {
  apiKey: "API_KEY",
  authDomain: "DOMAIN",
  projectId: "projectId",
  storageBucket: "storageBucket",
  messagingSenderId: "messagingSenderId",
  appId: "appId",
  measurementId: "measurementId",
};
// Initialize Firebase
const app = firebase.initializeApp(firebaseConfig);
const messaging = getMessaging(app);
export { app, messaging, getToken };