Vérifiez si la fenêtre est active à partir de Service Worker

Question

J'essaie d'exécuter une application Web qui envoie des notifications push lorsque la fenêtre est inactive. Pour ce faire, j'ai un technicien de service qui aide à recevoir des notifications de mon serveur php (via Firebase). Cependant, je ne sais pas comment vérifier si la fenêtre est active par l'intermédiaire de mon agent de service. Le technicien de maintenance n'a pas accès au DOM, donc je ne peux pas le vérifier directement par là, et j'ai essayé de faire les contrôles sur un fichier JS joint, mais le travailleur de service obtient des erreurs variables non définies. Mon code service travailleur est comme suit:

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

Quelqu'un pourrait-il me éclairer sur la façon de vérifier une fenêtre active pour empêcher les notifications push si l'application web est actif?

Merci!

Answer 1

Vous pouvez utiliser l'API de visibilité -> https://developer.mozilla.org/en-US/docs/Web/API/Page_Visibility_API?redirectlocale=en-US&redirectslug=DOM%2FUsing_the_Page_Visibility_API

Joindre un écouteur d'événement sur la page principale de parler à votre agent de service. Ensuite, le technicien de maintenance peut exécuter en conséquence.

Answer 2

Même vous pouvez utiliser l'API du client fenêtre de worker de service pour vérifier si la page Web est visible ou masquée.

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