Google ใช้เทคโนโลยี AI เพื่อแปลเนื้อหาเป็นภาษาที่คุณต้องการ การแปลโดย AI อาจมีข้อผิดพลาด

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

Ernest Delgado

บทนำ

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

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

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

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

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

Browser Support

Source

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

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

คุณสมบัติระดับการเข้าถึงเอกสาร

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

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

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

สรุป

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