firebase web 通知 - 如何在 firebase-messaging-sw.js 中使用文檔或 window.document

Question

我已經在我的站點中實施了 firebase web 通知。 我在服務工作者 firebase-messaging-sw.js 中使用 window.document 或文檔 object 時遇到問題。

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);

});

誰能建議我在 firebase-messaging-sw.js 中使用文檔 object 的方法。

基本上我想要實現的是收到的通知我想更改我的 web 站點的標題。

Answer 1

Window 或文檔 object 在 service worker 文件中不可用。 唯一的方法是與您的 html 或 js 文件進行通信。 可以通過 serviceworker 中的 postmessage api 發送通信。

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

在您的主文檔中，使用以下命令監聽來自 service worker 的消息：

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