firebase-cloud-messaging - 无法让 click_action 使用 Web 应用程序/PWA 处理 FCM 通知

Question

我试图让我的“click_action”将用户带到我发送给客户端的通知上的特定 URL，但无论我做什么，要么什么都不做(桌面)，要么只是打开 PWA(android)。消息通过正常(在 Chrome 控制台中检查)但单击似乎不起作用。

我的服务人员中有以下内容，这些内容来自各个地方，包括本网站上提供的其他答案:

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

/* An empty service worker!  */
self.addEventListener('fetch', function(event) {
  /* An empty fetch handler! */
});

   var firebaseConfig = {
//REDACTED
  };
  // Initialize Firebase
  firebase.initializeApp(firebaseConfig);

 const messaging = firebase.messaging();

messaging.setBackgroundMessageHandler(function(payload) {
  console.log('[firebase-messaging-sw.js] Received background message ', payload);
  // Customize notification here


  notificationTitle = payload.notification.title;
  notificationOptions = {
    body: payload.notification.body,
    icon: payload.notification.icon,
    click_action: payload.notification.click_action
  };

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

self.addEventListener('notificationclick', function(event) {
    let url = event.notification.click_action;
// I've also added a data.click_action field in my JSON notification, and have tried using that
// instead, but that didn't work either

    console.log('On notification click: ', event.notification.tag); 
    event.notification.close(); // Android needs explicit close.
    event.waitUntil(
        clients.matchAll({ includeUncontrolled: true, 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);
            }
        })
    );
});


self.onnotificationclick = function(event) {
  let url = event.notification.click_action;
  console.log('On notification click: ', event.notification.tag);
  event.notification.close();

  // This looks to see if the current is already open and
  // focuses if it is
  event.waitUntil(clients.matchAll({ includeUncontrolled: true, type: 'window' }).then(function(clientList) {
    for (var i = 0; i < clientList.length; i++) {
      var client = clientList[i];
      if (client.url == url && 'focus' in client)
        return client.focus();
    }
    if (clients.openWindow)
      return clients.openWindow(url);
  }));
};

通知在 android(已安装的 PWA)和 chrome 上都可以正常发送，并且开发人员控制台中的消息有效负载格式正确并且可以正常接收。在我从服务器发送的消息中，我有一个带有自定义参数的 URL(例如 https://[domain]/list.php?userid=123 )，但如上所述，单击通知在 windows/chrome 和 android 上没有任何作用它成功打开 PWA，但随后不会转到有效负载中的 URL，它只会转到 PWA 上次打开时所在的位置。 “userid”根据消息触发器而变化。

消息负载的示例 JSON:

{data: {…}, from: "xxx", priority: "high", notification: {…}, collapse_key: "do_not_collapse"}
collapse_key: "do_not_collapse"
data: {gcm.notification.badge: "[logo URL]", click_action: "https://[URL]/list.php?userid=33"}
from: "xxx"
notification:
body: "'5' has just been added"
click_action: "https://[URL]/list.php?userid=33"
icon: "https://[logo URL]"
title: "alert "

我还在 https://dummypage.com 上看到了一些关于“webpush”的内容:{ "fcm_options": { "link": "https://firebase.google.com/docs/cloud-messaging/js/receive "}}但无法弄清楚这是否相关或是否也需要。

当您单击通知时，仅在 click_action 中提供一个 URL 似乎并不只是执行该操作，我感到非常惊讶! Service Worker 需要什么吗？!？!

问题之一可能是 PWA 没有定期更新软件，所以如果我上面的代码应该可以工作(如果我的代码很大!)那么我只需要等待软件在已安装的 Android 应用程序上更新？如果是这样，有没有办法加快它的更新？!？

非常感谢您提供任何帮助。我在这里打结!

Answer 1

我花了很多时间为同样的问题寻找解决方案。也许这可以帮助:
如果您使用 firebase 消息发送通知，则可以使用 webpush field 。 firebase 消息客户端库执行 self.registration.showNotification() ... 不再需要 messaging.onBackgroundMessage在你的服务 worker 中。

// firebabse-coud-function.js

app.messaging().send({
    webpush: {
        notification: {
            title: notification?.title || "Default title",
            icon: notification?.icon || "/icon.png",
            badge: notification?.icon || "/icon.png",
        },
        fcmOptions: {
            link: `${BASE_URL || ""}${notification?.clickAction || "/"}`,
        }
    },
    data: {
        userID: notification.userID,
        link: notification?.clickAction || "/",
    },
    topic
});

最重要的是，在你的 service worker 中添加一个 'notificationclick' 事件监听器 之前 调用 firebase.messaging()所以我的服务人员看起来像:

// firebase-messaging-sw.js

// ...

self.addEventListener('notificationclick', function (event) {
    console.debug('SW notification click event', event)
    const url = event.notification?.data?.FCM_MSG?.data?.link;
    // ...
})

const messaging = firebase.messaging();

messaging.onBackgroundMessage(function (payload) {
    // received others messages
})

对我来说，点击事件不会转到正确的网址。所以我添加这个:

// background client - service worker
const channel = new BroadcastChannel('sw-messages');

self.addEventListener('notificationclick', function (event) {
  console.debug('SW notification click event', event)
  const url = event.notification?.data?.FCM_MSG?.data?.link;

  channel.postMessage({
    type: 'notification_clicked',
    data: {
      title: event.notification.title,
      clickAction: url
    }
  });

})

// foreground client
const channel = new BroadcastChannel('sw-messages');
channel.addEventListener("message", function (event) {
    // go the page
})

我希望这可以帮助别人。