Javascript 创建Firebase通知，页面位于前台/焦点

使用Firebase Cloud Messaging（用于web），当网页关闭或在后台显示时，但当我真正关注网页时，如何生成通知

我的理解是，

消息。onMessage（…）

是我在页面处于焦点时处理传入消息的地方，但是我似乎找不到关于如何仍然可以创建通知弹出窗口的文档，就好像页面在后台一样

---

谢谢你的时间

通过通知API处理传入消息

messaging.onMessage(function(payload) {
    const notificationTitle = payload.notification.title;
    const notificationOptions = {
        body: payload.notification.body,
        icon: payload.notification.icon,        
    };

    if (!("Notification" in window)) {
        console.log("This browser does not support system notifications");
    }
    // Let's check whether notification permissions have already been granted
    else if (Notification.permission === "granted") {
        // If it's okay let's create a notification
        var notification = new Notification(notificationTitle,notificationOptions);
        notification.onclick = function(event) {
            event.preventDefault(); // prevent the browser from focusing the Notification's tab
            window.open(payload.notification.click_action , '_blank');
            notification.close();
        }
    }
});

---

通知已弃用。 向服务人员发送消息

---

从sw.js接收消息并显示推送

self.addEventListener('notificationclick', function(event) {
console.log('[firebase-messaging-sw.js] Received notificationclick event ', event);

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

});
const showMessage = function(payload){
    console.log('showMessage', payload);
    const notificationTitle = payload.data.title;
    const notificationOptions = {
        body: payload.data.body,
        icon: payload.data.icon,
        image: payload.data.image,
        click_action: payload.data.click_action,
        data:payload.data.click_action
    };  


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

self.addEventListener('message', function (evt) {     
  console.log("self",self);
  showMessage( evt.data );
})

self.addEventListener（'notificationclick'，函数（事件）{
log（“[firebase messaging sw.js]收到通知单击事件”，事件）；
var click_action=event.notification.data；
event.notification.close（）；
//这将查看电流是否已打开，并且
//如果是的话
event.waitill（clients.matchAll({
类型：“窗口”
}).then（函数（客户端列表）{
对于（var i=0；i

更干净的方法是：

messaging.onMessage(payload => {
  const {title, ...options} = payload.notification;
  navigator.serviceWorker.ready.then(registration => {
    registration.showNotification(title, options);
  });
});

---

由于Android中不推荐使用通知，因此应使用Firebase serviceWorker注册来显示通知

截至2020年2月，Firebase似乎在“/Firebase cloud messaging push scope”范围内注册了其serviceWorker（如chrome devtools->Application->Service Workers中所示）

要使用它，您可以执行以下操作：

messaging.onMessage(function(payload) {
    console.log("onMessage: ", payload);
    navigator.serviceWorker.getRegistration('/firebase-cloud-messaging-push-scope').then(registration => {
        registration.showNotification(
            payload.notification.title,
            payload.notification
        )
    });
});

---

您需要为此设置

manifest.json

和

firebase messaging sw.js

。看，我已经设置了这两个文件。在.js文件中，我有一个函数，它在我的页面处于后台时创建一个通知：`messaging.setBackgroundMessageHandler（函数（负载）{console.log（'[firebase messaging sw.js]Received background message'，payload）；//在此处自定义通知const notificationTitle='Coffee Train！'；const notificationOptions={body:'All onboard！'，icon:'Coffee-Train-icon-red-50.png'}；返回self.registration.showNotification（notificationTitle，notificationOptions）；}`抱歉，显然我找不到一个好方法来格式化注释中的代码。。。要点是message.setBackgroundMessageHandler函数似乎可以处理使用self.registration.showNotification函数创建通知的问题，但我似乎不知道如何在messaging.onMessage函数中执行相同的操作，该函数在我的网页处于焦点并接收消息时执行。我认为当网页显示时，您无法显示相同类型的通知气泡。由于该应用程序已经对用户可见，因此您需要以不同的方式处理：例如突出显示网页的相关部分。糟糕，这太糟糕了。我希望出现通知气泡的主要原因是为了处理这样一种情况：用户将我的网页作为活动选项卡打开，但正在使用不同的应用程序（如Excel或其他应用程序），并且可能会将浏览器窗口与其他应用程序窗口完全覆盖。当我测试这个场景时，我的网页正在捕获通知，但它是在页面的前台处理的，而不是由后台服务人员处理的。还有其他功能可以处理这种情况吗？不幸的是，当应用程序在前台时，这对Android不起作用。通知已弃用。我应在何处编写此代码。我应该像为后台编写的方法那样在serviceworker中编写吗？不，应该在

firebase.initializeApp（FCM_CONFIG）之后由浏览器处理；const messaging=firebase.messaging（）这在Chrome中对我不起作用。不过，这台机器运转良好
messaging.onMessage(function(payload) {
    console.log("onMessage: ", payload);
    navigator.serviceWorker.getRegistration('/firebase-cloud-messaging-push-scope').then(registration => {
        registration.showNotification(
            payload.notification.title,
            payload.notification
        )
    });
});