# Page Visibility API
## 簡介
有時候，開發者需要知道，用戶正在離開頁面。常用的方法是監聽下面三個事件。
> - `pagehide`
> - `beforeunload`
> - `unload`
但是，這些事件在手機上可能不會觸發，頁面就直接關閉了。因為手機系統可以將一個進程直接轉入后臺，然后殺死。
> - 用戶點擊了一條系統通知，切換到另一個 App。
> - 用戶進入任務切換窗口，切換到另一個 App。
> - 用戶點擊了 Home 按鈕，切換回主屏幕。
> - 操作系統自動切換到另一個 App（比如，收到一個電話）。
上面這些情況，都會導致手機將瀏覽器進程切換到后臺，然后為了節省資源，可能就會殺死瀏覽器進程。
以前，頁面被系統切換，以及系統清除瀏覽器進程，是無法監聽到的。開發者想要指定，任何一種頁面卸載情況下都會執行的代碼，也是無法做到的。為了解決這個問題，就誕生了 Page Visibility API。不管手機或桌面電腦，所有情況下，這個 API 都會監聽到頁面的可見性發生變化。
這個新的 API 的意義在于，通過監聽網頁的可見性，可以預判網頁的卸載，還可以用來節省資源，減緩電能的消耗。比如，一旦用戶不看網頁，下面這些網頁行為都是可以暫停的。
> - 對服務器的輪詢
> - 網頁動畫
> - 正在播放的音頻或視頻
## document.visibilityState
這個 API 主要在`document`對象上，新增了一個`document.visibilityState`屬性。該屬性返回一個字符串，表示頁面當前的可見性狀態，共有三個可能的值。
> - `hidden`：頁面徹底不可見。
> - `visible`：頁面至少一部分可見。
> - `prerender`：頁面即將或正在渲染，處于不可見狀態。
其中，`hidden`狀態和`visible`狀態是所有瀏覽器都必須支持的。`prerender`狀態只在支持“預渲染”的瀏覽器上才會出現，比如 Chrome 瀏覽器就有預渲染功能，可以在用戶不可見的狀態下，預先把頁面渲染出來，等到用戶要瀏覽的時候，直接展示渲染好的網頁。
只要頁面可見，哪怕只露出一個角，`document.visibilityState`屬性就返回`visible`。只有以下四種情況，才會返回`hidden`。
> - 瀏覽器最小化。
> - 瀏覽器沒有最小化，但是當前頁面切換成了背景頁。
> - 瀏覽器將要卸載（unload）頁面。
> - 操作系統觸發鎖屏屏幕。
可以看到，上面四種場景涵蓋了頁面可能被卸載的所有情況。也就是說，頁面卸載之前，`document.visibilityState`屬性一定會變成`hidden`。事實上，這也是設計這個 API 的主要目的。
另外，早期版本的 API，這個屬性還有第四個值`unloaded`，表示頁面即將卸載，現在已經被廢棄了。
注意，`document.visibilityState`屬性只針對頂層窗口，內嵌的`<iframe>`頁面的`document.visibilityState`屬性由頂層窗口決定。使用 CSS 屬性隱藏`<iframe>`頁面（比如`display: none;`），并不會影響內嵌頁面的可見性。
## document.hidden
由于歷史原因，這個 API 還定義了`document.hidden`屬性。該屬性只讀，返回一個布爾值，表示當前頁面是否可見。
當`document.visibilityState`屬性返回`visible`時，`document.hidden`屬性返回`false`；其他情況下，都返回`true`。
該屬性只是出于歷史原因而保留的，只要有可能，都應該使用`document.visibilityState`屬性，而不是使用這個屬性。
## visibilitychange 事件
只要`document.visibilityState`屬性發生變化，就會觸發`visibilitychange`事件。因此，可以通過監聽這個事件（通過`document.addEventListener()`方法或`document.onvisibilitychange`屬性），跟蹤頁面可見性的變化。
```javascript
document.addEventListener('visibilitychange', function () {
// 用戶離開了當前頁面
if (document.visibilityState === 'hidden') {
document.title = '頁面不可見';
}
// 用戶打開或回到頁面
if (document.visibilityState === 'visible') {
document.title = '頁面可見';
}
});
```
上面代碼是 Page Visibility API 的最基本用法，可以監聽可見性變化。
下面是另一個例子，一旦頁面不可見，就暫停視頻播放。
```javascript
var vidElem = document.getElementById('video-demo');
document.addEventListener('visibilitychange', startStopVideo);
function startStopVideo() {
if (document.visibilityState === 'hidden') {
vidElem.pause();
} else if (document.visibilityState === 'visible') {
vidElem.play();
}
}
```
## 頁面卸載
下面專門討論一下，如何正確監聽頁面卸載。
頁面卸載可以分成三種情況。
> - 頁面可見時，用戶關閉 Tab 頁或瀏覽器窗口。
> - 頁面可見時，用戶在當前窗口前往另一個頁面。
> - 頁面不可見時，用戶或系統關閉瀏覽器窗口。
這三種情況，都會觸發`visibilitychange`事件。前兩種情況，該事件在用戶離開頁面時觸發；最后一種情況，該事件在頁面從可見狀態變為不可見狀態時觸發。
由此可見，`visibilitychange`事件比`pagehide`、`beforeunload`、`unload`事件更可靠，所有情況下都會觸發（從`visible`變為`hidden`）。因此，可以只監聽這個事件，運行頁面卸載時需要運行的代碼，不用監聽后面那三個事件。
甚至可以這樣說，`unload`事件在任何情況下都不必監聽，`beforeunload`事件只有一種適用場景，就是用戶修改了表單，沒有提交就離開當前頁面。另一方面，指定了這兩個事件的監聽函數，瀏覽器就不會緩存當前頁面。
## 參考鏈接
- [Page Visibility Level 2](https://w3c.github.io/page-visibility/), W3C
- [Page Visibility API](http://davidwalsh.name/page-visibility), David Walsh
- [Using the pageVisbility API](http://www.html5rocks.com/en/tutorials/pagevisibility/intro/), Joe Marini
- [Using PC Hardware more efficiently in HTML5: New Web Performance APIs, Part 2](http://blogs.msdn.com/b/ie/archive/2011/07/08/using-pc-hardware-more-efficiently-in-html5-new-web-performance-apis-part-2.aspx), Jatinder Mann
- [Don't lose user and app state, use Page Visibility](https://www.igvita.com/2015/11/20/dont-lose-user-and-app-state-use-page-visibility/), Ilya Grigorik
