JavaScript Page Visibility API

目錄

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

• visibilityState
• pageshow
• pagehide
• beforeunload
• unload

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

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

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

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

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

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

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

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

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

這個(gè) API 部署在document對(duì)象上，提供以下兩個(gè)屬性。

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

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