مقدمة
بصفتنا مطوّري برامج على الويب، نميل إلى إثارة حماسنا بشأن التكنولوجيات الجديدة التي تمكّننا من إنشاء صفحات ويب تفاعلية وجاذبة أكثر من أيّ وقت مضى. هل تريد عرض رسومات ثلاثية الأبعاد بتقنية WebGL؟ بكل تأكيد. هل لديك إمكانيات متقدّمة للصوت مع Web Audio؟ بالتأكيد. هل تريد تطبيقات التعاون في الوقت الفعلي باستخدام كاميرا الويب والميكروفون؟ اشتراك!
التكنولوجيا التي تتيح لنا إنشاء تطبيقات تعمل بكفاءة أكبر وتوفّر تجربة مستخدم عامة أفضل، على الرغم من أهميتها بالقدر نفسه. وهنا يأتي دور واجهة برمجة التطبيقات مثل Page visibility.
وتنفِّذ Page visibility API وظيفة بسيطة ولكنها مهمة، إذ تتيح لتطبيقك معرفة متى تظهر الصفحة للمستخدم. يتيح هذا الجزء الأساسي من المعلومات إنشاء صفحات ويب تعمل بشكل مختلف عندما لا يتم عرضها. ضع في اعتبارك بعض الأمثلة:
- يمكن أن تؤدي صفحة الويب التي تسترد المعلومات من خادم إلى إبطاء دورة التحديث عندما لا يتم عرضها بشكل نشط.
- قد تتوقف الصفحة التي تعرض لوحة عرض دوّارة للصور أو محتوى فيديو/صوت إلى أن يعرض المستخدم الصفحة مجددًا.
- يمكن أن يقرر أحد التطبيقات عرض إشعارات للمستخدم فقط عندما تكون مخفية عن العرض.
في البداية، قد لا تبدو واجهة برمجة التطبيقات هذه مفيدة للغاية خارج نطاق راحة المستخدم، ولكن مع الأخذ في الاعتبار الزيادة الكبيرة في تصفُّح الويب على الأجهزة الجوّالة، يصبح أي شيء يساعد في توفير طاقة بطارية الجهاز مهمًا للغاية. وباستخدام واجهة برمجة تطبيقات Page visibility، يمكن أن يساعد موقعك الإلكتروني في استهلاك جهاز المستخدم لطاقة أقل وإطالة عمره.
توفِّر مواصفات واجهة برمجة التطبيقات، التي تكون حاليًا في مرحلة اقتراح المرشح، السمتَين لرصد حالة ظهور المستند بالإضافة إلى حدث للاستجابة للتغييرات في مستوى الظهور.
في هذا البرنامج التعليمي، سأتناول أساسيات واجهة برمجة التطبيقات وأوضح كيفية تطبيقها على بعض الأمثلة العملية (لا تتردد في التخطي إليها إذا كنت من النوع الذي لا يصبر).
خصائص ظهور المستند
يحدّد الإصدار الحالي من مواصفات Page visibilityAPI خاصيتين للمستند: القيمة المنطقية hidden والتعداد visibilityState. تتضمّن سمة visibilityState حاليًا أربع قيم محتملة: hidden وvisible وprerender وunloaded.
كما هو متوقع، تُرجع السمة المخفية القيمة "صحيح" عندما لا يكون المستند مرئيًا على الإطلاق. يعني ذلك عادةً أنّ المستند مصغَّر، وفي علامة تبويب في الخلفية، تكون شاشة قفل نظام التشغيل مفعَّلة وما إلى ذلك. ويتم ضبط السمة على "خطأ" إذا كان أي جزء من المستند مرئيًا جزئيًا على الأقل على شاشة عرض واحدة على الأقل. بالإضافة إلى ذلك، لتلائم أدوات تسهيل الاستخدام، يمكن ضبط السمة المخفية على "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";
}
}
ملخّص
يتضمن إنشاء تطبيق ويب رائع ما هو أكثر بكثير من مجرد استخدام الميزات الرائعة والجذابة التي يمكن للمستخدمين رؤيتها والتفاعل معها. فالتطبيق الرائع حقًا يساعد على الاستفادة بشكل مدروس من موارد المستخدم واهتمامه، وتمثّل واجهة برمجة تطبيقات "ظهور الصفحة" جزءًا مهمًا من هذا اللغز. لمعرفة المزيد من المعلومات عن إنشاء تطبيقات ويب تستنِد إلى الموارد، يُرجى الاطّلاع على المقالات الأخرى ذات الصلة بالأداء.