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

Posted 2023-02-22

【中文标题】Firebase FCM React 项目问题 - firebase-messaging-sw.js 类型错误？

【英文标题】：Firebase FCM React project issue - firebase-messaging-sw.js wrong type?

【发布时间】：2017-03-29 11:09:00

【问题描述】：

我试图让 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 脚本项目，它工作正常....

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

【参考方案1】：

对于使用 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);
  );

【参考方案2】：

如果您使用的是 firebase，请使用 react 并使用 create react app 搭建您需要做的事情：

在

public

文件夹中创建（或移动）一个文件，将其命名为 firebase-messaging-sw-.js 这个问题是因为默认路由是你的根文件夹，但是由于脚手架使用

webpack

你不能把简单的文件放在你的根文件夹里，它必须放在你的公共文件夹中或者在您的 webpack 开发服务器中进行一些配置，以便能够从不同的路径加载该文件 register您的服务人员并将该文件与 firebase 相关联 您可以在索引文件（引导程序）中执行此操作 检查您的 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);
    );
  

希望有帮助！

【参考方案3】：

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

【参考方案4】：

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

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

编辑。

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

【讨论】：

这没有提供问题的答案。您可以search for similar questions，或参考页面右侧的相关和链接问题找到答案。如果您有一个相关但不同的问题，ask a new question，并包含指向此问题的链接以帮助提供上下文。见：Ask questions, get answers, no distractions

我的错，我只是想让这个问题得到关注以获得可能的解决方案。我应该删除答案并将其添加为评论或其他内容吗？

这个帖子应该被删除，是的。关于注意力：最好的方法是setting a bounty，但这需要 75 声望。像这样的帖子和 cmets 在这方面不太可能有帮助。

将 service worker 放入提供静态内容的文件夹中？

【参考方案5】：

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

由于我将 node 与 express 一起使用，因此 firebase-messaging-sw.js 必须位于 express 获取静态内容的位置。在我的情况下：

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

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

【讨论】：

它在使用 create-react-app 工具做出反应时也对我有用。只需将 sw 文件放在 /public

【参考方案6】：

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

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

【讨论】：

在反应中，调用import firebase from 'firebase'时不是服务处理了吗？看起来 firebase-messaging-sw.js 导入了我已经导入的内容....你能详细说明一下吗？