我想让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并重新注册它
(基于@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文件。