檢查窗口是否從服務工作者處於活動狀態

我試圖運行一個Web應用程序，該窗口處於非活動狀態時發送推送通知。要做到這一點，我有一個服務工作者，幫助從我的PHP服務器（通過Firebase）接收通知。檢查窗口是否從服務工作者處於活動狀態

但是，我不確定如何檢查窗口是否通過我的服務人員激活。服務工作者無法訪問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') 
); 
});

誰能賜教用正確的方法來檢查活動窗口，以防止推送通知，如果Web應用程序被激活？

謝謝！

來源

2017-07-17 Ozer

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

附加的事件偵聽器的主頁上跟你的服務人員。然後服務人員可以相應地執行。

來源

2017-07-17 18:22:27 splitwire

即使您可以使用服務人員窗口客戶端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; 
    });

來源

2017-07-20 06:08:08

檢查窗口是否從服務工作者處於活動狀態

回答

相關問題