谷歌浏览器扩展中的 Firebase 云消息传递答案

【问题标题】：Firebase Cloud Messaging in a google chrome extension谷歌浏览器扩展中的 Firebase 云消息传递
【发布时间】：2020-04-22 18:02:35
【问题描述】：

我目前正在开发一个谷歌浏览器扩展程序，我需要在其中接收推送通知。为此，我使用 Firebase Cloud 消息传递。

令牌已正确发送，我可以通过我的谷歌浏览器收到的邮递员发送通知。

然而，onMessage 和 setBackgroundMessageHandler 永远不会触发，就像通知是完全独立的。

这是我的代码：

background.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

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_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"
}

}

如果您有答案，非常感谢！

祝你有美好的一天，加宾

【问题讨论】：

删除web_accessible_resources，你不应该暴露内部扩展页面，因为它们无论如何都不能在扩展环境之外使用。您是否在选项卡中打开 background.html？它行不通。背景页面是一个特殊的隐藏页面（见Where to read console messages from background.js in a Chrome extension?）。
好的，感谢 web_accessiblhtml。我没有在选项卡中查看，而是在控制台消息中查看，就像在您的链接中一样。
@Gabin 我能够在 setBackgroundMessageHandler（服务工作者）中收到通知，但在 onMessage（background.js）中却没有。你能解决这个问题吗？就我而言，我希望拥有自己的通知 UI，而不是来自 chrome 的默认通知。

标签： javascript firebase google-chrome-extension firebase-cloud-messaging

【解决方案1】：

onMessage 和 setBackgroundMessageHandler 仅在您从后台接收消息而不是在前台接收时触发。

在文档中，它提到您可以在两个方面接收消息：前台、后台。

如果您想记录/查看来自服务人员的推送消息，您可以使用：

    this.push(event)=>{
          console.log(event.data)
    }

【讨论】：