با استفاده از صفحه Visibility API

ارنست دلگادو
Ernest Delgado
X

معرفی

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

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

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

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

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

پشتیبانی مرورگر

  • 33
  • 12
  • 18
  • 7

منبع

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

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

ویژگی های نمایان بودن سند

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

همانطور که ممکن است انتظار داشته باشید، زمانی که سند به هیچ وجه قابل مشاهده نباشد، ویژگی مخفی true برمی گردد. به طور معمول، این بدان معنی است که سند یا به حداقل می رسد، در یک برگه پس زمینه، صفحه قفل سیستم عامل بالا است، و غیره. اگر هر بخشی از سند حداقل تا حدی در حداقل یک نمایشگر قابل مشاهده باشد، این ویژگی روی false تنظیم می شود. علاوه بر این، برای قرار دادن ابزارهای دسترس‌پذیری، زمانی که ابزاری مانند ذره‌بین صفحه، سند را کاملاً مبهم می‌کند، اما نمای آن را نشان می‌دهد، می‌توان ویژگی پنهان را روی false تنظیم کرد.

برخورد با پیشوندهای فروشنده

برای حفظ تمرکز روی کد به جای تمام پیشوندهای خاص فروشنده، از برخی توابع کمکی برای جداسازی ویژگی های خاص مرورگر استفاده می کنم. به محض اینکه پشتیبانی از مرورگر اندروید 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

علاوه بر ویژگی‌های visibility، یک رویداد 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 قطعه مهمی از این پازل است. برای کسب اطلاعات بیشتر در مورد ساخت برنامه های کاربردی وب مبتنی بر منابع، سایر مقالات مرتبط با عملکرد ما را بررسی کنید.

مراجع خارجی