Question

我正在从Firebase后端向Chrome扩展程序发送FCM推送通知。当我将焦点对准我的Chrome扩展程序后，它可以成功显示。我希望它显示出来，即使扩展没有引起关注，但我也无法让原本应该处理通知的服务人员也可以触发。

我遵循Google tutorial设置了我的JavaScript Chrome扩展程序客户端。我已经尝试过this solution在消息中不包含“ notification”有效负载，并且已经this solution手动注册了工作程序（即使本教程没有任何说明），但无济于事。

我的服务人员firebase-messaging-sw.js看起来像这样：

importScripts('https://www.gstatic.com/firebasejs/5.8.2/firebase.js');

var config = {
  ...
};
firebase.initializeApp(config);

const messaging = firebase.messaging();

messaging.setBackgroundMessageHandler(function(payload) {
  console.log('[firebase-messaging-sw.js] Received background message ', payload.data);
  var notificationTitle = 'Background Message Title';
  var notificationOptions = {
    body: 'Background Message body.',
    icon: '/firebase-logo.png'
  };

  return self.registration.showNotification(notificationTitle,
    notificationOptions);
});

这是我用来发送通知的POST请求（显然带有正确的SERVER_KEY和USER_TOKEN值）：

POST /fcm/send HTTP/1.1
Host: fcm.googleapis.com
Content-Type: application/json
Authorization: key=<SERVER_KEY>
Cache-Control: no-cache

{
    "data": {
        "title": "Firebase",
        "body": "Firebase is awesome",
        "click_action": "http://localhost:5000/",
        "icon": "http://localhost:5000/firebase-logo.png"
    },
    "to": "<USER_TOKEN>"
}

如何让服务人员接收并显示推送通知？

预先感谢：）

Answer 1

您可以在服务工作者（firebase-messaging-sw.js）中使用Push API：

importScripts('https://www.gstatic.com/firebasejs/7.2.2/firebase-app.js');
importScripts('https://www.gstatic.com/firebasejs/7.2.2/firebase-messaging.js');

var config = {
  ...
};
firebase.initializeApp(config);

const messaging = firebase.messaging();

this.onpush = event => {
    console.dir(event.data.json());
    // Here you can use event.data to compose Notification
    // @see https://www.w3.org/TR/push-api/#pushmessagedata-interface
};

如何在Chrome扩展程序的Service Worker中接收FCM推送通知

1 个答案: