בשיעור ה-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" 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) כדי לפתוח את DevTools.
- לוחצים על הכרטיסייה רשתות.
- לוחצים על התפריט הנפתח Throttling (ויסות נתונים). כברירת מחדל, האפשרות שמוגדרת בתפריט היא No throttling (ללא ויסות נתונים). בוחרים באפשרות 3G מהיר.
עכשיו טוענים מחדש את הדף כשהאפשרות '3G מהיר' עדיין מופעלת. האפליקציה טוענת תמונה ברקע במקום את הסרטון:
בונוס: תגובה לשינויים
זכור לכם של-API הזה יש מעבד אירועים של onchange
?
אפשר להשתמש בו למטרות רבות: התאמה דינמית של תוכן, כמו איכות הווידאו, הפעלה מחדש של העברות נתונים מושהות כשמתגלה שינוי לסוג רשת עם רוחב פס גבוה או שליחת התראות למשתמשים כשאיכות הרשת משתנה.
דוגמה פשוטה לשימוש במאזין הזה: מוסיפים אותו ל-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) כדי לפתוח את DevTools.
- לוחצים על הכרטיסייה רשתות.
- לוחצים על התפריט הנפתח Throttling (ויסות נתונים). כברירת מחדל, האפשרות שמוגדרת בתפריט היא No throttling (ללא ויסות נתונים). בוחרים באפשרות 3G מהיר.
- טוענים מחדש את האפליקציה.
האפליקציה תעדכן את פרטי הרשת ל-3G: