العرض التكيُّفي استنادًا إلى جودة الشبكة

Milica Mihajlija

يمكن أن تختلف تجربة تحميل موقع إلكتروني بشكل كبير حسب ظروف الشبكة. عادةً ما يكون كل شيء سلسًا عند استخدام شبكة سريعة، ولكن إذا كنت تتنقل وتستخدم خطة بيانات محدودة واتصالاً متقطعًا، أو إذا كنت تستخدم جهاز كمبيوتر محمولاً متصلاً بشبكة Wi-Fi بطيئة في مقهى، ستكون التجربة مختلفة.

إحدى طرق التعامل مع هذه المشكلة هي تعديل مواد العرض التي تقدّمها للمستخدمين استنادًا إلى جودة اتصالهم بالإنترنت. أصبح ذلك ممكنًا الآن باستخدام Network Information API التي تتيح لتطبيقات الويب الوصول إلى معلومات حول شبكة المستخدم.

Browser Support

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

Source

الاستخدام

هناك العديد من الطرق التي يمكنك من خلالها استخدام معلومات الشبكة هذه لتحسين تجربة المستخدم:

  • التبديل بين عرض المحتوى بدقة عالية ودقة منخفضة استنادًا إلى شبكة المستخدم
  • تحديد ما إذا كنت تريد تحميل الموارد مسبقًا
  • تأجيل عمليات التحميل والتنزيل عندما يكون اتصال المستخدمين بطيئًا
  • فعِّل وضع عدم الاتصال بالإنترنت إذا لم تكن جودة الشبكة جيدة بما يكفي لتحميل التطبيق واستخدام الميزات.
  • تحذير المستخدمين من أنّ تنفيذ إجراء معيّن (مثل مشاهدة فيديو) عبر شبكة الجوّال قد يكلّفهم أموالاً
  • استخدِمها في الإحصاءات لجمع بيانات حول جودة شبكة المستخدمين.

تتضمّن العديد من التطبيقات حاليًا ميزة مشابهة. على سبيل المثال، تضبط YouTube وNetflix ومعظم خدمات الفيديو الأخرى (أو مكالمات الفيديو) دقة الشاشة تلقائيًا أثناء البث. عند تحميل Gmail، يقدّم للمستخدمين رابطًا إلى "تحميل HTML الأساسي (للاتصالات البطيئة)".

رابط لتحميل إصدار HTML الأساسي من Gmail عندما يكون المستخدمون على اتصالات بطيئة

آلية العمل

يحتوي العنصر navigator.connection على معلومات حول اتصال أحد العملاء. يتم توضيح خصائصه في الجدول أدناه.

الموقع الشرح
downlink تقدير معدل نقل البيانات بالميغابت في الثانية
effectiveType نوع الاتصال الفعّال، مع القيم المحتملة 'slow-2g' أو '2g' أو '3g' أو '4g' (يشمل الجيل الرابع وما فوق). يتم تحديدها استنادًا إلى مجموعة من وقت الاستجابة وسرعة التنزيل. على سبيل المثال، سيكون لسرعة التنزيل السريع مع وقت الاستجابة العالي قيمة effectiveType أقل بسبب وقت الاستجابة.
onchange معالج أحداث يتم تشغيله عند تغيير معلومات الاتصال.
rtt تمثّل هذه السمة وقت الاستجابة المقدَّر للاتصال بالمللي ثانية.
saveData قيمة منطقية تحدّد ما إذا كان المستخدم قد طلب تفعيل وضع تقليل استهلاك البيانات.

إليك الشكل الذي يظهر به عند تشغيله في وحدة تحكّم المتصفّح:

وحدة تحكّم أدوات مطوّري البرامج في Chrome تعرض قيم خصائص عنصر navigator.connection

تتوفّر قيم effectiveType أيضًا من خلال تلميحات العميل وتتيح لك إرسال نوع اتصال المتصفّح إلى الخوادم.

يتيح لك أداة معالجة الأحداث onchange التكيّف ديناميكيًا مع التغييرات في جودة الشبكة. إذا أجّلت عمليات التحميل أو التنزيل بسبب ضعف شبكة الاتصال، يمكنك الاعتماد على أداة معالجة الأحداث لإعادة تشغيل عملية النقل عند رصد ظروف اتصال أفضل بالشبكة. يمكنك أيضًا استخدامها لإعلام المستخدمين عند تغيُّر جودة الشبكة. على سبيل المثال، إذا فقدوا إشارة Wi-Fi وتم نقلهم إلى شبكة جوّال، يمكن أن يمنع ذلك عمليات نقل البيانات غير المقصودة (والرسوم 💸).

استخدِم أداة معالجة الحدث onchange كما تستخدم أي أداة معالجة أحداث أخرى:

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

الخاتمة

تتعدّد المزايا المحتملة لواجهة برمجة التطبيقات Network Information API، خاصةً للمستخدمين الذين يتصلون بشبكات بطيئة والتطبيقات التي تتطلّب نطاقًا تردديًا كبيرًا. والأهم من ذلك، يمكن استخدامها كتقنية تحسين تدريجي.