Firebase Web 通知 - 如何在 Firebase-messaging-sw.js中使用 document或

Question

我已在我的网站中实施了 Firebase 网络通知。我在服务工作者firebase-messaging-sw.js中使用window.document或文档对象时遇到问题。

messaging.setBackgroundMessageHandler(function(payload) {
// Handle notification when site is in background
// // Blink title
var isOldTitle = true;
var oldTitle = document.title;
var newTitle =  "(1) New Work Order";
var interval = null;
interval = setInterval(function(){
document.title = isOldTitle ? oldTitle : newTitle;
isOldTitle = !isOldTitle;
}, 700);
// send web browser notification
var payloadData = JSON.parse(payload.data.notification);
var notificationOptions = {
body: payloadData.body,
icon: payloadData.icon,
click_action: payloadData.click_action
};
return self.registration.showNotification(payloadData.title,notificationOptions);
});

谁能建议我一种在火碱消息传递.js中使用文档对象的方法。

基本上，我希望在收到的通知上实现我想更改我的网站的标题。

Answer 1

窗口或文档对象在服务工作进程文件中不可用。唯一的方法是与您的 html 或 js 文件进行通信。可以通过服务工作者中的消息 API 发送通信。

self.clients.matchAll().then(clients => {
clients.forEach(client => {
client.postmessage(/*data*/);
});
});

在主文档中，使用以下方法侦听来自服务工作进程的消息：

navigator.serviceWorker.onmessage = (event) => {
console.log('message from sw');
/*Here change the document title*/
}

Answer 2

Indragith的回答对我有很大帮助，但是当我获得所有客户列表时，我必须启用选项包括不受控制。

这段代码适用于我的项目：

messaging.onBackgroundMessage(payload => {
console.log(payload)
self.clients.matchAll({includeUncontrolled: true}).then(clients => {
clients.forEach(client => {
client.postMessage('YOUR_MESSAGE')
})
})
});

在此处完成答案和解释：当应用程序处于后台 FCM 时更新 Web 应用程序用户界面