การโหลดเว็บไซต์อาจมีประสบการณ์ที่แตกต่างกันอย่างมาก ทั้งนี้ขึ้นอยู่กับเงื่อนไขของเครือข่าย ทุกอย่างมักจะราบรื่นเมื่อคุณใช้เครือข่ายที่เร็ว แต่เมื่อคุณอยู่บนอินเทอร์เน็ตด้วยแผนข้อมูลที่จำกัดและการเชื่อมต่อขาดๆ หายๆ หรือต้องใช้แล็ปท็อปกับ Wi-Fi ร้านกาแฟที่ทำงานช้าอยู่ ก็จะต้องเปลี่ยน
วิธีหนึ่งในการจัดการกับปัญหานี้คือการปรับเนื้อหาที่คุณจะแสดงต่อผู้ใช้โดยอิงตามคุณภาพของการเชื่อมต่อ ซึ่งตอนนี้ทำได้ด้วย Network Information API ซึ่งทำให้เว็บแอปพลิเคชันเข้าถึงข้อมูลเกี่ยวกับเครือข่ายของผู้ใช้ได้
การใช้งาน
คุณสามารถใช้ข้อมูลเครือข่ายนี้เพื่อปรับปรุงประสบการณ์ของผู้ใช้ได้หลายวิธีดังนี้
- สลับระหว่างการแสดงเนื้อหาที่มีความละเอียดสูงและความละเอียดต่ำตามเครือข่ายของผู้ใช้
- เลือกว่าจะโหลดทรัพยากรล่วงหน้าหรือไม่
- เลื่อนการอัปโหลดและดาวน์โหลดเมื่อผู้ใช้มีการเชื่อมต่อที่ช้า
- เปิดใช้โหมดออฟไลน์หากคุณภาพเครือข่ายไม่ดีพอที่จะโหลดแอปและใช้ฟีเจอร์ต่างๆ
- เตือนผู้ใช้ว่าการดำเนินการบางอย่าง (เช่น การดูวิดีโอ) ผ่านเครือข่ายมือถืออาจทำให้มีค่าใช้จ่าย
- ใช้รายงานนี้ในข้อมูลวิเคราะห์เพื่อรวบรวมข้อมูลเกี่ยวกับคุณภาพเครือข่ายของผู้ใช้
แอปพลิเคชันจำนวนมากก็ทำสิ่งที่คล้ายกันอยู่แล้ว ตัวอย่างเช่น YouTube, Netflix และบริการวิดีโอ (หรือวิดีโอคอล) อื่นๆ ส่วนใหญ่จะปรับความละเอียดในระหว่างการสตรีมโดยอัตโนมัติ ขณะที่ Gmail กำลังโหลดอยู่ จะแสดงลิงก์ไปยัง "โหลด HTML พื้นฐาน (สำหรับการเชื่อมต่อที่ช้า)" แก่ผู้ใช้
วิธีการทำงาน
ออบเจ็กต์ navigator.connection มีข้อมูลเกี่ยวกับการเชื่อมต่อของไคลเอ็นต์ โดยพร็อพเพอร์ตี้จะระบุไว้ในตารางด้านล่าง
| พร็อพเพอร์ตี้ | คำอธิบาย |
|---|---|
downlink |
แบนด์วิดท์โดยประมาณในหน่วยเมกะบิตต่อวินาที |
effectiveType |
ประเภทการเชื่อมต่อที่มีประสิทธิภาพซึ่งมีค่าที่เป็นไปได้ 'slow-2g', '2g', '3g' หรือ '4g' (ครอบคลุม 4g ขึ้นไป) กำหนดโดยพิจารณาทั้งระยะเวลาการรับส่งและความเร็วในการลิงก์ลง เช่น ดาวน์ลิงก์ที่รวดเร็วรวมกับเวลาในการตอบสนองสูงจะมี EffectiveType ต่ำกว่าเนื่องจากเวลาในการตอบสนอง |
onchange |
เครื่องจัดการเหตุการณ์ที่เริ่มทำงานเมื่อข้อมูลการเชื่อมต่อมีการเปลี่ยนแปลง |
rtt |
เวลาในการตอบสนองโดยประมาณของการเชื่อมต่อไป-กลับของการเชื่อมต่อในหน่วยมิลลิวินาที |
saveData |
บูลีนที่ระบุว่าผู้ใช้ได้ขอโหมดลดปริมาณการใช้อินเทอร์เน็ตหรือไม่ |
เมื่อเรียกใช้ในคอนโซลของเบราว์เซอร์จะมีลักษณะดังนี้
ค่า effectiveType ยังใช้ผ่านคำแนะนำของไคลเอ็นต์ได้ด้วย และให้คุณสื่อสารประเภทการเชื่อมต่อของเบราว์เซอร์กับเซิร์ฟเวอร์ได้
Listener เหตุการณ์ onchange ให้คุณปรับตัวให้เข้ากับการเปลี่ยนแปลงด้านคุณภาพของเครือข่ายได้แบบไดนามิก หากคุณเลื่อนการอัปโหลดหรือดาวน์โหลดเนื่องจากสภาพเครือข่ายไม่ดี คุณจะใช้ Listener เหตุการณ์เพื่อเริ่มการโอนอีกครั้งเมื่อตรวจพบสภาพเครือข่ายที่ดียิ่งขึ้น อีกทั้งยังใช้เพื่อแจ้งผู้ใช้เมื่อคุณภาพของเครือข่ายมีการเปลี่ยนแปลงได้ด้วย เช่น หากสัญญาณ Wi-Fi ขาดหายและอยู่ในเครือข่ายมือถือ จะทำให้ระบบไม่โอนข้อมูล (และเรียกเก็บเงิน 💸) โดยไม่ได้ตั้งใจ
ใช้ Listener เหตุการณ์ onchange แบบเดียวกับที่คุณใช้กับ Listener เหตุการณ์อื่นๆ
navigator.connection.addEventListener('change', doSomethingOnChange);
บทสรุป
ประโยชน์ที่เป็นไปได้ของ Network Information API นั้นมีมากมาย โดยเฉพาะสำหรับผู้ใช้ในเครือข่ายที่ช้า และแอปพลิเคชันที่ต้องใช้แบนด์วิดท์ปริมาณมาก ยิ่งไปกว่านั้น สามารถใช้เป็นเทคนิคการเพิ่มประสิทธิภาพแบบต่อเนื่องได้