استفاده از Page Visibility API

Ernest Delgado
Ernest Delgado
X

مقدمه

ما به‌عنوان توسعه‌دهندگان وب، معمولاً از فناوری‌های جدیدی که به ما امکان می‌دهند صفحات وب تعاملی و جذاب‌تری ایجاد کنیم، هیجان‌زده می‌شویم. گرافیک سه‌بعدی با WebGL؟ بله، حتماً. قابلیت‌های صوتی پیشرفته با WebAudio؟ حتماً. برنامه‌های مشارکت هم‌زمان که از دوربین و میکروفون وب استفاده می‌کنند؟ ثبت‌نام شوم!

فناوری‌هایی که به ما امکان می‌دهند برنامه‌هایی بسازیم که کارآمدتر اجرا شوند و تجربه کاربری کلی بهتری ارائه دهند، اگرچه کمتر هیجان‌انگیز هستند، اما به همان اندازه مهم‌اند. اینجا است که میانای برنامه‌سازی کاربردی‌ای مثل PageVisibility وارد می‌شود.

Page Visibility API عملکردی ساده اما مهم دارد – به برنامه شما اطلاع می‌دهد که چه زمانی صفحه برای کاربر قابل‌مشاهده است. این اطلاعات پایه امکان ایجاد صفحه‌های وبی را فراهم می‌کند که وقتی مشاهده نمی‌شوند رفتار متفاوتی دارند. چند نمونه را درنظر بگیرید:

  • صفحه وبی که اطلاعات را از سرور بازیابی می‌کند، وقتی به‌طور فعال مشاهده نشود، می‌تواند چرخه به‌روزرسانی خود را کند کند
  • صفحه‌ای که گردونه تصویر چرخشی یا محتوای ویدیویی/صوتی را نمایش می‌دهد می‌تواند تا زمانی که کاربر دوباره صفحه را نمایش دهد موقتاً متوقف شود
  • برنامه می‌تواند تصمیم بگیرد که اعلان‌ها را فقط زمانی به کاربر نشان دهد که از دید پنهان است

در ابتدا، این میانای برنامه‌سازی کاربردی ممکن است فراتر از راحتی کاربر چندان مفید به‌نظر نرسد، اما با توجه به افزایش چشمگیر مرور وب در تلفن همراه، هر چیزی که به صرفه‌جویی در مصرف باتری دستگاه کمک کند بسیار مهم می‌شود. بااستفاده از PageVisibility API، سایت شما می‌تواند به دستگاه کاربر کمک کند تا انرژی کمتری مصرف کند و دوام بیشتری داشته باشد.

Browser Support

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

Source

مشخصات API، که در زمان نگارش این مطلب در مرحله «توصیه نامزد» قرار دارد، هم ویژگی‌هایی برای تشخیص وضعیت نمایان بودن سند و هم رویدادی برای پاسخ به تغییرات نمایان بودن ارائه می‌دهد.

در این آموزش، اصول اولیه API را پوشش می‌دهم و نحوه اعمال آن را در برخی مثال‌های عملی نشان می‌دهم (اگر از نوع بی‌صبر هستید، می‌توانید به آن‌ها بروید).

مشخصات رؤیت‌پذیری سند

نسخه فعلی مشخصات PageVisibilityAPI دو ویژگی سند را تعریف می‌کند: بولی hidden و شمارش visibilityState. ویژگی visibilityState درحال‌حاضر چهار مقدار ممکن دارد: hidden، visible، prerender، و unloaded.

همان‌طور که انتظار می‌رود، وقتی سند اصلاً قابل‌مشاهده نباشد، مشخصه پنهان مقدار درست را برمی‌گرداند. معمولاً این یعنی سند کوچک شده است، در برگه پس‌زمینه است، صفحه قفل سیستم‌عامل بالا است، و غیره. اگر هر بخشی از سند حداقل تاحدی در حداقل یک نمایشگر قابل‌مشاهده باشد، این مشخصه روی false تنظیم می‌شود. علاوه‌براین، برای تطبیق با ابزارهای دسترس‌پذیری، وقتی ابزاری مانند ذره‌بین صفحه‌نمایش سند را کاملاً پنهان می‌کند اما نمایی از آن را نشان می‌دهد، می‌توان ویژگی پنهان را روی 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 بخش مهمی از این پازل است. برای کسب اطلاعات بیشتر درباره ساختن برنامه‌های وب با مصرف بهینه منابع، دیگر مقاله‌های مرتبط با عملکرد ما را بررسی کنید.

ارجاع‌های خارجی