استخدام واجهة برمجة تطبيقات مستوى رؤية الصفحة

Ernest Delgado
Ernest Delgado
X

مقدمة

بصفتنا مطوّري تطبيقات ويب، نتحمّس عادةً للتقنيات الجديدة التي تتيح لنا إنشاء صفحات ويب أكثر تفاعلية وجاذبية. رسومات ثلاثية الأبعاد باستخدام WebGL؟ بكل تأكيد. هل تتوفّر إمكانات صوتية متقدّمة باستخدام WebAudio؟ بالتأكيد. تطبيقات التعاون في الوقت الفعلي التي تستخدم كاميرا الويب والميكروفون؟ أريد الاشتراك!

أما التقنيات التي تتيح لنا إنشاء تطبيقات تعمل بكفاءة أكبر وتوفّر تجربة أفضل للمستخدمين بشكل عام، فهي أقل إثارة للاهتمام، ولكنّها لا تقل أهمية. وهنا يأتي دور واجهة برمجة تطبيقات مثل PageVisibility.

تؤدي واجهة برمجة التطبيقات Page Visibility API وظيفة بسيطة ولكنها مهمة، فهي تتيح لتطبيقك معرفة متى تكون الصفحة مرئية للمستخدم. تتيح هذه المعلومة الأساسية إنشاء صفحات ويب تعمل بشكل مختلف عندما لا يتم عرضها. لنتناول بعض الأمثلة:

  • يمكن لصفحة ويب تسترد معلومات من خادم أن تبطئ دورة التحديث عندما لا يتم عرضها بشكل نشط
  • يمكن إيقاف الصفحة التي تعرض لوحة عرض دوّارة للصور أو محتوى فيديو/صوت مؤقتًا إلى أن يعرض المستخدم الصفحة مرة أخرى
  • يمكن لأي تطبيق أن يقرر عرض الإشعارات للمستخدم فقط عندما يكون مخفيًا عن العرض

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

Browser Support

  • Chrome: 33.
  • Edge: 12.
  • Firefox: 18.
  • Safari: 7.

Source

توفّر مواصفات واجهة برمجة التطبيقات، التي تندرج ضمن مرحلة "المرشّح الموصى به" حتى وقت كتابة هذه المقالة، كلاً من السمات اللازمة لرصد حالة ظهور المستند وحدثًا للاستجابة للتغييرات في مستوى الظهور.

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

خصائص إذن الوصول إلى المستند

يحدّد الإصدار الحالي من مواصفات PageVisibilityAPI سمتَين للمستند: السمة المنطقية hidden والتعداد visibilityState. تتضمّن السمة visibilityState حاليًا أربع قيم محتملة: hidden وvisible وprerender وunloaded.

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

التعامل مع بادئات المورّدين

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

function getHiddenProp(){
    var prefixes = ['webkit','moz','ms','o'];

    // if 'hidden' is natively supported just return it
    if ('hidden' in document) return 'hidden';

    // otherwise loop over all the known prefixes until we find one
    for (var i = 0; i < prefixes.length; i++){
        if ((prefixes[i] + 'Hidden') in document)
            return prefixes[i] + 'Hidden';
    }

    // otherwise it's not supported
    return null;
}

مثال على خصائص المستند

يمكننا الآن كتابة دالة متوافقة مع جميع المتصفحات، isHidden()، لمعرفة ما إذا كان المستند مرئيًا.

function isHidden() {
    var prop = getHiddenProp();
    if (!prop) return false;

    return document[prop];
}

للحصول على عرض أكثر دقة لمستوى ظهور المستند، يمكنك استخدام السمة visibilityState. تعرض هذه السمة إحدى القيم الأربع التالية:

  • hidden: المستند مخفي تمامًا عن العرض
  • visible: المستند مرئي جزئيًا على الأقل على جهاز عرض واحد على الأقل
  • prerender: يتم تحميل المستند خارج الشاشة ولا يكون مرئيًا (هذه القيمة اختيارية، وقد لا تتيحها بعض المتصفحات)
  • ‫unloaded: إذا كان سيتم إلغاء تحميل المستند، سيتم عرض هذه القيمة (هذه القيمة اختيارية، وقد لا تتيحها بعض المتصفّحات)

حدث VisibilityChange

بالإضافة إلى سمات مستوى العرض، هناك حدث visibilitychange يتم تنفيذه كلما تغيّرت حالة مستوى عرض المستند. يمكنك تسجيل متتبِّع أحداث لهذا الحدث مباشرةً في عنصر المستند:

مثال على حدث

// use the property name to generate the prefixed event name
var visProp = getHiddenProp();
if (visProp) {
  var evtname = visProp.replace(/[H|h]idden/,'') + 'visibilitychange';
  document.addEventListener(evtname, visChange);
}

function visChange() {
   var txtFld = document.getElementById('visChangeText');

   if (txtFld) {
      if (isHidden())
         txtFld.value += "Tab Hidden!\n";
      else
         txtFld.value += "Tab Visible!\n";
   }
}

ملخّص

يتطلب إنشاء تطبيق ويب رائع أكثر من مجرد استخدام الميزات الرائعة والملفتة للنظر التي يمكن للمستخدمين رؤيتها والتفاعل معها. يستخدم التطبيق الرائع موارد المستخدم واهتمامه بشكل مدروس، وتُعدّ واجهة Page Visibility API جزءًا مهمًا من هذا اللغز. لمزيد من المعلومات حول إنشاء تطبيقات ويب تراعي الموارد، يمكنك الاطّلاع على مقالاتنا الأخرى ذات الصلة بالأداء.

المراجع الخارجية