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，请进行反应，并使用创建反应应用进行脚手架：

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

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

希望有帮助！

Answer 4

要接收消息，您需要创建一个名为firebase-messaging-sw.js的文件。请参阅Firebase文档中的Handle messages when your web app is in the foreground部分：

要接收onMessage事件，您的应用必须在firebase-messaging-sw.js中定义Firebase消息服务工作者。

Answer 5

这里的问题是我的项目设置没有“看到”服务工作者文件。

由于我正在使用带有express的节点，所以firebase-messaging-sw.js必须放在express正在拾取静态内容的地方。在我的案例中：

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

意味着我必须将firebase-messaging-sw.js放入/ dist文件夹。

Answer 6

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

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

EDIT。

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

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

6 个答案: