我已经使用webpack在react网站中实现了fcm推送通知。
我已经在公共的中创建了firebase-messaging-sw.js
文件
// [START initialize_firebase_in_sw]
// Give the service worker access to Firebase Messaging.
// Note that you can only use Firebase Messaging here, other Firebase libraries
// are not available in the service worker.
importScripts('https://www.gstatic.com/firebasejs/5.8.3/firebase-app.js');
importScripts('https://www.gstatic.com/firebasejs/5.8.3/firebase-messaging.js');
// Initialize the Firebase app in the service worker by passing in the
// messagingSenderId.
firebase.initializeApp({ 'messagingSenderId': '332364892095' });
// Retrieve an instance of Firebase Messaging so that it can handle background
// messages.
const messaging = firebase.messaging();
// If you would like to customize notifications that are received in the
// background (Web app is closed or not in browser focus) then you should
// implement this optional method.
// [START background_handler]
messaging.setBackgroundMessageHandler((payload) => {
// Customize notification here
const notificationTitle = 'Background Message Title';
const notificationOptions = {
body: 'Background Message body.'
// icon: '/firebase-logo.png'
};
alert("called")
return self.registration.showNotification(notificationTitle,
notificationOptions);
});
// [END background_handler]
我在manifest.json
文件中添加了"gcm_sender_id": "103953800507"
。
我已经在src
文件夹中创建了init-fcm.js
文件
import * as firebase from "firebase";
var config = {
apiKey: "AIzaSyDuL6CgCdHYfsaAgw9Iom7CwLcCg29BS4E",
authDomain: "filmthere-fa6e0.firebaseapp.com",
databaseURL: "https://filmthere-fa6e0.firebaseio.com",
projectId: "filmthere-fa6e0",
storageBucket: "filmthere-fa6e0.appspot.com",
messagingSenderId: "332364892095",
};
export default firebase.initializeApp(config);
这是我的App.js
文件
import React, { Component } from 'react';
import '../App.css';
import Footer from './Footer'
import Main from './Main';
import firbaseApp from "./init-fcm";
import * as firebase from "firebase";
class App extends Component {
constructor(props) {
super(props);
this.state = {};
}
componentDidMount() {
if(firebase.messaging.isSupported()){
// messaging.onMessage(this.handleBgCb);
firbaseApp.messaging().requestPermission()
.then(() => {
firbaseApp.messaging().getToken()
.then(currentToken => {
if (currentToken) {
console.log('token',currentToken)
// sendTokenToServer(currentToken);
// updateUIForPushEnabled(currentToken);
} else {
// Show permission request.
console.log(
"No Instance ID token available. Request permission to generate one."
);
// Show permission UI.
// updateUIForPushPermissionRequired();
// setTokenSentToServer(false);
}
})
.catch(err => {
console.log("An error occurred while retrieving token. ", err);
// showToken('Error retrieving Instance ID token. ', err);
// setTokenSentToServer(false);
});
})
.catch(err => {
console.log("Unable to get permission to notify.", err);
});
}
}
render() {
return (
<div >
<Main />
<Footer />
}
</div>
);
}
}
export default App;
但在加载页面时会出现此错误。
FirebaseError:"消息:我们无法注册默认服务人员。位于的ServiceWorker脚本http://localhost:8090/firebase-messaging-sw.js用于scopehttp://localhost:8090/firebase-遇到云消息推送作用域安装过程中出现错误。(消息/失败的serviceworker regist
请帮我解决这个问题。
我也试图为它找到一个解决方案,但我在stackOverflow上一无所获,但在一个youtube视频中,那个家伙创建了文件名"firebase-messaging-sw.js";并修复了错误。这对我也很有效。
这是我获取时的错误
FirebaseError:消息:我们无法注册默认的服务工作者。未能为作用域('注册ServiceWorkerhttp://localhost:3000/firebase-带有脚本('的云消息推送作用域'(http://localhost:3000/firebase-messageaging sw.js(:该脚本具有不受支持的MIME类型('text/html'(。(消息传递/服务工作者注册失败(。