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

Milica Mihajlija

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

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

Browser Support

  • Chrome: 61.
  • Edge: 79.
  • Firefox: not supported.
  • Safari: not supported.

Source

שימוש

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

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

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

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

איך זה עובד

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

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

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

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

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

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

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

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

סיכום

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