从服务工作者检查窗口是否处于活动状态

Question

我想运行一个Web应用程序，当窗口不活动时发送推送通知。为此，我有一个 Service Worker 帮助从我的 php 服务器 (通过 Firebase) 接收通知。

然而，我不确定如何通过我的 Service Worker 检查窗口是否活动。Service Worker 无法访问 DOM，因此无法直接检查它，我尝试在附加的 JS 文件上进行检查，但是 Service Worker 出现了变量未定义的错误。我的 Service Worker 代码如下：

self.addEventListener('push', function(event) {
  console.log('[Service Worker] Push Received.');
  // console.log(`[Service Worker] Push had this data: "${event.data.text()}"`);

  const title = 'Chat';
  const options = {
    body: 'New message received!',
    icon: '/images/logo/8-icon.png',
    badge: '/images/badge.png'
  };

  event.waitUntil(self.registration.showNotification(title, options));

});

self.addEventListener('notificationclick', function(event) {
  console.log('[Service Worker] Notification click Received.');

  event.notification.close();

  event.waitUntil(
    clients.openWindow('https://localhost:8000')
  );
});

请问有什么正确的方法可以检测活动窗口以防止在web应用程序处于活动状态时推送通知吗？

谢谢！

- Ozer

Answer 1

你可以使用ServiceWorker WindowClient API来检查Window是否可见或隐藏。

async function checkClientIsVisible(): Promise<boolean> {
  const windowClients = await clients.matchAll({
    type: "window",
    includeUncontrolled: true,
  });

  for (var i = 0; i < windowClients.length; i++) {
    if (windowClients[i].visibilityState === "visible") {
      return true;
    }
  }

  return false;
}

- Mathi kumar

Answer 2

你可以使用可见性 API -> https://developer.mozilla.org/zh-CN/docs/Web/API/Page_Visibility_API。在主页面上附加事件监听器以与您的服务工作者通信。然后服务工作者可以相应地执行。

- splitwire

---

文档和可见性API在服务工作者中不可用，您将在控制台上收到此错误：未定义文档。 - MAZ