[英]Firebase Cloud Messaging in a google chrome extension
I'm currently developing a google chrome extension where I need to receive push notifications.我目前正在开发一个谷歌浏览器扩展,我需要在其中接收推送通知。 For that, I use Firebase Cloud messaging.
为此,我使用 Firebase 云消息传递。
The token is correctly send and I can send a notification with postman which i receive on my google chrome.令牌已正确发送,我可以使用我在谷歌浏览器上收到的 postman 发送通知。
However, onMessage and setBackgroundMessageHandler are never trigger, it's like the notification is totally independent.但是,onMessage 和 setBackgroundMessageHandler 永远不会触发,就像通知是完全独立的。
Here is my code:这是我的代码:
background.js背景.js
chrome.runtime.onInstalled.addListener(function() {
if ('serviceWorker' in navigator) {
navigator.serviceWorker.register('../firebase-messaging-sw.js');
} else {
console.warn('Service workers aren\'t supported in this browser.');
}
firebase.initializeApp({
apiKey: "xx",
authDomain: "xx",
databaseURL: "xx",
projectId: "xx",
storageBucket: "xx",
messagingSenderId: "xx",
appId: "xx"
});
const messaging = firebase.messaging();
messaging.usePublicVapidKey("xx");
// WORK WELL
messaging.requestPermission()
.then(function() {
console.log("=== have permission ===");
return messaging.getToken();
})
.then(function(currentToken) {
console.log("Set token : ", currentToken);
chrome.storage.sync.set({fcmToken: currentToken}, function() {});
})
.catch(function(err) {
console.log("==== error ====", err);
});
messaging.onTokenRefresh(() => {
messaging.getToken().then((refreshedToken) => {
console.log("Refresh token : ", refreshedToken);
chrome.storage.sync.set({fcmToken: refreshedToken}, function() {});
}).catch((err) => {
console.log('Unable to retrieve refreshed token ', err);
});
});
//Never trigger
messaging.onMessage((payload) => {
chrome.browserAction.setBadgeText({text: "1"});
console.log('Message received. ', payload);
});
firebase-messaging-sw.js firebase-messaging-sw.js
importScripts('https://www.gstatic.com/firebasejs/7.14.0/firebase-app.js');
importScripts('https://www.gstatic.com/firebasejs/7.14.0/firebase-messaging.js');
firebase.initializeApp({
apiKey: "xx",
authDomain: "xx",
databaseURL: "xx",
projectId: "xx",
storageBucket: "xx",
messagingSenderId: "xx",
appId: "xx"
});
const messaging = firebase.messaging();
// NEVER TRIGGER
messaging.setBackgroundMessageHandler(function(payload) {
console.log('[firebase-messaging-sw.js] Received background message ', payload);
const notificationTitle = 'Background Message Title';
const notificationOptions = {
body: 'Background Message body.',
icon: '/firebase-logo.png'
};
return self.registration.showNotification(notificationTitle,
notificationOptions);
});
manifest.json manifest.json
{
"manifest_version": 2,
"name": "app",
"description": "app",
"version": "0.0.3",
"permissions": [
"http://*/*",
"https://*/*",
"storage",
"notifications"
],
"web_accessible_resources": [
"js/popup.js",
"css/popup.css",
"html/popup.html",
"html/background.html",
"js/background.js"
],
"background": {
"page": "html/background.html",
"persistent": false
},
"options_page": "html/options.html",
"browser_action": {
"default_title": "Notification",
"default_popup": "html/popup.html",
"default_icon": {
"128": "img/get_started128.png"
}
},
"content_security_policy": "script-src 'self' https://www.gstatic.com/ https://*.firebaseio.com https://www.googleapis.com; object-src 'self'",
"icons": {
"128": "img/get_started128.png"
}
} }
Thanks a lot if you have the answer !如果您有答案,非常感谢!
Have a good day, Gabin祝你有美好的一天,加宾
onMessage
and setBackgroundMessageHandler
are only triggered when you receive the message from the background and not in the foreground. onMessage
和setBackgroundMessageHandler
仅在您从后台而不是在前台接收消息时触发。
In the docs, it mentioned you can receive msg on two: foreground, background.在文档中,它提到您可以在两个方面接收消息:前台,后台。
If you want to log/see push messages from service worker you can use:如果您想记录/查看来自 service worker 的推送消息,您可以使用:
this.push(event)=>{
console.log(event.data)
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.