کار با قابلیت Page Visibility و کاربردهای آن

در مشاهده صفحه شما، کاربر ممکن است چند وضعیت داشته باشد. مثلا ممکن است در حال مشاهده صفحه شما باشد. ممکن است به tab/window دیگری رفته باشد یا اصلا براوزر را مینیمایز کرده باشد و صفحه شما را مشاهده نکند و ....
هم اکنون اکثر براوزرها این امکان را برای شما فراهم می‌آورند که بتوانید این وضعیت را تشخیص دهید.

این قابلیت کاربردهای فراوانی دارد. مثلا می‌توانید زمانی که کاربر صفحه شما را نمی‌بیند، پخش ویدئو، اسلایدر و ... را متوقف کنید و پس از رجوع کاربر به صفحه شما، آن را از سر بگیرید. یا مثلا ارسال درخواست‌های مستمر ای‌جکسی برای آپدیت بخشی از صفحه را می‌توان در زمان فعال نبودن پنجره متوقف یا به مقدار بسیار کمتری رساند.

روش استفاده از این قابلیت

برای استفاده از این قابلیت می‌توانید از پلاگین visibility.js استفاده کنید یا از کدهایی که در ادامه به نقل از این مطلب درج می‌شود، استفاده کنید.
زمانی که پنجره شما از دید کاربر مخفی می‌شود، از document.hidden قابل تشخیص است. اما یک مشکل کوچک اینجاست که در برخی مرورگرها، بجای متد hidden باید از متدهایی با نام webkitHidden, msHidden و ... استفاده کرد. لذا از تابع زیر را برای استخراج آن استفاده می‌کنیم:

function getHiddenPrefix(){
    var prefixes = ['webkit','moz','ms','o'];
    if ('hidden' in document) return '';
    for (var i = 0; i < prefixes.length; i++)
        if ((prefixes[i] + 'Hidden') in document) 
            return prefixes[i];
    // براوزر پشتیبانی نمی‌کند
    return false;
}

حال می‌توانیم یک تابع تعریف کنیم که با توجه به آن، متوجه شویم صفحه قابل دیدن هست یا خیر:

function isHidden() {
    var prefix = getHiddenPrefix();
    if (false===prefix) return false;
    return document[ (''==prefix) ? 'hidden' : prefix+'Hidden' ];
}

کد فوق برای این بود که بفهمیم در این لحظه پنجره در حال مشاهده است یا خیر. در صورتی که بخواهیم هر زمان وضعیت دیدن صفحه تغییر کرد، اطلاع پیدا کنیم تا بتوانیم عملیات خاصی را انجام دهیم، می‌توانیم از رویداد visibilitychange استفاده کرد که البته مشابه پراپرتی hidden با پیشوندهای مختلفی می‌تواند همراه باشد مانند webkitvisibilitychange, msvisibilitychange و ...

var prefix = getHiddenPrefix();
if (false!==prefix)
    document.addEventListener(prefix+'visibilitychange', function(){...});

با مرورگرهایی که پشتیبانی نمی‌کنند چه کنیم؟!

هرچند تقریبا همه مرورگرهای جدید از این امر پشتبانی می‌کنند اما کسانی که بخواهند %100 کاربران را پوشش دهند، می‌توانند 2 کار انجام دهند؛

پیش‌فرض را روی این قرار دهند که کاربر در حال مشاهده صفحه است. اگر براوزر کاربر از این امر پشتیبانی کرد که این پیشفرض را تغییر می‌دهد. اما اگر کاربر جز عده‌ی بسیار قلیلی بود که مرورگرش از این امر پشتیبانی نمی‌کند، بنابه پیشفرض مذکور، فرض می‌شود که کاربر در حال مشاهده صفحه است که مشکلی برایش پیش نیاید.
زمانی که کاربری وارد صفحه می‌شود، بالاخره یک کاری انجام می‌دهد. یا کلیدی را می‌فشارد یا موس را حرکت می‌دهد یا صفحه را اسکرول می‌کند و ...
این کارها هرچند نشان از حضور او در صفحه دارد اما لزوما به معنای آن نیست که از همان لحظه که این رویدادها رخ داد، وارد صفحه شده. ممکن است کمی قبل‌تر از آن وارد صفحه شده باشد. به هر حال برای تشخیص Page Visibility با کمک این روش، می‌توان کدی که قبلا برای تشخیص idle بودن معرفی کرده بودم، استفاده کنید مثلا به این صورت:

var idle=false, events="mousemove keydown wheel DOMMouseScroll mousewheel mousedown touchstart touchmove MSPointerDown MSPointerMove";
function active(){
  $(document).unbind(events);
  idle=false;
  return true;
}
setInterval(function(){
    if(!idle)
      $(document).bind(events, active);
    idle=true;
  }, 5E3); // اگر کاربر حداکثر 5 ثانیه هیچ تعاملی با صفحه نکند، متغیر مربوطه ست میشود
$(window).blur(function(){idle=true;})
$(window).focus(function(){idle=false;})

یادداشت‌های مرتبط

علیرضا معظمی

مشاوره و اجرای پروژه‌های خاص طراحی و برنامه‌نویسی وب

یادداشت‌ها

کار با قابلیت Page Visibility و کاربردهای آن

روش استفاده از این قابلیت

با مرورگرهایی که پشتیبانی نمی‌کنند چه کنیم؟!

مدیریت

یادداشت‌های کوتاه فنی تخصصی

آموزش‌هایی برای ارتقاء فنی سایت و سرور

تبلیغات

ربات‌های تلگرامی:

دامنه‌های فروشی: