React Web 应用程序未收到 Firebase 通知

Question

我正在使用

[email protected]

在 React Web 应用程序中实现前台通知，但我没有收到从 firebase 控制台发送的任何消息/通知。

在 Firebase 控制台中发送消息后，如下所示：

在我正在关注的教程中，他们产生了这个结果：

但是，当我进行测试时，没有收到任何消息并将其记录到控制台：

下面是我的 firebase 消息传递代码：

src/firebase.ts

import { useEffect } from 'react';
import firebase from "firebase/app";
import "firebase/messaging";
import { firebaseConfig } from './constants';

if (!firebase.apps.length) {
  firebase.initializeApp(firebaseConfig);
} else {
  firebase.app();
}

let messaging: firebase.messaging.Messaging;

if (typeof window !== "undefined") {
  if (firebase.messaging.isSupported()) {
    messaging = firebase.messaging();
  }
}

export const getMessagingToken = async () => {
  let currentToken = "";
  if (!messaging) return;
  try {
    currentToken = await messaging.getToken({
      vapidKey: process.env.REACT_APP_FIREBASE_FCM_VAPID_KEY, // already hard-coded in test code
    });
    console.log("FCM registration token", currentToken);
  } catch (error) {
    console.log("An error occurred while retrieving token. ", error);
  }
  return currentToken;
};

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

App.tsx

import { useEffect } from 'react';
import './App.css';
import { getMessagingToken, onMessageListener } from './firebase';
import logo from './logo.svg';

function App() {
  useEffect(() => {
    getMessagingToken();
  }, []);
  useEffect(() => {
    onMessageListener().then((data) => {
      console.log('Receive foreground: ', data);
    });
  });
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.tsx</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
    </div>
  );
}

export default App;

我查过：

• firebaseConfig

• vapidKey

• 在 Chrome 和 Firefox 中允许通知
• 在 Firebase 控制台中的

  Project settings > Web apps

  设置我的 Web 应用程序

这是我参考的教程，抱歉，如果不是英文，但我会将其留在这里以防万一https://viblo.asia/p/reactjs-push-notification-su-dung-firebase -云消息-yZjJYE9XJOE

Answer 1

您的 Firebase 消息传递设置似乎缺少 Service Worker 注册。您应该在应用程序中注册 Firebase Service Worker。像这样：

firebase-messaging-sw.js

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

firebase.initializeApp({
    apiKey: 'YOUR_API_KEY',
    authDomain: 'YOUR_AUTH_DOMAIN',
    projectId: 'YOUR_PROJECT_ID',
    storageBucket: 'YOUR_STORAGE_BUCKET',
    messagingSenderId: 'YOUR_MESSAGING_SENDER_ID',
    appId: 'YOUR_APP_ID',
    measurementId: 'YOUR_MEASUREMENT_ID'
});

const messaging = firebase.messaging();

src/firebase.ts

export const registerServiceWorker = () => {
  if ('serviceWorker' in navigator) {
    navigator.serviceWorker.register('/firebase-messaging-sw.js')
      .then((registration) => {
        messaging.useServiceWorker(registration);
      }).catch((err) => {
        console.error('Service worker registration failed:', err);
      });
  }
};

应用程序.tsx

import { useEffect } from 'react';
import './App.css';
import { getMessagingToken, onMessageListener, registerServiceWorker } from './firebase';
import logo from './logo.svg';

function App() {
  useEffect(() => {
    registerServiceWorker();
    getMessagingToken();
  }, []);

  // ...
}

export default App;

不要忘记将 firebase-messaging-sw.js 文件放在 React 项目的 public 文件夹中。这将确保它得到正确的服务。

让我知道进展如何！