JavaScript Page Visibility API

目录

通常，我们使用各种事件，判断用户是否正在离开当前页面。

• visibilityState
• pageshow
• pagehide
• beforeunload
• unload

但是，手机浏览器往往不会触发这些事件，原因是浏览器进程会被突然关闭或者切换到后台，从而没有机会触发这些事件。常见的场景有以下这些。

• 用户点击了一条系统通知，切换到另一个 App。
• 用户进入任务切换窗口，切换到另一个 App。
• 用户点击了 Home 按钮，切换回主屏幕。
• 操作系统自动切换到另一个 App（比如，收到一个打入的电话）。

上面这些情况，都会导致浏览器进程切换到后台，也很可能会被操作系统自动终止，以便回收资源。 这使得pagehide、beforeunload、unload等事件根本不会触发。

这种情况下面，我们就要使用 Page Visibility API，判断页面是否可见。它可以保证会在手机浏览器得到执行。

// 页面的 visibility 属性可能返回三种状态
// prerender，visible 和 hidden
let pageVisibility = document.visibilityState;

// 监听 visibility change 事件
document.addEventListener('visibilitychange', function() {
  // 页面变为不可见时触发
  if (document.visibilityState == 'hidden') { ... }

  // 页面变为可见时触发
  if (document.visibilityState == 'visible') { ... }
});

其他的用途还包括根据用户行为调整程序。比如，在轮询的情况下，如果页面处于当前窗口，可以每隔15秒向服务器请求数据；如果不处于当前窗口，则每隔几分钟请求一次数据。

实际开发中，为了防止某些浏览器不支持这个 API，最好同时监听pagehide事件，这样会比较保险。

这个 API 部署在document对象上，提供以下两个属性。

• document.hidden：返回一个布尔值，表示当前是否被隐藏。
• document.visibilityState：表示页面当前的状态，可以取三个值。
  • visibile：页面可见
  • hidden：页面不可见
  • prerender：页面即将或正在渲染，不可见

页面的可见状态发生变化时，会触发VisibilityChange事件。

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

• W3草案
• David Walsh, Page Visibility API
• Joe Marini, Using the pageVisbility API
• Jatinder Mann, Using PC Hardware more efficiently in HTML5: New Web Performance APIs, Part 2
• Ilya Grigorik，Don’t lose user and app state, use Page Visibility