เกริ่นนำ
ในฐานะนักพัฒนาเว็บ เรามีแนวโน้มที่จะตื่นเต้นกับเทคโนโลยีใหม่ๆ ที่ช่วยให้เราสามารถสร้างหน้าเว็บแบบอินเทอร์แอกทีฟที่น่าสนใจกว่าเดิม กราฟิก 3 มิติด้วย WebGL แน่นอน มีความสามารถด้านเสียงขั้นสูงกับ WebAudio ไหม โอเค ตามนั้นเลย แอปพลิเคชันการทำงานร่วมกันแบบเรียลไทม์ที่ใช้เว็บแคมและไมโครโฟนใช่ไหม ให้ฉันลงชื่อสมัครเลย
ความน่าสนใจน้อยลงแต่มีความสำคัญไม่แพ้กัน คือเทคโนโลยีที่ช่วยให้เราสร้างแอปพลิเคชันที่ทำงานอย่างมีประสิทธิภาพมากขึ้น และมอบประสบการณ์โดยรวมที่ดีขึ้นให้กับผู้ใช้ ซึ่ง API อย่าง Page visibility เข้ามามีบทบาทในจุดนี้
API สำหรับการมองเห็นหน้าเว็บทำงานแบบง่ายแต่มีความสำคัญ ซึ่งช่วยให้แอปพลิเคชันของคุณทราบเมื่อผู้ใช้เห็นหน้าเว็บ ข้อมูลพื้นฐานนี้จะช่วยให้คุณสามารถสร้างหน้าเว็บที่มีการทำงานแตกต่างกันเมื่อไม่ได้ถูกดู ลองดูตัวอย่างต่อไปนี้
- หน้าเว็บที่เรียกข้อมูลจากเซิร์ฟเวอร์อาจชะลอรอบการอัปเดตเมื่อไม่ได้ใช้งาน
- หน้าเว็บที่แสดงภาพสไลด์แบบหมุนหรือเนื้อหาวิดีโอ/เสียงอาจหยุดชั่วคราวจนกว่าผู้ใช้จะแสดงหน้าเว็บอีกครั้ง
- แอปพลิเคชันสามารถเลือกแสดงการแจ้งเตือนให้กับผู้ใช้ได้เฉพาะเมื่อซ่อนไว้ไม่ให้เห็น
ในตอนแรก API นี้อาจดูไม่มีประโยชน์มากนักที่นอกเหนือจากความสะดวกของผู้ใช้ แต่เมื่อพิจารณาการท่องเว็บบนอุปกรณ์เคลื่อนที่ที่เพิ่มขึ้นอย่างมาก สิ่งใดก็ตามที่ช่วยประหยัดพลังงานแบตเตอรี่ของอุปกรณ์ได้กลายเป็นสิ่งสำคัญมาก การใช้ Page visibility API ช่วยให้เว็บไซต์ของคุณสามารถช่วยให้อุปกรณ์ของผู้ใช้ใช้พลังงานน้อยลงและใช้งานได้ยาวนานขึ้น
ข้อกำหนด API ซึ่ง ณ เวลาที่เขียนนี้อยู่ในขั้นตอนการแนะนำผู้สมัคร จะให้ทั้งพร็อพเพอร์ตี้สำหรับการตรวจหาสถานะระดับการเข้าถึงของเอกสารและเหตุการณ์สำหรับตอบสนองต่อการเปลี่ยนแปลงระดับการเข้าถึง
ในบทแนะนำนี้ เราจะพูดถึงข้อมูลพื้นฐานเกี่ยวกับ API และแสดงวิธีนำไปใช้กับตัวอย่างที่ใช้ได้จริง (คุณสามารถข้ามไปยังตัวอย่างเหล่านี้ได้หากคุณเป็นคนใจร้อน)
คุณสมบัติของการเปิดเผยเอกสาร
ข้อกำหนด Page visibilityAPI เวอร์ชันปัจจุบันกำหนดพร็อพเพอร์ตี้เอกสาร 2 แบบ ได้แก่ บูลีน hidden และการแจงนับ visibilityState ปัจจุบันพร็อพเพอร์ตี้ visibilityState มีค่าที่เป็นไปได้ 4 ค่า ได้แก่ hidden, visible, prerender และ unloaded
ตามที่คุณอาจคาดไว้ แอตทริบิวต์ที่ซ่อนอยู่จะแสดงผลค่า "จริง" เมื่อมองไม่เห็นเอกสารเลย โดยปกติแล้วจะหมายความว่าเอกสารถูกย่อเล็กสุด, ในแท็บเบื้องหลัง, หน้าจอล็อกของระบบปฏิบัติการเปิดอยู่ เป็นต้น แอตทริบิวต์จะถูกตั้งค่าเป็น "เท็จ" หากส่วนใดส่วนหนึ่งของเอกสารมองเห็นได้บ้างบางส่วนบนจอแสดงผลอย่างน้อย 1 จอ นอกจากนี้ คุณสามารถตั้งค่าแอตทริบิวต์ที่ซ่อนอยู่เป็น "เท็จ" เมื่อเครื่องมือ เช่น แว่นขยายหน้าจอ บังเอกสารทั้งหมด แต่แสดงมุมมองของเอกสาร เพื่อให้เครื่องมือช่วยเหลือพิเศษทำงานได้
การจัดการกับคำนำหน้าผู้ให้บริการ
เพื่อให้โฟกัสอยู่ที่โค้ดแทนการนำหน้าเฉพาะผู้ให้บริการทั้งหมด ฉันจะใช้ฟังก์ชันตัวช่วยเพื่อแยกรายการเฉพาะเบราว์เซอร์ ทันทีที่คุณเลิกรองรับเบราว์เซอร์ 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 ได้ พร็อพเพอร์ตี้นี้แสดงค่าใดค่าหนึ่งจาก 4 ค่าต่อไปนี้
hidden: ซ่อนเอกสารไม่ให้เห็นโดยสิ้นเชิงvisible: มองเห็นเอกสารได้บางส่วนบนอุปกรณ์แสดงผลอย่างน้อย 1 เครื่องprerender: เอกสารโหลดนอกหน้าจอและมองไม่เห็น (ไม่จำเป็นต้องใส่ค่านี้ และบางเบราว์เซอร์อาจไม่รองรับฟีเจอร์นี้)unloaded: หากจะยกเลิกการโหลดเอกสาร ระบบจะแสดงค่านี้ (ไม่บังคับ) เบราว์เซอร์บางรายการอาจไม่รองรับการตั้งค่านี้
เหตุการณ์ visibilityChange
นอกจากพร็อพเพอร์ตี้ระดับการเข้าถึงแล้ว ยังมีเหตุการณ์ visibilitychange ที่เริ่มทำงานเมื่อสถานะการเปิดเผยของเอกสารเปลี่ยนแปลง คุณลงทะเบียน Listener เหตุการณ์สำหรับเหตุการณ์นี้ได้โดยตรงในออบเจ็กต์เอกสาร
ตัวอย่างเหตุการณ์
// 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";
}
}
สรุป
การสร้างเว็บแอปพลิเคชันที่ยอดเยี่ยมไม่ใช่เพียงการใช้ฟีเจอร์สะดุดตาที่ผู้ใช้ดูและโต้ตอบด้วยได้เพียงอย่างเดียว แอปพลิเคชันที่ยอดเยี่ยมอย่างแท้จริงจะใช้ทรัพยากรและความสนใจของผู้ใช้ในระดับที่เหมาะสม และ API ของการมองเห็นหน้าเว็บก็เป็นกุญแจสำคัญ หากต้องการดูข้อมูลเพิ่มเติมเกี่ยวกับการสร้างเว็บแอปพลิเคชันที่เน้นทรัพยากร โปรดดูบทความอื่นๆ เกี่ยวกับประสิทธิภาพ