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

Ernest Delgado

مقدمة

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

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

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

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

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

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

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

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

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

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