قد يكون تحميل موقع الويب تجربة مختلفة تمامًا حسب الشبكة. الظروف. عادةً ما يكون كل شيء سلسًا عندما تكون متصلاً بشبكة سريعة، ولكن عندما تكون أثناء التنقل بخطة بيانات محدودة واتصال متقطع، أو تكون عالقًا مع جهاز كمبيوتر محمول متصل بشبكة Wi-Fi بطيئة في مقهى، فإن هذه قصة مختلفة.
تتمثل إحدى طرق التعامل مع هذا الأمر في تكييف مواد العرض التي تعرضها للمستخدمين بناءً على جودة الاتصال بينهم. وقد أصبح ذلك ممكنًا الآن باستخدام Network Information API الذي يتيح لتطبيقات الويب الوصول إلى معلومات حول شبكة المستخدم.
الاستخدام
هناك العديد من الطرق التي يمكنك من خلالها استخدام معلومات الشبكة هذه لتحسين تجربة المستخدم. الخبرة:
- يمكنك التبديل بين عرض محتوى عالي الدقة أو محتوى منخفض الدقة استنادًا إلى شبكة المستخدم.
- حدِّد ما إذا كنت تريد تحميل الموارد مسبقًا.
- تأجيل عمليات التحميل والتنزيل عندما يكون اتصال المستخدمين بطيئًا.
- فعِّل وضع عدم الاتصال بالإنترنت إذا كانت جودة الشبكة غير كافية لتحميل التطبيق واستخدام الميزات.
- تحذير المستخدمين من أن اتخاذ إجراء (مثل مشاهدة فيديو) عبر شبكة الجوّال قد يؤدي إلى التكلفة بالمال.
- استخدِمها في إحصاءاتك لجمع بيانات عن خصائص وجودة الشبكة.
تقوم العديد من التطبيقات بالفعل بشيء مماثل. على سبيل المثال، YouTube، يتم ضبط Netflix ومعظم خدمات الفيديو (أو مكالمات الفيديو) الأخرى تلقائيًا درجة الدقة أثناء البث. عند تحميل Gmail، يزود المستخدمين "رابط إلى "تحميل HTML الأساسي (للاتصالات البطيئة)".
آلية العمل
يحتوي العنصر navigator.connection على معلومات حول جدول بيانات أحد العملاء
الاتصال. ويتم شرح خصائصها في الجدول أدناه.
| الموقع | الشرح |
|---|---|
downlink |
تقدير معدل نقل البيانات بالميغابت في الثانية |
effectiveType |
تمثّل هذه السمة نوع الاتصال الفعّال، مع القيم المحتملة 'slow-2g' أو '2g' أو '3g' أو '4g' (يشمل ذلك شبكة الجيل الرابع (4g) والإصدارات الأحدث). يتم تحديدها استنادًا إلى الجمع بين مدة الذهاب والعودة وسرعة الرابط الأسفل. على سبيل المثال، سيكون للارتباط السريع - الذي تم دمجه بوقت الاستجابة العالي - قيمة أقل من اللازم حسب وقت الاستجابة. |
onchange |
معالِج أحداث يتم تشغيله عند تغيير معلومات الاتصال. |
rtt |
وقت الاستجابة المقدر للاتصال ذهابًا وإيابًا بالمللي ثانية. |
saveData |
قيمة منطقية تحدد ما إذا كان المستخدم قد طلب وضعًا مخفّضًا لاستخدام البيانات. |
وإليك ما يبدو عليه الأمر عند تشغيله في وحدة تحكم المتصفح:
تتوفّر قيم effectiveType أيضًا من خلال
تلميحات العميل
وتسمح لك بإبلاغ الخوادم بنوع اتصال المتصفح.
تتيح لك أداة معالجة الأحداث في onchange التكيّف بشكل ديناميكي مع التغييرات في
وجودة الشبكة. في حال تأجيل عمليات التحميل أو عمليات التنزيل بسبب ضعف الاتصال بالشبكة
يمكنك الاعتماد على أداة معالجة الحدث لإعادة تشغيل عملية النقل
ظروف أفضل للشبكة. ويمكنك أيضًا استخدامه لإعلام المستخدمين عند
حدوث تغييرات في جودة الشبكة. على سبيل المثال، إذا فقدوا إشارة Wi-Fi وكانوا
انخفاضها إلى شبكة خلوية، مما قد يؤدي إلى منع عمليات نقل البيانات غير المقصودة (
الرسوم 💸).
استخدِم أداة معالجة الأحداث من "onchange" كما تفعل مع أي مستمع آخر للحدث:
navigator.connection.addEventListener('change', doSomethingOnChange);
الخاتمة
إن الفوائد المحتملة لـ Network Information API كبيرة، لا سيما بالنسبة إلى يستخدمون شبكات وتطبيقات بطيئة تتطلب قدرًا كبيرًا من معدل نقل البيانات. أفضل محتوى وكل ذلك، فيمكن استخدامها كأسلوب تحسين تدريجي.