我已经在我的React代码中集成了Firebase。Firefox中显示推送通知,onMessage()
和onBackgroundMessage()
方法在Firefox中可以正常工作,但在Chrome中不能正常工作。我在App.js中初始化了firebase(加载所有组件的主组件)。我已经在我的公共文件夹中包含了firebase-messaging-sw.js。请让我知道,如果我需要添加/减去任何从我的代码。
我已经在本地主机和安全域上测试了这段代码。
这是我的firebase-messaging-sw.jsimportScripts('https://www.gstatic.com/firebasejs/8.2.1/firebase-app.js');
importScripts('https://www.gstatic.com/firebasejs/8.2.1/firebase-messaging.js');
firebase.initializeApp({
databaseURL: 'databaseURL.firebaseio.com',
apiKey: "apiKey",
authDomain: "authDomain.firebaseapp.com",
projectId: "projectId",
storageBucket: "storageBucket",
messagingSenderId: "messagingSenderId",
appId: "appId"
});
const initMessaging = firebase.messaging();
initMessaging.onBackgroundMessage(function(payload) {
console.log('[firebase-messaging-sw.js] Received background message ', payload);
// Customize notification here
const notificationTitle = 'Background Message Title';
const notificationOptions = {
body: 'Background Message body.',
// icon: '/firebase-logo.png'
};
self.registration.showNotification(notificationTitle,
notificationOptions);
});
App.js
代码import firebase from './firebase';
export class App extends Component {
callFirebase = () => {
try {
const messaging = firebase.messaging();
messaging.requestPermission().then(() => {
return messaging.getToken({ vapidKey: "vapidKey" })
})
.then((token) => {
console.log("Connected To FIREBASE")
console.log("Token: ", token);
this.props.firebaseToken(token);
})
.catch(e => {
this.props.firebaseToken(null);
console.log("Err from firebase", e)
})
messaging.onMessage(function (payload) {
console.log("Message received. ", payload);
// ...
});
}
catch (e) {
console.log("Error from firebase: ", e);
}
}
componentDidMount() {
this.callFirebase();
}
render() {
return (
<Code/>
);
}
}
export default (App);
这可能是防火墙配置的问题,您可以尝试使用不同的互联网,如果它工作,那么您需要将此配置添加到防火墙。
接收通知:
您需要根据文档打开5228,5229和5230。
原答案:link