ใน Codelab นี้ คุณจะได้เรียนรู้วิธีปรับเนื้อหาตามคุณภาพเครือข่าย วิดีโอพื้นหลังของหน้านี้จะโหลดเฉพาะเมื่อผู้ใช้อยู่ในเครือข่ายที่เร็วเท่านั้น แต่ในเครือข่ายที่ช้ากว่า รูปภาพจะโหลดแทน
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" 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
ตอนนี้ ให้โหลดหน้าเว็บอีกครั้งโดยยังคงเปิดใช้ Fast 3G อยู่ แอปจะโหลดรูปภาพในพื้นหลังแทนที่จะโหลดวิดีโอ
เครดิตพิเศษ: ตอบสนองต่อการเปลี่ยนแปลง
จำได้ไหมว่า API นี้มี onchange
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: