ปรับเปลี่ยนการแสดงผลตามคุณภาพของเครือข่าย

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

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

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

  • Chrome: 61
  • Edge: 79
  • Firefox: ไม่รองรับ
  • Safari: ไม่รองรับ

แหล่งที่มา

การใช้งาน

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

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

แอปพลิเคชันจำนวนมากกำลังทำสิ่งที่คล้ายคลึงกันอยู่แล้ว ตัวอย่างเช่น YouTube, Netflix และบริการวิดีโอ (หรือวิดีโอคอล) อื่นๆ ส่วนใหญ่จะปรับความละเอียดโดยอัตโนมัติขณะสตรีม เมื่อกำลังโหลด Gmail ระบบจะแสดงลิงก์ "โหลด HTML พื้นฐาน (สำหรับการเชื่อมต่อที่ช้า)" ให้ผู้ใช้

ลิงก์สำหรับโหลด Gmail เวอร์ชัน HTML พื้นฐานเมื่อผู้ใช้ใช้การเชื่อมต่ออินเทอร์เน็ตช้า

วิธีการทำงาน

ออบเจ็กต์ navigator.connection มีข้อมูลเกี่ยวกับการเชื่อมต่อของลูกค้า รายละเอียดของคุณสมบัติจะอธิบายไว้ในตารางที่ด้านล่าง

พร็อพเพอร์ตี้ คำอธิบาย
downlink แบนด์วิดท์โดยประมาณเป็นเมกะบิตต่อวินาที
effectiveType ประเภทการเชื่อมต่อที่มีประสิทธิภาพ ซึ่งมีค่าที่เป็นไปได้ 'slow-2g', '2g', '3g' หรือ '4g' (ครอบคลุม 4G ขึ้นไป) พิจารณาจากเวลาในการรับส่งข้อมูลและความเร็วในการรับข้อมูล เช่น ลิงก์ดาวน์ลิงก์แบบเร็วที่มีเวลาในการตอบสนองสูงจะมี EffectiveType ต่ำเนื่องจากเวลาในการตอบสนอง
onchange ตัวแฮนเดิลเหตุการณ์ที่เริ่มทํางานเมื่อข้อมูลการเชื่อมต่อมีการเปลี่ยนแปลง
rtt เวลาในการตอบสนองโดยประมาณของการเชื่อมต่อแบบไปกลับเป็นมิลลิวินาที
saveData บูลีนที่ระบุว่าผู้ใช้ได้ขอโหมดการใช้งานอินเทอร์เน็ตที่ลดลงหรือไม่

ลักษณะของการทำงานเมื่อคุณเรียกใช้ในคอนโซลของเบราว์เซอร์มีดังนี้

คอนโซลเครื่องมือสำหรับนักพัฒนาเว็บของ Chrome ที่แสดงค่าของพร็อพเพอร์ตี้ออบเจ็กต์ navigator.connection

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

Listener เหตุการณ์ onchange ช่วยให้คุณปรับตัวแบบไดนามิกตามการเปลี่ยนแปลงด้านคุณภาพเครือข่าย หากคุณเลื่อนการอัปโหลดหรือดาวน์โหลดเนื่องจากสภาพเครือข่ายไม่ดี คุณสามารถใช้ Listener เหตุการณ์เพื่อเริ่มการโอนใหม่เมื่อตรวจพบสภาพเครือข่ายที่ดีกว่า หรือจะใช้เพื่อแจ้งผู้ใช้เมื่อคุณภาพเครือข่ายเปลี่ยนแปลงก็ได้ เช่น หากอุปกรณ์สูญเสียสัญญาณ Wi-Fi และเปลี่ยนไปใช้เครือข่ายมือถือ ฟีเจอร์นี้จะช่วยป้องกันไม่ให้เกิดการโอนข้อมูลโดยไม่ตั้งใจ (และมีการเรียกเก็บเงิน 💸)

ใช้ Listener เหตุการณ์ onchange เช่นเดียวกับ Listener เหตุการณ์อื่นๆ ดังนี้

navigator.connection.addEventListener('change', doSomethingOnChange);

บทสรุป

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