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

bookmark_border تنظيم صفحاتك في مجموعات يمكنك حفظ المحتوى وتصنيفه حسب إعداداتك المفضّلة.

Ernest Delgado

مقدمة

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

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

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

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

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

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

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

خصائص مستوى رؤية المستند

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

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

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

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

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

• مواصفات W3C PageVisibility API
• مجموعة العمل المعنية بأداء الويب
• مثال على PageVisibility في IE10
• Visibility.js - مكتبة polyfill لواجهة برمجة التطبيقات PageVisibility
• isVis: عنصر بديل آخر لـ PageVisibility