我在 Stackoverflow 上发现了一个类似的问题，但不幸的是没有人回答。

我正在尝试使用 FCM 向 Web 发送推送通知。我已经设置了我的应用程序服务器，当我放置 Android 设备的 token 并且通知已成功传递到所有 token 时，它工作正常。但是，当通知发送到 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();

我不知道哪里出了问题。

最佳答案

当我尝试开始时，我发现这个主题的文档非常少，以至于我几次差点放弃，所以希望阅读本文的其他人可能会发现它有用。

推送通知的整个概念变得更加困惑，因为实际上涉及协同工作的不同 Web API，而且这一点通常不清楚。然后是关于您应该使用 VAPID 还是 FCM 的争论？使用 FCM 的 VAPID 怎么样？哇哇哇哇。

因此，首先您需要处理检查/获取用户通知权限、创建/更新订阅、保存 token 等。如果您正在获取 token /订阅，那么您已准备好向客户端发送数据(这是 Push API 的东西)。

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

最后，您希望您的用户看到您向他们发送的消息，对吗？ Push API 将你的消息数据发送给你的 service worker，但你仍然需要处理这些数据。您可能想要显示通知，因此您需要 Notification API。

现在，看看您的代码，您似乎正在前端执行第一部分并为您的用户获取 token ，但您的服务工作线程实际上不包含任何代码，因此它什么也不做。我知道 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 输入并使用负载中的选项创建通知

您可以找到通知 API 的可用选项列表 here ，它们仍在变化，但截至目前，以下 PHP 示例与上面的服务 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);

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

关于javascript - 发送推送通知时未调用 messaging.onMessage() (JavaScript)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/47097720/