חשוב להבין איך האפליקציה או האתר פועלים כשהקישוריות חלשה או לא יציבה, ולפתח אותם בהתאם. יש מגוון כלים שיכולים לעזור לכם.
בדיקה עם רוחב פס נמוך וזמן אחזור גבוה
שיעור הולך וגדל של אנשים גולשים באינטרנט במכשירים ניידים. גם בבית, אנשים רבים נוטשים את הפס הרחב הקבוע לטובת הנייד.
בהקשר הזה, חשוב להבין איך מרגיש השימוש באפליקציה או באתר כשהקישוריות חלשה או לא אמינה. יש מגוון כלי תוכנה שיכולים לעזור לכם להדמות ולדמות רוחב פס נמוך וזמן אחזור גבוה.
אמולציה של הגבלת רוחב פס
כשאתם בונים או מעדכנים אתר, אתם צריכים לוודא שהוא פועל כמו שצריך במגוון תנאי קישוריות. יש כמה כלים שיכולים לעזור.
כלים בדפדפן
כלי הפיתוח ל-Chrome מאפשרים לבדוק את האתר במגוון מהירויות העלאה/הורדה וזמני הלוך ושוב, באמצעות הגדרות קבועות מראש או הגדרות מותאמות אישית מהחלונית "רשת". במאמר תחילת העבודה עם Analyze Network Performance מוסברים העקרונות הבסיסיים.
כלי מערכת
Network Link Conditioner הוא חלונית העדפות שזמינה ב-Mac אם מתקינים את Hardware IO Tools ל-Xcode:
אמולציה של מכשיר
אמולטור Android מאפשר לדמות תנאי רשת שונים בזמן הפעלת אפליקציות (כולל דפדפני אינטרנט ואפליקציות אינטרנט היברידיות) ב-Android:
במכשירי אייפון, אפשר להשתמש ב-Network Link Conditioner כדי לדמות תנאי רשת לקויים (ראו למעלה).
בדיקה ממיקומים ומרשתות שונים
ביצועי הקישוריות תלויים במיקום השרת ובסוג הרשת.
WebPagetest הוא שירות אונליין שמאפשר להריץ קבוצה של בדיקות ביצועים באתר באמצעות מגוון רשתות ומיקומי מארחים. לדוגמה, אתם יכולים לנסות את האתר שלכם משרת בהודו ברשת 2G, או באמצעות כבל מעיר בארה"ב.
בוחרים מיקום, ובהגדרות המתקדמות בוחרים סוג חיבור. אתם יכולים אפילו להפוך את הבדיקה לאוטומטית באמצעות סקריפטים (לדוגמה, כדי להתחבר לאתר) או באמצעות ממשקי ה-API בארכיטקטורת REST. כך תוכלו לכלול בדיקות קישוריות בתהליכי build או ברישום ביומן של ביצועים.
Fiddler תומך בשרתי proxy גלובליים דרך GeoEdge, ואפשר להשתמש בכללים המותאמים אישית שלו כדי לדמות מהירויות מודם:
בדיקה ברשת עם בעיות
שרתי proxy של תוכנה וחומרה מאפשרים לכם לדמות תנאים בעייתיים ברשת הסלולרית, כמו ויסות רוחב פס, עיכוב בחבילות ואובדן חבילות אקראי. שרת proxy משותף או רשת מוגבלת יכולים לאפשר לצוות של מפתחים לשלב בדיקות רשת בעולם האמיתי בתהליך העבודה שלהם.
Augmented Traffic Control (ATC) של פייסבוק היא קבוצת אפליקציות ברישיון BSD שאפשר להשתמש בהן כדי לעצב תנועה ולדמות תנאי רשת פגומים:
בפייסבוק אפילו הנהיגו את ימי שלישי של 2G כדי להבין איך אנשים עם חיבור 2G משתמשים במוצר שלהם. בימי שלישי, העובדים מקבלים חלון קופץ שנותן להם אפשרות לדמות חיבור 2G.
אפשר להשתמש בשרת ה-proxy ל-HTTP/HTTPS של Charles כדי לשנות את רוחב הפס ואת זמן האחזור. Charles היא תוכנה מסחרית, אבל יש לה גרסת ניסיון בחינם.
מידע נוסף על Charles זמין בכתובת codewithchris.com.
איך להתמודד עם קישוריות לא אמינה ועם "lie-fi"
מה זה "רשת Wi-Fi שקרית"?
המונח lie-fi הופיע לראשונה בשנת 2008 (כשהטלפונים נראו כמו המכשיר הזה), והוא מתייחס לקישוריות שלא עובדת כמו שצריך. הדפדפן מתנהג כאילו יש לו קישוריות, אבל מסיבה כלשהי אין לו.
פרשנות שגויה של הקישוריות עלולה לגרום לחוויית משתמש גרועה, כי הדפדפן (או JavaScript) ממשיך לנסות לאחזר משאבים במקום לוותר ולבחור חלופה הגיונית. מצב Lie-fi יכול להיות גרוע יותר ממצב אופליין. לפחות אם המכשיר נמצא במצב אופליין, ה-JavaScript יכול לבצע פעולת התחמקות מתאימה.
הבעיה הזו צפויה להחמיר ככל שיותר אנשים יעברו לשימוש בנייד במקום בפס רחב קבוע. נתונים עדכניים ממפקד האוכלוסין בארה"ב מראים ירידה בשימוש בפס רחב קבוע. בתרשים הבא מוצג השימוש באינטרנט לנייד בבית בשנת 2015 בהשוואה לשנת 2013:
שימוש בפסקי זמן לטיפול בקישוריות לסירוגין
בעבר, השתמשו בשיטות פריצה באמצעות XHR כדי לבדוק אם יש קישוריות לסירוגין, אבל Service Worker מאפשר שיטות אמינות יותר להגדרת זמן קצוב לתפוגה ברשת. אפשר לעשות את זה באמצעות Workbox עם כמה שורות קוד בלבד:
workboxSW.router.registerRoute(
'/path/to/image',
workboxSW.strategies.networkFirst({networkTimeoutSeconds: 3}),
);
מידע נוסף על Workbox זמין בהרצאה של ג'ף פוסניק ב-Chrome Dev Summit, Workbox: Flexible PWA Libraries.
אנחנו מפתחים גם פונקציונליות של זמן קצוב לתפוגה ל-Fetch API, ו-Streams API אמור לעזור באופטימיזציה של העברת התוכן ובמניעת בקשות מונוליטיות. ג'ייק ארצ'יבלד מספק פרטים נוספים על ההתמודדות עם חיבור אינטרנט איטי ב-Supercharging טעינת דף.