发送推送通知时未调用messaging.onMessage() (JavaScript)

Question

我在 Stackoverflow 上发现了一个类似的问题，但很遗憾没有得到回答。

我正在尝试使用 FCM 向 Web 发送推送通知。当我放置 android 设备的令牌并且通知已成功发送到所有令牌时，我已经设置了我的应用程序服务器及其工作正常。但是，当通知发送到 web 时，不会调用 web 上的 onMessage() 函数。

我的代码是：

<script src="https://www.gstatic.com/firebasejs/4.6.0/firebase.js"></script>
       <script>
         // Initialize Firebase
         var config = {
           apiKey: "xxxxxxxxx",
           authDomain: "xxxxxxxx",
           databaseURL: "xxxxxxx",
           projectId: "xxxxxxxxxxxx",
           storageBucket: "xxxxxxxxx",
           messagingSenderId: "xxxxxxxxx"
         };
         firebase.initializeApp(config);

           //Get Token
          const messaging = firebase.messaging();
          messaging.requestPermission()
           .then(function () {
               console.log('Have permission');
               return messaging.getToken();
           })
        .then(function (token) {
            console.log(token);
        })
          .catch(function (err) {
              console.log('Error occurred');
          });

          messaging.onMessage(function (payload) {
              console.log('onMessage', payload);
          })

firebase-messaging-sw.js 代码的代码：

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

var config = {
apiKey: "xxxxxxxxx",
authDomain: "XXXXXXXXXX",
databaseURL: "XXXXXXXXXX",
projectId: "XXXXXXXXXX",
storageBucket: "XXXXXXXXX",
messagingSenderId: "XXXXXXXXXX"
};

firebase.initializeApp(config);

const messaging = firebase.messaging();

我不知道出了什么问题。

Answer 1

当我尝试开始时，我发现这个主题的文档记录很差，以至于我几乎放弃了几次，所以希望阅读这篇文章的其他人可能会觉得这很有用。

推送通知的整个概念变得更加混乱，因为实际上涉及到不同的 Web API，它们协同工作，而这通常不清楚。然后是应该使用 VAPID 还是 FCM 的争论？带有 FCM 的 VAPID 怎么样？呸呸呸呸。

因此，首先您需要处理检查/获取通知的用户权限、创建/更新订阅、保存令牌等。如果您正在获取令牌/订阅，那么您就可以将数据发送到客户端（这是 Push API 的东西）。

从技术上讲，如果您的用户从不离开您的网站，这就是您所需要的，但显然他们会离开，所以这就是您需要服务人员的原因。服务工作者可以在用户不打开您的站点的情况下接收您的推送数据，然后对其进行处理。 （这是 Push/Service Worker API 交叉）。

最后，您希望您的用户看到您发送给他们的信息，对吗？ Push API 将您的消息数据发送给您的服务工作者，但您仍然必须处理该数据。您可能想要显示通知，因此您需要 Notification API。

现在，查看您的代码，您似乎在前端执行第一部分并为您的用户获取令牌，但您的服务工作者实际上不包含任何代码，因此它什么也不做。我知道 Firebase 有一些自定义事件处理程序，但标准的网络推送也应该可以工作。

您只需在 Service Worker 代码中创建一个用于推送事件的基本处理程序，如下所示：

self.addEventListener('push', function(event) {
    const push = event.data.json();
    const title = push.data.title;
    const options = JSON.parse(push.data.options);
    event.waitUntil(registration.showNotification(title, options));
});

这样做的好处是通过保持代码简单而不是硬编码 Service Worker 中通知的任何选项，它允许您的服务器端代码即时自定义每个通知的行为和外观。服务工作者实际上只是解析推送负载的 JSON 输入并使用负载中的选项创建通知

您可以找到 Notification API here 的可用选项列表，它们仍在更改，但截至目前，以下 PHP 示例与上面的 service worker 代码一起将通过 Firebase 发送功能相当齐全的通知：

$push['to'] = $SUBSCRIBED-FCM-TOKEN;
$push['data']['title'] = 'Here is my title';
$push['data']['options']['body'] = 'and here is the body message';
$push['data']['options']['badge'] = '/images/chaticon.png';
$push['data']['options']['requireInteraction'] = true;
$push['data']['options']['tag'] = 'notification-tag';
$push['data']['options']['icon'] = '/images/icons/256.jpg';
$push['data']['options']['vibrate'] = array(500,150,500,150,500);
$push['data']['options']['image'] = '/images/logo.jpg';
$push['data']['options']['actions'] = array(array('action' => 'accept-action', 'title' => 'Yes', 'icon' => '/images/icons/yes.jpg' ), array('action' => 'reject-action', 'title' => 'No', 'icon' => '/images/icons/no.jpg'));
$ch = curl_init();
curl_setopt($ch, CURLOPT_URL, "https://fcm.googleapis.com/fcm/send");
curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
curl_setopt($ch, CURLOPT_POSTFIELDS, json_encode($push));
curl_setopt($ch, CURLOPT_POST, 1);
$headers = array();
$headers[] = "Content-Type: application/json";
$headers[] = "Authorization: key=$SERVER-KEY-FROM-FIREBASE-CONSOLE";
curl_setopt($ch, CURLOPT_HTTPHEADER, $headers);
$result = curl_exec($ch);
curl_close ($ch);

显然，这只是一个让您开始的基本示例，您可以选择添加获取事件以响应对通知操作的点击等，以执行进一步的操作，用于分析或其他。您还可以根据用户是否已经在您的网站上来更改行为。