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