将 Firebase FCM 添加到 reactjs 应用程序

Posted 2023-02-22

【中文标题】将 Firebase FCM 添加到 reactjs 应用程序

【英文标题】：Adding Firebase FCM to reactjs app

【发布时间】：2018-03-13 07:55:20

【问题描述】：

我正在尝试在我的 reactjs 应用中向用户发送推送通知。我添加了firebase，请求用户获得通知权限。这行得通。

但现在我想注册设备令牌。但它给了我错误：

消息：我们无法注册默认服务工作者。注册 ServiceWorker 失败：脚本具有不受支持的 MIME 类型 ('text/html')。 （消息传递/失败的服务工作者注册）

在哪里添加firebase-messaging-sw.js 文件？如何在反应应用程序中注册服务人员？

这是我用来注册设备令牌的代码：

messaging.getToken()
      .then(function(currentToken) 
        if (currentToken) 
         // sendTokenToServer(currentToken);
         // updateUIForPushEnabled(currentToken);
         else 
          // Show permission request.
          console.log('No Instance ID token available. Request permission to generate one.');
          // Show permission UI.
        //  updateUIForPushPermissionRequired();
        //  setTokenSentToServer(false);
        
      )
      .catch(function(err) 
        console.log('An error occurred while retrieving token. ', err);
        //showToken('Error retrieving Instance ID token. ', err);
        //setTokenSentToServer(false);
      );

注意：它不是 react native 而是一个网络应用程序。

【参考方案1】：

我已将 firebase-messaging-sw.js 文件添加到我的公共目录（带有 index.html）文件中。这解决了问题。

在post查看更多信息

【讨论】：

Noman Ali 我有同样的问题（我对 web 完全陌生），你能解释/分享你在 app.js 和 firebase-messaging-sw.js 中的代码吗？你注册了你的 service worker 了吗？

App.js ，祝兄弟好运。注意：您需要设置云功能才能发送推送通知。

你是如何注册“firebase-messaging-sw.js”的？当我尝试注册该文件时，我总是遇到同样的错误。

你能告诉我你把你的firebase-messaging-sw.js文件放在哪里了吗？

谢谢老兄，我什至不需要注册。只能公之于众。我试图把它放在我所有的 app.js 和索引的 /src 和 /root 中，但显然它总是选择错误的路径，即使使用 .env 也是如此。太浪费时间了。