הצגה דינמית בהתאם לאיכות הרשת

Milica Mihajlija

חוויית הטעינה של אתר יכולה להיות שונה מאוד בהתאם לתנאי הרשת. בדרך כלל הכל עובד חלק כשאתם מחוברים לרשת מהירה, אבל כשאתם בדרכים עם חבילת גלישה מוגבלת וחיבור לא יציב, או עם מחשב נייד שמחובר לרשת Wi-Fi איטית בבית קפה, הסיפור שונה.

אחת הדרכים להתמודד עם הבעיה הזו היא להתאים את הנכסים שאתם מציגים למשתמשים על סמך איכות החיבור שלהם. עכשיו אפשר לעשות זאת באמצעות Network Information API, שמאפשר לאפליקציות אינטרנט לגשת למידע על הרשת של המשתמש.

תמיכה בדפדפנים

  • Chrome:‏ 61.
  • Edge:‏ 79.
  • Firefox: לא נתמך.
  • Safari: לא נתמך.

מקור

שימוש

יש הרבה דרכים להשתמש במידע הזה על הרשת כדי לשפר את חוויית המשתמש:

  • מעבר בין הצגת תוכן באיכות HD לתוכן באיכות נמוכה בהתאם לרשת של המשתמש.
  • מחליטים אם לטעון מראש משאבים.
  • דחיית העלאות והורדות כשהמשתמשים מחוברים לאינטרנט איטי.
  • מומלץ להפעיל את מצב אופליין אם איכות הרשת לא מספיק טובה כדי לטעון את האפליקציה ולהשתמש בתכונות שלה.
  • להזהיר את המשתמשים שפעולה מסוימת (למשל צפייה בסרטון) באמצעות חיבור סלולרי עשויה לעלות להם כסף.
  • כדאי להשתמש בהם בניתוח הנתונים כדי לאסוף נתונים על איכות הרשת של המשתמשים.

אפליקציות רבות כבר עושות משהו דומה. לדוגמה, ב-YouTube, ב-Netflix וברוב שירותי הווידאו (או שיחות הווידאו) האחרים, הרזולוציה משתנה באופן אוטומטי במהלך הסטרימינג. כש-Gmail נטען, הוא מציג למשתמשים קישור ל'טעינה של HTML בסיסי (לחיבורים איטיים)'.

קישור לטעינה של גרסת HTML בסיסית של Gmail כשהמשתמשים מחוברים לחיבורים איטיים

איך זה עובד

האובייקט navigator.connection מכיל מידע על החיבור של הלקוח. המאפיינים שלו מפורטים בטבלה שבהמשך.

נכס הסבר
downlink אומדן רוחב הפס במגה-בייט לשנייה.
effectiveType הסוג בפועל של החיבור, עם הערכים האפשריים 'slow-2g',‏ '2g',‏ '3g' או '4g' (כולל 4G ואילך). נקבעת על סמך השילוב של זמן הנסיעה הלוך ושוב ומהירות הקישור לרשת. לדוגמה, לקישור ירידה מהיר בשילוב עם זמן אחזור גבוה יהיה ערך effectiveType נמוך יותר בגלל זמן האחזור.
onchange פונקציית טיפול באירועים שמופעלת כשפרטי החיבור משתנים.
rtt זמן האחזור המשוער של הלוך ושוב בחיבור, באלפיות שנייה.
saveData ערך בוליאני שמגדיר אם המשתמש ביקש מצב של שימוש מופחת בנתונים.

כך זה נראה כשמריצים אותו במסוף הדפדפן:

מסוף כלי הפיתוח של Chrome שבו מוצגים הערכים של המאפיינים של אובייקט navigator.connection

הערכים של effectiveType זמינים גם דרך רמזים ללקוח, ומאפשרים להעביר לשרתים את סוג החיבור של הדפדפן.

באמצעות מאזין האירועים onchange תוכלו להתאים את עצמכם באופן דינמי לשינויים באיכות הרשת. אם דחיתם העלאות או הורדות בגלל תנאי רשת גרועים, תוכלו להסתמך על מאזין האירועים שיפעיל מחדש את ההעברה כשיזהה תנאי רשת טובים יותר. אפשר גם להשתמש בה כדי להודיע למשתמשים כשאיכות הרשת משתנה. לדוגמה, אם הם איבדו את האות של ה-Wi-Fi והמכשיר עבר לרשת סלולרית, זה יכול למנוע העברות נתונים בטעות (וחיובים 💸).

משתמשים ב-event listener onchange כמו בכל האזנה אחרת של event:

navigator.connection.addEventListener('change', doSomethingOnChange);

סיכום

היתרונות הפוטנציאליים של Network Information API הם גדולים, במיוחד למשתמשים ברשתות איטיות ובאפליקציות שדורשות רוחב פס רב. הכי טוב, אפשר להשתמש בו כשיטה לשיפור הדרגתי.