push-уведомление работника службы chrome отображается только в том случае, если URL-адрес вкладки моего сайта закрыт или не активен

Question

Я хочу показывать сообщение работника службы GCM только в том случае, если на моем веб-сайте нет открытой вкладки Chrome или эта вкладка открыта и не выбрана (активна).

Вот мой код

Ошибка: хром не определен (…).

manifest.json

 {  
  "name": "Webplus Express",  
  "short_name": "Webplus Express",  
  "icons": [{  
    "src": "https://raw.githubusercontent.com/deanhume/typography/gh-pages/icons/typography.png",  
    "sizes": "192x192",
    "type": "image/png" 
    }],  
    "start_url": "/index.html",  
    "display": "standalone",  
    "gcm_sender_id": "298340340811",
    "gcm_user_visible_only": true,
    "background": {
    "scripts": ["service-worker.js"]
    },    
    "permissions": [
    "gcm","tabs","activeTab"
    ]  
  }

сервис-worker.js

    // The service worker running in background to receive the incoming
// push notifications and user clicks
self.addEventListener('push', function(event) {  
  // Since there is no payload data with the first version  
  // of push messages, we'll grab some data from  
  // an API and use it to populate a notification
  var s_id=0;  
  self.registration.pushManager.getSubscription().then(function(subscription) {

   if(subscription!=null){

   s_id= subscription.endpoint.split("/").slice(-1);

   var mURL="https://www.webplusexpress.com";
   var ok=true;


   chrome.tabs.getAllInWindow(undefined, function(tabs) {
    for (var i = 0;i<tabs.length; i++) {
      if (tabs[i].url && (tabs[i].url.indexOf(mURL)!=-1)) {
        //chrome.tabs.update(tab.id, {selected: true});
        if(tabs[i].highlighted){
          ok=false; 
        }  
        return;
      }
    }

  });

   if (ok){
   event.waitUntil(fetch('https://www.wpe.com/pushnotifyapi?s_id='+s_id).then(function(response) {  

      if (response.status !== 200) {  
        // Either show a message to the user explaining the error  
        // or enter a generic message and handle the
        // onnotificationclick event to direct the user to a web page  
        console.log('Looks like there was a problem. Status Code: ' + response.status);  
        throw new Error();  
      }

      // Examine the text in the response  
      return response.json().then(function(data) {  
        if (data.error || !data.notification) {  
          console.error('The API returned an error.', data.error);  
          throw new Error();  
        }  

        var title = data.notification.title;  
        var message = data.notification.message;  
        var icon = data.notification.icon;  
        console.log('icon received'+icon);
        var notificationTag = data.notification.tag;         

        return self.registration.showNotification(title, {  
          body: message,  
          icon: icon,  
          tag: notificationTag  
        });  
      });  
    }).catch(function(err) {


      console.error('Unable to retrieve data', err);

      var title = 'An error occurred';
      var message = 'We were unable to get the information for this push message';  
      var icon = 'https://www.webplusexpress.com/images/3web+carre.png';  
      var notificationTag = 'notification-error';  
      return self.registration.showNotification(title, {  
          body: message,  
          icon: icon,  
          tag: notificationTag  
        });  
    }) 

  ); 
  }

  }
});

});


self.addEventListener('notificationclick', function(event) {  
  console.log('On notification click: ', event.notification.tag);  
  // Android doesn't close the notification when you click on it  
  // See: http://crbug.com/463146  
  event.notification.close();

  // This looks to see if the current is already open and  
  // focuses if it is  
  event.waitUntil(
    clients.matchAll({  
      type: "window"  
    })
    .then(function(clientList) {  
      for (var i = 0; i < clientList.length; i++) {  
        var client = clientList[i];  
        if (client.url == '/' && 'focus' in client)  
          return client.focus();  
      }  
      if (clients.openWindow) {
        return clients.openWindow('/');  
      }
    })
  );
});

Answer 1

Ссылка на реализацию Push-сообщений для Chrome может помочь. Он показывает каждый шаг, который вам нужно выполнить для поддержки push-сообщений в вашем веб-приложении, в котором проверка, поддерживается ли обслуживающий персонал, выполняется перед регистрацией service-worker.js файл.

В дополнение к этому, использование API видимости страницы для определения того, когда веб-страница видна или находится в фокусе, также может помочь. Когда пользователь сворачивает веб-страницу или переходит на другую вкладку, API отправляет visibilitychange событие, касающееся видимости страницы, как сделано в SO посте - Есть ли способ обнаружить, если окно браузера не активно в данный момент?