引言
身為網頁程式開發人員,我們樂見各種新技術來打造互動性更高、互動性更強的網頁。要透過 WebGL 使用 3D 圖形嗎?當然可以。要支援 WebAudio 的進階音訊功能嗎?沒關係。即時協作應用程式需使用網路攝影機和麥克風嗎?立即申請!
這些技術雖然較不令人興奮,但也很重要,這些技術讓我們可以建構應用程式的執行效率更高,且能提供更優異的整體使用者體驗。這便是 PageVisibility 這類 API 的所在。
Page Visibility API 執行簡單但重要的功能,可讓應用程式知道使用者何時可瀏覽網頁。這項基本資訊可讓您建立網頁,而這些網頁在使用者未觀看的情況下會有不同反應。以下列舉幾個例子:
- 網頁從伺服器擷取資訊後,如果使用者不積極瀏覽資訊,更新週期速度可能會變慢
- 顯示旋轉圖片輪轉介面或影片/音訊內容的網頁可能會暫停,直到使用者再次顯示網頁為止
- 應用程式決定只在對使用者隱藏通知時,才向使用者顯示通知
一開始,這個 API 似乎除了使用者方便之外,有時可能並不實用,但考慮到行動網頁瀏覽數量的大幅增加後,任何有助於節省裝置的電池電力都至關重要。藉由使用 PageVisibility API,您的網站有助於使用者的裝置消耗較少電力,並延長續航力。
本文中所說的 API 規格 (在本文處於「候選建議」階段) 中提供了偵測文件瀏覽權限狀態的屬性,以及用於回應瀏覽權限變更的事件。
本教學課程將說明 API 的基本概念,並示範如何應用在一些實際的範例 (如果您還不太熟悉,也可以直接跳到範例部分)。
文件瀏覽權限屬性
目前版本的 PageVisibilityAPI 規格會定義兩種文件屬性:布林值 hidden
和列舉 visibilityState
。visibilityState 屬性目前有四個可能的值:hidden
、visible
、prerender
和 unloaded
。
隱藏的屬性會在完全無法查看文件時傳回 true。這通常表示文件已最小化、在背景分頁上、OS 的螢幕鎖定等。如果文件的任一部分至少在一個螢幕畫面中至少有部分顯示,屬性會設為 false。此外,為了配合無障礙工具,如果放大鏡等工具完全遮蔽文件,但現在卻顯示該文件的檢視畫面,隱藏屬性可設為 false。
處理供應商前置字元
為了將焦點放在程式碼上,而非所有供應商專用的前置字串,我要使用部分輔助函式區隔瀏覽器專用項目。一旦停止支援 Android 4.4 瀏覽器,您就可以移除此部分並繼續使用標準名稱。
function getHiddenProp(){
var prefixes = ['webkit','moz','ms','o'];
// if 'hidden' is natively supported just return it
if ('hidden' in document) return 'hidden';
// otherwise loop over all the known prefixes until we find one
for (var i = 0; i < prefixes.length; i++){
if ((prefixes[i] + 'Hidden') in document)
return prefixes[i] + 'Hidden';
}
// otherwise it's not supported
return null;
}
文件屬性範例
我們現在可以編寫跨瀏覽器函式 isHidden()
,檢查文件是否可供檢視。
function isHidden() {
var prop = getHiddenProp();
if (!prop) return false;
return document[prop];
}
如需更精細的文件瀏覽權限,可以使用 visibilityState 屬性。此屬性會傳回下列四個值的其中之一:
hidden
:文件已完全隱藏,無法查看visible
:文件至少有部分在一部顯示裝置上看得到prerender
:文件是從畫面外載入且無法顯示 (選用值;並非所有瀏覽器都支援這個值)unloaded
:如要卸載文件,系統會傳回這個值 (選用值;並非所有瀏覽器都支援此值)
VisibilityChange 事件
除了瀏覽權限屬性以外,每當文件的瀏覽權限狀態變更時,會觸發顯示設定變更事件。您可以直接在文件物件上註冊這個事件的事件監聽器:
事件範例
// use the property name to generate the prefixed event name
var visProp = getHiddenProp();
if (visProp) {
var evtname = visProp.replace(/[H|h]idden/,'') + 'visibilitychange';
document.addEventListener(evtname, visChange);
}
function visChange() {
var txtFld = document.getElementById('visChangeText');
if (txtFld) {
if (isHidden())
txtFld.value += "Tab Hidden!\n";
else
txtFld.value += "Tab Visible!\n";
}
}
摘要
要建構優質的網頁應用程式,不單只是運用巧思、引人注目,讓使用者可看見並進行互動的功能。真正出色的應用程式會考量使用者的資源和注意力,Page Visibility API 是非常重要的一環。如要進一步瞭解如何建構重視資源的網頁應用程式,請參閱我們的其他效能相關文章。