ในโค้ดแล็บนี้ คุณจะได้เรียนรู้วิธีปรับเนื้อหาตามคุณภาพเครือข่าย วิดีโอพื้นหลังของหน้านี้จะโหลดเฉพาะเมื่อผู้ใช้ใช้เครือข่ายที่รวดเร็วเท่านั้น ระบบจะโหลดรูปภาพแทนในเครือข่ายที่ช้ากว่า
Network Information API ช่วยให้คุณเข้าถึงข้อมูลเกี่ยวกับคุณภาพการเชื่อมต่อของผู้ใช้ คุณจะใช้พร็อพเพอร์ตี้ effectiveType
ของชิ้นงานเพื่อตัดสินใจว่าจะแสดงวิดีโอเมื่อใดและจะแสดงรูปภาพเมื่อใด effectiveType
อาจเป็น 'slow-2g'
, '2g'
, '3g'
หรือ '4g'
ขั้นตอนที่ 1: ตรวจสอบประเภทการเชื่อมต่อ
ไฟล์ index.html
มีแท็ก <video>
เพื่อแสดงวิดีโอพื้นหลัง (บรรทัด 22) โค้ดใน script.js
จะโหลดวิดีโอโดยการตั้งค่าแอตทริบิวต์ src
ของแท็กวิดีโอ (ดูรายละเอียดเพิ่มเติมเกี่ยวกับโค้ดการโหลดวิดีโอได้ในขั้นตอนที่ 2)
หากต้องการโหลดวิดีโอแบบมีเงื่อนไข ให้ตรวจสอบก่อนว่า Network Information API พร้อมใช้งานหรือไม่ หากพร้อมใช้งาน ให้ตรวจสอบประเภทการเชื่อมต่อ
- ใน
script.js
ให้เพิ่มคำสั่งif
ที่ทดสอบว่าออบเจ็กต์navigator.connection
มีอยู่หรือไม่ และมีพร็อพเพอร์ตี้effectiveType
หรือไม่ - เพิ่มคำสั่ง
if
เพื่อตรวจสอบeffectiveType
ของเครือข่าย
if (navigator.connection && !!navigator.connection.effectiveType) {
if (navigator.connection.effectiveType === '4g') {
// Only load video on the fastest connections.
} else {
// In any other case load the image.
}
}
ตัดโค้ดการโหลดวิดีโอที่มีอยู่ไว้ในคำสั่ง else
เพื่อให้วิดีโอยังคงโหลดในเบราว์เซอร์ที่ไม่รองรับ Network Information API
if (navigator.connection && !!navigator.connection.effectiveType) {
if (navigator.connection.effectiveType === '4g') {
// video loading code
} else {
// image loading code
}
} else {
const video = document.getElementById('coverVideo');
const videoSource = video.getAttribute('data-src');
video.setAttribute('src', videoSource);
video.setAttribute('style', 'height: 100%; width: 100%; display:inline');
}
ขั้นตอนที่ 2: โหลดวิดีโอ
หาก effectiveType
เป็น '4g'
ให้ใช้โค้ดการโหลดวิดีโอจากตอนต้นของ Codelab
if (navigator.connection.effectiveType === '4g') {
const video = document.getElementById('coverVideo');
const videoSource = video.getAttribute('data-src');
video.setAttribute('src', videoSource);
video.setAttribute('style', 'height: 100%; width: 100%; display:inline');
} else {
// image loading code
}
การทำงานของโค้ดการโหลดวิดีโอมีดังนี้ แท็ก <video>
จะไม่ดาวน์โหลดหรือแสดงอะไรเลยในตอนแรกเนื่องจากไม่ได้ตั้งค่าแอตทริบิวต์ src
ระบุ URL ของวิดีโอที่จะโหลดโดยใช้แอตทริบิวต์ data-src
<video id="coverVideo" playsinline autoplay loop muted data-src="https://cdn.glitch.com/b6491350-b058-4eb6-aa6c-55c93122073e%2FMatrix%2C%20Console%2C%20Hacking%2C%20Code.mp4?1551464245607"></video>
แอตทริบิวต์ข้อมูลช่วยให้คุณจัดเก็บข้อมูลเพิ่มเติมในองค์ประกอบ HTML มาตรฐานได้ องค์ประกอบข้อมูลตั้งชื่ออะไรก็ได้ ตราบใดที่ขึ้นต้นด้วย "data-"
หากต้องการแสดงวิดีโอในหน้าเว็บจริงๆ คุณต้องรับค่าจาก data-src
และตั้งค่าเป็นแอตทริบิวต์ src
ขององค์ประกอบวิดีโอ
ขั้นแรก ให้รับองค์ประกอบ DOM ที่มีชิ้นงาน ดังนี้
const video = document.getElementById('coverVideo');
จากนั้นรับตำแหน่งแหล่งข้อมูลจากแอตทริบิวต์ data-src
const videoSource = video.getAttribute('data-src');
และสุดท้าย ให้ตั้งค่าดังกล่าวเป็นแอตทริบิวต์ src
ขององค์ประกอบวิดีโอ ดังนี้
video.setAttribute('src', videoSource);
บรรทัดสุดท้ายจะจัดการการจัดตําแหน่ง CSS
video.setAttribute('style', 'height: 100%; width: 100%; display:inline');
ขั้นตอนที่ 3: โหลดรูปภาพ
หากต้องการโหลดรูปภาพแบบมีเงื่อนไขในเครือข่ายที่ช้า ให้ใช้กลยุทธ์เดียวกับที่ใช้กับวิดีโอ
เพิ่มองค์ประกอบรูปภาพลงใน index.html
(ต่อจากองค์ประกอบวิดีโอ) และใช้แอตทริบิวต์ data-src
แทนแอตทริบิวต์ src
<img id="coverImage" data-src="https://cdn.glitch.com/36529535-5976-40f8-979b-40c898b86bd0%2F36529535-5976-40f8-979b-40c898b86bd0_1_Sn80dgiwpMjBVrqjfiDbnA.jpg?1553003835358" />
ใน script.js
ให้เพิ่มโค้ดเพื่อตั้งค่าแอตทริบิวต์ src
ของรูปภาพตาม effectiveType
ของเครือข่าย
if (navigator.connection.effectiveType === '4g') {
const video = document.getElementById('coverVideo');
const videoSource = video.getAttribute('data-src');
video.setAttribute('src', videoSource);
video.setAttribute('style', 'height: 100%; width: 100%; display:inline');
} else {
const image = document.getElementById('coverImage');
const imageSource = image.getAttribute('data-src');
image.setAttribute('src', imageSource);
image.setAttribute('style', 'height: 100%; width: 100%; display:inline');
}
ลองเลย
วิธีทดสอบด้วยตนเอง
- หากต้องการดูตัวอย่างเว็บไซต์ ให้กดดูแอป แล้วกดเต็มหน้าจอ
- กดแป้น Control+Shift+J (หรือ Command+Option+J ใน Mac) เพื่อเปิดเครื่องมือสำหรับนักพัฒนาซอฟต์แวร์
- คลิกแท็บเครือข่าย
- คลิกเมนูแบบเลื่อนลงการจำกัด ซึ่งตั้งค่าเป็นไม่มีการจำกัดโดยค่าเริ่มต้น เลือก Fast 3G
ตอนนี้ให้โหลดหน้าเว็บซ้ำโดยที่ยังคงเปิดใช้ 3G อย่างรวดเร็ว แอปโหลดรูปภาพในเบื้องหลังแทนวิดีโอในกรณีต่อไปนี้
คะแนนพิเศษ: ตอบสนองต่อการเปลี่ยนแปลง
คุณจำได้ว่า API นี้มี onchange
event listener ใช่ไหม
คุณสามารถใช้ฟีเจอร์นี้กับหลายสิ่งได้ เช่น การปรับเนื้อหาแบบไดนามิก เช่น คุณภาพวิดีโอ รีสตาร์ทการโอนข้อมูลที่เลื่อนเวลาไว้เมื่อตรวจพบการเปลี่ยนแปลงประเภทเครือข่ายที่มีแบนด์วิดท์สูง หรือแจ้งให้ผู้ใช้ทราบเมื่อคุณภาพเครือข่ายเปลี่ยนแปลง
ต่อไปนี้เป็นตัวอย่างง่ายๆ ของวิธีใช้ Listener นี้ เพิ่มลงใน script.js
โค้ดนี้จะเรียกใช้ฟังก์ชัน displayNetworkInfo
ทุกครั้งที่มีการเปลี่ยนแปลงข้อมูลเครือข่าย
navigator.connection.addEventListener('change', displayNetworkInfo);
มีองค์ประกอบ <h2>
ว่างเปล่าอยู่ในหน้า index.html
อยู่แล้ว ตอนนี้ให้กําหนดฟังก์ชัน displayNetworkInfo
เพื่อให้แสดงข้อมูลเครือข่ายในองค์ประกอบ <h2>
และเรียกใช้ฟังก์ชัน
function displayNetworkInfo() {
document.getElementById('connection').innerHTML = navigator.connection.effectiveType;
}
displayNetworkInfo();
สถานะสุดท้ายของแอปใน Glitch
วิธีทดสอบอีกครั้ง
- หากต้องการดูตัวอย่างเว็บไซต์ ให้กดดูแอป แล้วกดเต็มหน้าจอ
- กดแป้น Control+Shift+J (หรือ Command+Option+J ใน Mac) เพื่อเปิดเครื่องมือสำหรับนักพัฒนาซอฟต์แวร์
- คลิกแท็บเครือข่าย
- คลิกเมนูแบบเลื่อนลงการจำกัด ซึ่งตั้งค่าเป็นไม่มีการจำกัดโดยค่าเริ่มต้น เลือก Fast 3G
- โหลดแอปซ้ำ
แอปจะอัปเดตข้อมูลเครือข่ายเป็น 3G ในกรณีต่อไปนี้