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

Milica Mihajlija

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

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

การใช้งาน

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

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

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

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

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

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

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

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

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

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

บทสรุป

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