从 Service Worker 检查窗口是否处于活动状态

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

如果网络应用程序处于活动状态，任何人都可以启发我检查活动窗口以防止推送通知的正确方法吗？

谢谢！

Answer 1

您可以使用ServiceWorker WindowClient API 检查窗口是可见还是隐藏。

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

Answer 2

您可以使用可见性 API -> https://developer.mozilla.org/en-US/docs/Web/API/Page_Visibility_API?redirectlocale=en-US&redirectslug=DOM%2FUsing_the_Page_Visibility_API

在主页上附加一个事件侦听器以与您的 Service Worker 对话。然后Service Worker就可以执行相应的操作。