Как узнать, находится ли прогрессивное веб-приложение на переднем или заднем плане

Question

Есть ли способ узнать, находится ли прогрессивное веб-приложение в фоновом режиме или на переднем плане (т. Е. В данный момент это приложение находится в фокусе или оно «свернуто»)

Поиск в Google и SO дляпоследние 2 дня принесли только информацию о том, как запустить работника сервиса в фоновом режиме.Спасибо!

Answer 1

С клиента вы можете использовать API видимости страницы , чтобы запрашивать текущую видимость и получать события, когда видимость меняется.

const state = document.visibilityState;

document.addEventListener('visibilitychange', () => {
  console.log(document.visibilityState);
});

У сервисных работников вы также можете запроситьсостояние видимости клиентов с WindowClient .

event.waitUntil(
  clients.matchAll({ type: 'window' })
    .then(function(clientList) {
      for (var i = 0; i < clientList.length; i++) {
        const state = clientList[i].visibilityState;
      }
    })
);