בשיעור ה-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, שמוגדר כברירת מחדל לללא ויסות נתונים. בוחרים באפשרות 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: