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

Question

我试着在我的React项目中使用Firebase FCM(使用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')

我知道这个问题与丢失的服务工作文件有关:firebase-messaging-sw.js,我添加到项目的根目录但我仍然得到同样的错误.

我不知道我在这里做错了什么,我已经设置了vanilla java脚本项目,它工作正常....

关于这个问题的任何想法？

Answer 1

对于那些使用create-react-app的人,你可以在公共文件夹中创建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);
  });
}

Answer 2

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

Answer 3

如果您使用的是Firebase，请进行响应，然后使用create react app搭建您需要做的事情：

• 创建（或移动）的文件公开文件夹命名为火力点的消息-SW-的.js
  • 这个问题是因为默认路由是您的根文件夹，但是由于脚手架使用webpack，您不能将简单文件放在根文件夹中，因此必须将其放置在公共文件夹中或在webpack开发服务器中进行一些配置以能够从其他路径加载该文件
• 注册您的服务人员并将该文件与Firebase关联
• 您可以在索引文件（引导程序）中执行此操作
• 检查您的服务人员是否已在浏览器中注册
• 对于chrome，您可以转至Devtools>应用程序> ServiceWorker并检查您是否已注册
  • 如果您有任何问题，请删除您的服务人员，然后重新注册

（基于@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);
    });
  }

希望有帮助！