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