חוויית הטעינה של אתר יכולה להיות שונה מאוד בהתאם לתנאי הרשת. בדרך כלל הכל עובד חלק כשאתם מחוברים לרשת מהירה, אבל כשאתם בדרכים עם חבילת גלישה מוגבלת וחיבור לא יציב, או עם מחשב נייד שמחובר לרשת Wi-Fi איטית בבית קפה, הסיפור שונה.
אחת הדרכים להתמודד עם הבעיה הזו היא להתאים את הנכסים שאתם מציגים למשתמשים על סמך איכות החיבור שלהם. עכשיו אפשר לעשות זאת באמצעות Network Information API, שמאפשר לאפליקציות אינטרנט לגשת למידע על הרשת של המשתמש.
שימוש
יש הרבה דרכים להשתמש במידע הזה על הרשת כדי לשפר את חוויית המשתמש:
- מעבר בין הצגת תוכן באיכות HD לתוכן באיכות נמוכה בהתאם לרשת של המשתמש.
- מחליטים אם לטעון מראש משאבים.
- דחיית העלאות והורדות כשהמשתמשים מחוברים לאינטרנט איטי.
- מומלץ להפעיל את מצב אופליין אם איכות הרשת לא מספיק טובה כדי לטעון את האפליקציה ולהשתמש בתכונות שלה.
- להזהיר את המשתמשים שפעולה מסוימת (למשל צפייה בסרטון) באמצעות חיבור סלולרי עשויה לעלות להם כסף.
- כדאי להשתמש בהם בניתוח הנתונים כדי לאסוף נתונים על איכות הרשת של המשתמשים.
אפליקציות רבות כבר עושות משהו דומה. לדוגמה, ב-YouTube, ב-Netflix וברוב שירותי הווידאו (או שיחות הווידאו) האחרים, הרזולוציה משתנה באופן אוטומטי במהלך הסטרימינג. כש-Gmail נטען, הוא מציג למשתמשים קישור ל'טעינה של HTML בסיסי (לחיבורים איטיים)'.
איך זה עובד
האובייקט navigator.connection
מכיל מידע על החיבור של הלקוח. המאפיינים שלו מפורטים בטבלה שבהמשך.
נכס | הסבר |
---|---|
downlink |
אומדן רוחב הפס במגה-בייט לשנייה. |
effectiveType |
הסוג בפועל של החיבור, עם הערכים האפשריים 'slow-2g' , '2g' , '3g' או '4g' (כולל 4G ואילך). נקבעת על סמך השילוב של זמן הנסיעה הלוך ושוב ומהירות הקישור לרשת. לדוגמה, לקישור ירידה מהיר בשילוב עם זמן אחזור גבוה יהיה ערך effectiveType נמוך יותר בגלל זמן האחזור. |
onchange |
פונקציית טיפול באירועים שמופעלת כשפרטי החיבור משתנים. |
rtt |
זמן האחזור המשוער של הלוך ושוב בחיבור, באלפיות שנייה. |
saveData |
ערך בוליאני שמגדיר אם המשתמש ביקש מצב של שימוש מופחת בנתונים. |
כך זה נראה כשמריצים אותו במסוף הדפדפן:
הערכים של effectiveType
זמינים גם דרך רמזים ללקוח, ומאפשרים להעביר לשרתים את סוג החיבור של הדפדפן.
באמצעות מאזין האירועים onchange
תוכלו להתאים את עצמכם באופן דינמי לשינויים באיכות הרשת. אם דחיתם העלאות או הורדות בגלל תנאי רשת גרועים, תוכלו להסתמך על מאזין האירועים שיפעיל מחדש את ההעברה כשיזהה תנאי רשת טובים יותר. אפשר גם להשתמש בה כדי להודיע למשתמשים כשאיכות הרשת משתנה. לדוגמה, אם הם איבדו את האות של ה-Wi-Fi והמכשיר עבר לרשת סלולרית, זה יכול למנוע העברות נתונים בטעות (וחיובים 💸).
משתמשים ב-event listener onchange
כמו בכל האזנה אחרת של event:
navigator.connection.addEventListener('change', doSomethingOnChange);
סיכום
היתרונות הפוטנציאליים של Network Information API הם גדולים, במיוחד למשתמשים ברשתות איטיות ובאפליקציות שדורשות רוחב פס רב. הכי טוב, אפשר להשתמש בו כשיטה לשיפור הדרגתי.