Firebase FCM React项目问题- Firebase -messaging-sw.js类型错误

Firebase FCM React project issue - firebase-messaging-sw.js wrong type?

本文关键字：Firebase js 类型 错误 -messaging-sw 问题 FCM React 项目      更新时间：2023-09-26

我想让Firebase FCM在我的React项目中工作(使用webpack)

当尝试使用:

getToken()
 messaging.requestPermission()
  .then(function() {
    console.log('Notification permission granted.');
    return messaging.getToken();
  })
  .then(function(token) {
    console.log('token')
  })
  .catch(function(err) {
    console.log('Unable to get permission to notify.', err);
  });

异常的抛出方式如下:

browserErrorMessage: "Failed to register a ServiceWorker: The scrip 
has an unsupported MIME type ('text/html')

我知道这个问题与丢失的service worker文件有关:firebase-messaging-sw.js，我将其添加到项目的根目录，但我仍然得到相同的错误。

我不知道我在这里做错了什么，我已经设置了香草java脚本项目，它工作得很好....

对这个问题有什么看法吗?

对于那些使用create-react-app的人，你可以在public文件夹中创建firebase-messaging-sw.js，在index.js文件夹中添加:

if ('serviceWorker' in navigator) {
  navigator.serviceWorker.register('../firebase-messaging-sw.js')
  .then(function(registration) {
    console.log('Registration successful, scope is:', registration.scope);
  }).catch(function(err) {
    console.log('Service worker registration failed, error:', err);
  });
}

如果你使用的是create-react-app。将firebase-messaging-sw.js添加到公共文件夹中并重新构建。Firebase-messaging-sw.js可以是一个空文件

如果你正在使用firebase, react和你脚手架创建react app你需要做的事情:

  • 在public文件夹中创建(或移动)一个文件，命名为firebase-messaging-sw-.js
      这个问题是因为默认路由是你的根文件夹，但是因为脚手架使用webpack你不能把简单的文件放在你的根文件夹，它必须放在你的公共文件夹中，或者在你的webpack开发服务器上做一些配置，以便能够从不同的路由
    • 加载该文件
  • 注册你的service worker并将该文件关联到firebase
  • 你可以在索引文件(bootstrap)
  • 检查service worker是否已经在浏览器中注册了
  • chrome你去Devtools> Application> ServiceWorker，检查你的注册
    • 如果你有任何问题，删除你的service worker并重新注册它

    • (基于@Humble Student的回答)

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

    希望有帮助!

    为了接收消息，您需要创建一个名为firebase-messaging-sw.js的文件。请参阅Firebase文档中的"当web应用程序位于前台时处理消息"一节:

    为了接收onMessage事件，你的应用必须在firebase-messaging-sw.js中定义Firebase消息服务worker。

    这里的问题是我的项目设置没有'看到' service worker文件

    因为我使用节点与express, firebase-messaging-sw.js必须是地方，express正在挑选静态内容。在我的例子中:

    server.use(Express.static(path.join(__dirname, '../..', 'dist')));

    表示我必须将firebase-messaging-sw.js放入/dist文件夹。

    我的问题和原来的问题完全一样，在过去的3天里，我已经尝试了各种解决方案，但没有任何运气。我正在使用ReactJS和Webpack。我试图在我的根文件夹中包含一个名为firebase-messaging-sw.js的文件，但它什么也不做。

    有人，请帮助，因为firebase通知是我正在开发的项目中非常需要的功能…

    编辑。

    我通过安装一个名为sw-precache-webpack-plugin的webpack插件来解决注册问题。这个插件会自动在你的构建目录中生成一个service-worker文件。

    相关文章：