在React JS应用程序中生成Firebase令牌问题

Question

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




// Initialize the Firebase app in the service worker by passing the generated config
const firebaseConfig = {
  apiKey: "AIzaSyDk4dYeydr4q3npWx4iqKWejq33r1E",
  authDomain: "tengage-33e12.fireeapp.com",
  projectId: "tengage-33e12",
  storageBucket: "tengage-33e12.appspot.com",
  messagingSenderId: "1076165210",
  appId: "1:1076165210:web:c9560924940a068ce3",
  measurementId: "G-5FMCR8M0G8",
};

firebase.initializeApp(firebaseConfig);

// Retrieve firebase messaging
const messaging = firebase.messaging();

messaging.onBackgroundMessage(function (payload) {
  console.log(" message ", payload);

  const notificationTitle = payload.notification.title;
  const notificationOptions = {
    body: payload.notification.body,
  };

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

我有一个React JS项目，必须在其中集成FCM。

我在公共文件夹中添加了firebase-messaging-sw.js。

并添加了Firebbase依赖性。

当我试图获得令牌时，我会遇到错误。

SecurityError：未能使用脚本（'http：// localhost：3005/firebase-messaging-sw.js'）注册Scope（'http：// localhost：3005/'）的服务工作人员： （'text/html'）。

但是，当我试图在新创建的应用程序中获得令牌时，借助同样的firebase凭据。

Answer 1

提到的错误可能是由于一些原因而发生的，其中之一可能是设计模式或语法中的错误。但是，这意味着最初对未知文本文件的任何请求都会被重定向到index.html，因此即使它实际上是JavaScript或SVG或其他其他类型的纯文本文件，也要使用MIME类型的MIME类型返回。
例如，请参阅下面：

// Load React App 
    // Serve HTML file for production
      if (env.name === "production")  {
            app.get("*", function response(req, res) {
                res.sendFile(path.join(__dirname, "public""index.html"));
          }); 
  }

您可以尝试在通配符路由之前添加service-worker.js的特定路由：

    app.get("/service-worker.js", (req, res) => {
         res.sendFile(path.resolve(__dirname, "public", "service-worker.js")); 
      }); 
    app.get("*", function response(req, res) { 
         res.sendFile(path.join(__dirname, "public", "index.html")); 
     });

现在，当浏览器寻找servication-worker.js时，它将使用它返回正确的哑剧类型。
（请注意，如果您尝试在通配符之后添加services-worker.js路线，则它将无法使用，因为通配符路线将覆盖。）

您还可能需要检查url

您也可以参考下面的链接以获取更多见解：
[1]： https://firebase.google.com/docs/云 - 密码/js/client＃access_the_registration_token
[2]： https://firebase.google.com/docs/docs/docs/docs/cloud-messaging/服务器
[3]： FCM GetToken（）未能注册服务工作人员的范围错误flutter web