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

Milica Mihajlija

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

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

توافق المتصفّح

  • Chrome: 61.
  • ‫Edge: 79
  • Firefox: غير مدعوم.
  • Safari: غير متوافق

المصدر

الاستخدام

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

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

تُجري العديد من التطبيقات إجراءات مشابهة. على سبيل المثال، تعمل 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 كبيرة، خاصةً بالنسبة إلى المستخدمين على الشبكات البطيئة والتطبيقات التي تتطلّب قدرًا كبيرًا من معدل نقل البيانات. والأفضل من ذلك كله، يمكن استخدامه كتقنية تحسين تدريجي.