Firebase Web推动通知，单击时不起作用

Question

从我试图完成它以来的日子，但我完全陷入困境。

这是我的服务工作者文件中的代码

importScripts('https://www.gstatic.com/firebasejs/6.0.2/firebase-app.js');
importScripts('https://www.gstatic.com/firebasejs/6.0.2/firebase-messaging.js');
firebase.initializeApp({
    messagingSenderId: "xxxxxxxxxxxx"
});
var messaging = firebase.messaging();

messaging.setBackgroundMessageHandler(function(payload) {
    console.log('[firebase-messaging-sw.js] Received background message ', payload);
    // Customize notification here
    var notificationTitle = payload.data.title; //or payload.notification or whatever your payload is
    var notificationOptions = {
      body: payload.data.body,
      icon: payload.data.icon,
      image: payload.data.image,
      data: { url:payload.data.openURL }, //the url which we gonna use later
      actions: [{action: "open_url", title: "View"}]
    };
    return event.waitUntil(self.registration.showNotification(notificationTitle,
      notificationOptions));
});
 self.addEventListener('notificationclick', function(event) {

    console.log('event = ',event);
    event.notification.close();
    event.waitUntil(clients.openWindow(event.notification.data.url));
    switch(event.action){
      case 'open_url':
        window.open(event.notification.data.url);
      break;
      case 'any_other_action':
        window.open(event.notification.data.url);
      break;
    }

}, false);

和数据以这种格式

$data=[
        'title' => 'message title',
        'body' => 'description body',
        'icon' => 'https://i.ytimg.com/vi/gXSyP9ga-ag/hqdefault.jpg',
        'image'=>'https://i.ytimg.com/vi/gXSyP9ga-ag/mqdefault.jpg',
        'openURL'=>'https://google.com'
      ];

现在有很多问题。

• 单击移动设备上的按下通知主体时，它不会打开URL，但仅将其否定(仅单击操作按钮打开链接

• 我在线阅读了一些

  event.waitUntil(clients.openWindow(event.notification.data.url));
  

  不使用Safari和Safari iPhone，有人可以帮助我找到找出如何实现将与Apple一起使用的单击侦听器设备？

任何帮助都将不胜感激

Answer 1

搜索我自己弄清楚的许多解决方案后。这是完整的工作示例：

// firebase-messaging-sw.js (client side)
importScripts('https://www.gstatic.com/firebasejs/8.1.2/firebase-app.js');
importScripts('https://www.gstatic.com/firebasejs/8.1.2/firebase-messaging.js');
self.addEventListener('notificationclick', function (event) {
  console.debug('SW notification click event', event)
  const url = '<get your url from event>'
  event.waitUntil(
    clients.matchAll({type: 'window'}).then( windowClients => {
        // Check if there is already a window/tab open with the target URL
        for (var i = 0; i < windowClients.length; i++) {
            var client = windowClients[i];
            // If so, just focus it.
            if (client.url === url && 'focus' in client) {
                return client.focus();
            }
        }
        // If not, then open the target URL in a new window/tab.
        if (clients.openWindow) {
            return clients.openWindow(url);
        }
    })
);
})
firebase.initializeApp({
  apiKey: "",
  authDomain: "",
  projectId: "",
  storageBucket: "",
  messagingSenderId: "",
  appId: "",
  measurementId: "",
})
const messaging = firebase.messaging();
messaging.onBackgroundMessage(function(payload) {
  console.log('[firebase-messaging-sw.js] Received background message ', payload);
})

这是nodejs side的代码：

var admin = require("firebase-admin");
// This is a specific account key file generated through the firebase UI
var serviceAccount = require("./serviceAccountKey.json");
admin.initializeApp({
  credential: admin.credential.cert(serviceAccount),
});
const payload = {
  "token": "FCM TOKEN HERE",
  "notification": {
    "title":"James",
    body: '14100000'
  },
  "webpush": {
    "fcm_options": {
        "link": "https://google.com"
    },
  },
};
admin.messaging().send(payload).then(res => {
  console.log('SUCCESS ', res);
}).catch(err => {
  console.log(err);
}).finally(() => {
  process.exit(0);
});

问题是，如果我将notificationclick放在底部，它不会发射，真的不知道为什么，那么我将其移至顶部并且可以工作。我可以从服务器发送推送通知(使用firebase-admin(，并显示推送通知(当应用在后台时(，请单击"通知"打开我想要的链接。

Answer 2

您正在使用数据消息，但是您需要使用通知消息。请参阅：https：//firebase.google.com/docs/cloud-messaging/js/receive

由于数据消息不支持fcm_options.link，因此建议您在所有数据消息中添加通知有效负载。另外，您可以使用服务工作者处理通知。

有关通知和数据消息之间差异的说明，请参见消息类型。

这是工作通知的JSON有效载荷。Click_Action用于处理单击。

{
  "data": {
    "badge": "23",
    "b": "xxxx",
    "t": "yyyy",
    "android_channel_id": "com.example.fcm"
  },
  "from": "11111111111",
  "notification": {
    "title": "Title",
    "body": "Body",
    "icon": "https://example.com/icon.png",
    "click_action": "https://example.com"
  },
  "collapse_key": "do_not_collapse"
}