本站已在后台更新

Question

问题：当我的反应应用程序在浏览器中在后台打开时，我收到一条额外的通知。该额外的通知附带消息“此网站已在后台更新”。

我正在使用 firebase 云消息传递实现后台通知的推送通知功能。 到目前为止我已经尝试过了。我也尝试过使用返回 self.registration.showNotification 尝试使用 1 秒的 setTimeout ，然后通过 Promise 返回 self.registration.showNotification 。

我不想要的解决方案是什么。 1.去掉onBackgroundMessage本身FCM会自动触发 通知。 2.通过监听推送事件。因为我有前台通知 另外，如果我使用推送事件侦听器并使用 show-notification init 我的 前台通知也转换为后台。

观察：如果react-app不在后台意味着选项卡本身已关闭，但它工作正常，但是当选项卡打开并且chrome或Edge在后台时，它会触发1个额外的通知，并显示消息“此站点已在后台更新”。

//firebase-messaging-sw.js

// Scripts for firebase and firebase messaging
importScripts('https://www.gstatic.com/firebasejs/9.6.1/firebase-app-compat.js');
importScripts('https://www.gstatic.com/firebasejs/9.6.1/firebase-messaging-compat.js');


const firebaseConfig = {
  apiKey: '',
  authDomain: '',
  projectId: '',
  storageBucket: '',
  messagingSenderId: '',
  appId: '',
  measurementId: ''
};

firebase.initializeApp(firebaseConfig);
const messaging = firebase.messaging();

messaging.onBackgroundMessage(function (payload) {
  if (payload ) {
    const notificationTitle = payload.data.title;
    const notificationOptions = {
      body: payload.data.body,
      data: payload.data.clickEvent
    };

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

Answer 1

我知道有人对此发表了评论，但我遇到了这个问题，我想我应该添加答案。解决方案是将通知包装在

event.waitUntil

中发送。

self.addEventListener('push', event => {
    const data = event.data.json();
    return event.waitUntil(self.registration.showNotification(data.title, {
        body: data.body
    }));
});