firebase 通知事件在服务工作者中不起作用（notifcationclose，notificationclick）答案

【问题标题】：firebase notification events not working in service worker (notifcationclose, notificationclick)firebase 通知事件在服务工作者中不起作用（notifcationclose，notificationclick）
【发布时间】：2021-02-07 10:22:15
【问题描述】：

我正在尝试使用 firebase 通过我的 react 应用发送网络推送通知。我已经成功地让通知出现，但我希望通知 1. 持续到与 (requireInteraction) 交互和 2. 单击时打开链接 (click_action)。 requireInteraction 在发送数据消息而不是通知消息时有效，但我无法使链接打开工作。

在我的服务工作者文件 (firebase-messaging-sw.js) 中，我正在尝试为“notificationclick”和“notificationclose”事件注册事件侦听器，我将在其中处理链接打开。但是这些事件都没有在它们应该被触发的时候被触发。我已经尝试在导入脚本之前注册事件侦听器，然后按照遇到同样问题的人的建议初始化 firebase.messaging()，但没有任何效果。

需要注意的一点是，有时，notificationclose 事件确实会触发，但它是随机触发的，并且没有我与通知进行交互，并且会多次触发。似乎该事件由于某种原因得到了备份，然后在随机时间一次全部触发。我试图重新创建被触发的事件但没有成功，它是随机发生的。（见控制台输出截图）

这是我当前的代码（firebase-messaging-sw.js）：

self.addEventListener("notificationclick", console.log);

self.addEventListener("notificationclose", console.log);

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

const config = {
  apiKey: "(redacted)",
  authDomain: "(redacted)",
  databaseURL: "(redacted)",
  projectId: "(redacted)",
  storageBucket: "(redacted)",
  messagingSenderId: "(redacted)",
  appId: "(redacted)",
};

firebase.initializeApp(config);

const messaging = firebase.messaging();

messaging.onBackgroundMessage(function (payload) {
  console.log("fdgdfgdfgh"); //got message event
  return self.registration.showNotification(payload.data.title,
      Object.assign({data: payload.data}, payload.data));
});

这是我发送 fcm 请求的地方：

var admin = require("firebase-admin");

var serviceAccount = require('../../firebasekey.json');

admin.initializeApp({
  projectId: "(redacted)",
  credential: admin.credential.cert(serviceAccount),
});

var message = {
    "data": {
      "title": "Rapportera för TEST",
      "body": "Klicka här för att komma till rapporten",
      "requireInteraction": "true",
      "icon": "http://localhost:3000/notificon.png",
      "click_action": "http://google.com",
    },
    token: "(redacted)",
  };
  
  admin.messaging().send(message)
    .then((response) => {
      // Response is a message ID string.
      console.log('Successfully sent message:', response);
    })
    .catch((error) => {
      console.log('Error sending message:', error);
    });

任何帮助表示赞赏！

【问题讨论】：

标签： reactjs firebase express firebase-cloud-messaging service-worker

【解决方案1】：

原来问题在于 Windows 10 的原生通知。禁用 chrome 标志中的本机通知为我修复了它，您将不得不处理更丑陋的通知，但它们可以工作。

chrome://flags/#enable-native-notifications

【讨论】：