หน้านี้ได้รับการแปลโดย Cloud Translation API

การใช้ API การเปิดเผยหน้าเว็บ

Ernest Delgado

บทนำ

ในฐานะนักพัฒนาเว็บ เรามักจะตื่นเต้นกับเทคโนโลยีใหม่ๆ ที่ช่วยให้เราสร้างหน้าเว็บแบบอินเทอร์แอกทีฟที่น่าสนใจยิ่งขึ้น กราฟิก 3 มิติที่มี WebGL ใช่ไหม แน่นอน ความสามารถด้านเสียงขั้นสูงด้วย WebAudio ได้อยู่แล้ว แอปพลิเคชันการทำงานร่วมกันแบบเรียลไทม์ที่ใช้เว็บแคมและไมโครโฟน ให้ฉันลงชื่อสมัครเลย

เทคโนโลยีที่ช่วยให้เราสามารถสร้างแอปพลิเคชันที่ทำงานได้อย่างมีประสิทธิภาพมากขึ้นและมอบประสบการณ์โดยรวมที่ดียิ่งขึ้นให้แก่ผู้ใช้ก็มีความสำคัญไม่แพ้กัน ซึ่ง API อย่าง PageVisibility จะเข้ามามีบทบาทในจุดนี้

API สำหรับระดับการเข้าถึงหน้าเว็บทําหน้าที่ง่ายๆ แต่สําคัญ ซึ่งช่วยให้แอปพลิเคชันทราบว่าผู้ใช้มองเห็นหน้าเว็บเมื่อใด ข้อมูลพื้นฐานนี้ช่วยให้สร้างหน้าเว็บที่ทำงานแตกต่างกันเมื่อไม่มีผู้ดู ลองดูตัวอย่างต่อไปนี้

หน้าเว็บที่ดึงข้อมูลจากเซิร์ฟเวอร์อาจทำให้รอบการอัปเดตช้าลงเมื่อไม่มีผู้เข้าชม
หน้าที่แสดงภาพหมุนแบบหมุนหรือเนื้อหาวิดีโอ/เสียงจะหยุดชั่วคราวได้จนกว่าผู้ใช้จะแสดงหน้านั้นอีกครั้ง
แอปพลิเคชันจะเลือกแสดงการแจ้งเตือนต่อผู้ใช้ได้ก็ต่อเมื่อแอปพลิเคชันนั้นซ่อนอยู่

ในตอนแรก API นี้อาจไม่ค่อยมีประโยชน์มากไปกว่าความสะดวกของผู้ใช้ แต่เมื่อพิจารณาจากการเพิ่มขึ้นของการเรียกดูเว็บบนอุปกรณ์เคลื่อนที่อย่างมาก อะไรก็ตามที่ช่วยประหยัดพลังงานแบตเตอรี่ของอุปกรณ์ได้กลายเป็นเรื่องที่สำคัญมาก การใช้ PageVisibility API จะช่วยให้เว็บไซต์ช่วยประหยัดพลังงานของอุปกรณ์ของผู้ใช้และใช้งานได้นานขึ้น

การรองรับเบราว์เซอร์

แหล่งที่มา

ข้อกำหนดของ API ซึ่งขณะที่เขียนนี้อยู่ในระยะการแนะนำผู้สมัคร มีทั้งพร็อพเพอร์ตี้สำหรับตรวจหาสถานะการแสดงผลของเอกสารและเหตุการณ์สำหรับการตอบสนองต่อการเปลี่ยนแปลงการแสดงผล

ในบทแนะนํานี้ เราจะอธิบายข้อมูลเบื้องต้นเกี่ยวกับ API และแสดงวิธีนําไปใช้กับตัวอย่างการใช้งานจริง (หากไม่ชอบรอ ให้ข้ามไปดูตัวอย่างได้เลย)

คุณสมบัติการแสดงเอกสาร

ข้อกําหนดของ PageVisibilityAPI เวอร์ชันปัจจุบันกําหนดพร็อพเพอร์ตี้เอกสาร 2 รายการ ได้แก่ บูลีน hidden และการจัดหมวดหมู่ visibilityState ปัจจุบันพร็อพเพอร์ตี้ visibilityState มี 4 ค่าที่เป็นไปได้ ได้แก่ hidden, visible, prerender และ unloaded

หมายเหตุ: พร็อพเพอร์ตี้เหล่านี้จะใส่คำนำหน้าของผู้ให้บริการในเบราว์เซอร์ Android เท่านั้น ซึ่งคุณจะต้องใช้เวอร์ชันนำหน้า เช่น webkitHidden และ webkitVisibilityState เบราว์เซอร์อื่นๆ ทั้งหมดที่รองรับ (IE 10 ขึ้นไป, Firefox, Chrome, Safari) จะใช้เวอร์ชันที่ไม่มีคำนำหน้า

ดังที่คุณคาดไว้ แอตทริบิวต์ hidden จะแสดงผลเป็น True เมื่อเอกสารไม่แสดงเลย โดยทั่วไปแล้ว สถานะนี้หมายความว่าเอกสารถูกย่ออยู่ อยู่ในแท็บเบื้องหลัง หน้าจอล็อกของระบบปฏิบัติการเปิดอยู่ ฯลฯ ระบบจะตั้งค่าแอตทริบิวต์เป็นเท็จหากมีบางส่วนของเอกสารที่มองเห็นได้อย่างน้อยบางส่วนบนจอแสดงผลอย่างน้อย 1 จอ นอกจากนี้ คุณยังตั้งค่าแอตทริบิวต์ hidden เป็น 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: มองเห็นเอกสารได้อย่างน้อยบางส่วนบนอุปกรณ์แสดงผลอย่างน้อย 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";
   }
}

สรุป

การสร้างเว็บแอปพลิเคชันที่ยอดเยี่ยมนั้นเกี่ยวข้องกับมากกว่าการใช้ฟีเจอร์ที่ยอดเยี่ยมและดึงดูดสายตาซึ่งผู้ใช้สามารถมองเห็นและโต้ตอบด้วย แอปพลิเคชันที่ยอดเยี่ยมอย่างแท้จริงจะใช้ประโยชน์จากทรัพยากรและความสนใจของผู้ใช้อย่างรอบคอบ และ Page Visibility API เป็นส่วนสําคัญของโจทย์นี้ ดูข้อมูลเพิ่มเติมเกี่ยวกับการสร้างเว็บแอปพลิเคชันที่ประหยัดทรัพยากรได้ที่บทความอื่นๆ ที่เกี่ยวข้องกับประสิทธิภาพ