JavaScript Page Visibility API

目錄

通常，我們使用各種事件，判斷用戶是否正在離開當(dāng)前頁面。

• visibilityState
• pageshow
• pagehide
• beforeunload
• unload

但是，手機瀏覽器往往不會觸發(fā)這些事件，原因是瀏覽器進程會被突然關(guān)閉或者切換到后臺，從而沒有機會觸發(fā)這些事件。常見的場景有以下這些。

• 用戶點擊了一條系統(tǒng)通知，切換到另一個 App。
• 用戶進入任務(wù)切換窗口，切換到另一個 App。
• 用戶點擊了 Home 按鈕，切換回主屏幕。
• 操作系統(tǒng)自動切換到另一個 App（比如，收到一個打入的電話）。

上面這些情況，都會導(dǎo)致瀏覽器進程切換到后臺，也很可能會被操作系統(tǒng)自動終止，以便回收資源。 這使得pagehide、beforeunload、unload等事件根本不會觸發(fā)。

這種情況下面，我們就要使用 Page Visibility API，判斷頁面是否可見。它可以保證會在手機瀏覽器得到執(zhí)行。

// 頁面的 visibility 屬性可能返回三種狀態(tài)
// prerender，visible 和 hidden
let pageVisibility = document.visibilityState;

// 監(jiān)聽 visibility change 事件
document.addEventListener('visibilitychange', function() {
  // 頁面變?yōu)椴豢梢姇r觸發(fā)
  if (document.visibilityState == 'hidden') { ... }

  // 頁面變?yōu)榭梢姇r觸發(fā)
  if (document.visibilityState == 'visible') { ... }
});

其他的用途還包括根據(jù)用戶行為調(diào)整程序。比如，在輪詢的情況下，如果頁面處于當(dāng)前窗口，可以每隔15秒向服務(wù)器請求數(shù)據(jù)；如果不處于當(dāng)前窗口，則每隔幾分鐘請求一次數(shù)據(jù)。

實際開發(fā)中，為了防止某些瀏覽器不支持這個 API，最好同時監(jiān)聽pagehide事件，這樣會比較保險。

這個 API 部署在document對象上，提供以下兩個屬性。

• document.hidden：返回一個布爾值，表示當(dāng)前是否被隱藏。
• document.visibilityState：表示頁面當(dāng)前的狀態(tài)，可以取三個值。
  • visibile：頁面可見
  • hidden：頁面不可見
  • prerender：頁面即將或正在渲染，不可見

頁面的可見狀態(tài)發(fā)生變化時，會觸發(fā)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