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

【问题标题】：Check if window is active from Service Worker从 Service Worker 检查窗口是否处于活动状态
【发布时间】：2017-12-22 08:51:22
【问题描述】：

我正在尝试运行一个在窗口处于非活动状态时发送推送通知的 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')
  );
});

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

谢谢！

【问题讨论】：

标签： javascript php dom push-notification service-worker

【解决方案1】：

您甚至可以使用 Service Worker 窗口客户端 API 来检查网页是可见还是隐藏。

    clients.matchAll({
       type: 'window',
       includeUncontrolled: true
    })
    .then(function(windowClients) {

     var clientIsVisible = false;

     for (var i = 0; i < windowClients.length; i++) {
      const windowClient = windowClients[i];

      if (windowClient.visibilityState==="visible") {
          clientIsVisible = true;

        break;
      }
    }

    return clientIsVisible;
  });

【讨论】：

【解决方案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 不提供文档和可见性 API，您将在控制台收到此错误：文档未定义