progressive-web-apps - 如何知道渐进式 Web 应用程序是在前台还是后台

Question

有没有办法知道渐进式网络应用程序是在后台还是在前台(即它当前是焦点应用程序还是“最小化”)

过去 2 天搜索 Google 和 SO 仅提供有关如何在后台运行 Service Worker 的信息。谢谢!

Answer 1

从客户端，您可以使用 Page Visibility API查询当前可见性并在可见性更改时获取事件。

const state = document.visibilityState;

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

您还可以从 Service Workers 使用 WindowClient 查询客户端的可见性状态。 .

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