בשיעור הזה תלמדו איך להתאים את התוכן לאיכות הרשת. סרטון הרקע של הדף הזה ייטען רק כשהמשתמשים נמצאים ברשת מהירה. ברשתות איטיות יותר, במקום זאת תמונה תיטען.
בעזרת 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');
}
אני רוצה לנסות
כדי לבדוק זאת בעצמכם:
- כדי לראות תצוגה מקדימה של האתר, מקישים על View App ואז על Fullscreen .
- לוחצים על 'Control+Shift+J' (או 'Command+Option+J' ב-Mac) כדי לפתוח את כלי הפיתוח.
- לוחצים על הכרטיסייה רשתות.
- לוחצים על התפריט הנפתח ויסות נתונים, שמוגדר כברירת מחדל כללא ויסות נתונים. בוחרים באפשרות Fast 3G.
כעת טען את הדף מחדש עם 3G מהיר עדיין מופעל. האפליקציה טוענת תמונה ברקע במקום את הסרטון:
זיכוי נוסף: תגובה לשינויים
זוכרים איך ה-API הזה כולל onchange
האזנה לאירועים?
אפשר להשתמש בה למטרות רבות: התאמה דינמית של תוכן, כמו איכות הווידאו, הפעלה מחדש של העברות נתונים שנדחו כאשר מזוהה שינוי בסוג רשת בעל רוחב פס גבוה או הודעה למשתמשים כשאיכות הרשת משתנה.
הנה דוגמה פשוטה לאופן השימוש ב-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.
כדי לבדוק אותה שוב:
- כדי לראות תצוגה מקדימה של האתר, מקישים על View App ואז על Fullscreen .
- לוחצים על 'Control+Shift+J' (או 'Command+Option+J' ב-Mac) כדי לפתוח את כלי הפיתוח.
- לוחצים על הכרטיסייה רשתות.
- לוחצים על התפריט הנפתח ויסות נתונים, שמוגדר כברירת מחדל כללא ויסות נתונים. בוחרים באפשרות Fast 3G.
- טוענים מחדש את האפליקציה.
האפליקציה תעדכן את פרטי הרשת ל-3g: