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

IT技术 javascript reactjs firebase firebase-cloud-messaging
2021-05-13 04:58:04

我试图让 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，我将它添加到项目的根目录，但我仍然遇到相同的错误。

我不确定我在这里做错了什么，我已经设置了 vanilla java 脚本项目并且它工作正常......

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

4个回答

对于那些使用 create-react-app 的人，您可以创建firebase-messaging-sw.jsinsidepublic文件夹，然后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 并使用create react app搭建脚手架，你需要做的事情：

  • 在公共文件夹中创建（或移动）一个文件，命名为 firebase-messaging-sw-.js
    • 这个问题是因为默认路由是你的根文件夹，但是由于脚手架使用webpack你不能把简单的文件放在你的根文件夹中，它必须放在你的公共文件夹中或者在你的 webpack 开发服务器中做一些配置能够从不同的路径加载该文件
  • 注册您的 Service Worker 并将该文件与 firebase 相关联
  • 您可以在索引文件（引导程序）中执行此操作
  • 检查您的 Service Worker 是否已在浏览器中注册
  • 对于 chrome，你去 Devtools > Application > ServiceWorker 并检查你的是否注册
    • 如果您有任何问题，请删除您的 Service Worker 并重新注册

（基于@Humble 学生的回答）

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.

其它你可能感兴趣的问题
上一篇Endstops 不会使用 Marlin 固件触发 下一篇Ultimaker 原装 X 轴不移动 - 可能是电子问题