サービスワーカーからウィンドウがアクティブになっていることを確認します

Question

ウィンドウが非アクティブのときにプッシュ通知を送信するWebアプリケーションを実行しようとしています。これを行うために、（Firebaseを介して）私のPHPサーバからの通知を受け取るのに役立つService Workerがあります。

しかし、ウィンドウがサービスワーカーを通じてアクティブかどうかを確認する方法は不明です。サービスワーカーはDOMにアクセスできないので、そこから直接チェックすることはできず、添付されたJSファイルのチェックを試みましたが、サービスワーカーは変数が定義されていないというエラーが発生します。次のように私のサービス労働者のコードは次のとおりです。

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

あなたは、視認性のAPIを使用することができます - > https://developer.mozilla.org/en-US/docs/Web/API/Page_Visibility_API?redirectlocale=en-US&redirectslug=DOM%2FUsing_the_Page_Visibility_API

は、あなたのサービスの労働者に話をメインページにイベントリスナーを接続します。サービスワーカーはそれに応じて実行することができます。

Answer 2

サービスワーカーウィンドウクライアントAPIを使用して、Webページが表示されているかどうかを確認することもできます。

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