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