Page Visibility API: بهینه‌سازی عملکرد وب و تجربه کاربری در سطح جهانی

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

Page Visibility API چیست؟

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

این API دو ویژگی اصلی را ارائه می‌دهد:

• خاصیت `document.visibilityState`: وضعیت قابل مشاهده بودن فعلی سند را برمی‌گرداند. مقادیر ممکن عبارتند از:
• `visible`: صفحه در تب یا پنجره پیش‌زمینه قرار دارد.
• `hidden`: صفحه در یک تب پس‌زمینه، پنجره کوچک‌شده یا صفحه قفل‌شده قرار دارد.
• `prerender`: صفحه در حال پیش-رندر شدن است اما هنوز قابل مشاهده نیست.
• `unloaded`: صفحه در حال تخلیه از حافظه است.
• رویداد `visibilitychange`: رویدادی که هر زمان وضعیت قابل مشاهده بودن سند تغییر کند، فعال می‌شود.

چرا Page Visibility API مهم است؟

Page Visibility API مزایای قابل توجهی هم برای کاربران و هم برای توسعه‌دهندگان دارد:

بهبود عملکرد وب

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

• نظرسنجی مکرر داده‌ها (Polling): توقف یا کاهش فرکانس درخواست‌های AJAX به سرور.
• رندر انیمیشن‌ها: متوقف کردن انیمیشن‌ها یا کاهش نرخ فریم آن‌ها.
• پخش ویدئو: متوقف کردن پخش ویدئو یا کاهش کیفیت آن.
• محاسبات سنگین: تعلیق محاسبات پیچیده یا پردازش داده‌ها.

این کار مصرف CPU، حافظه و پهنای باند شبکه را کاهش می‌دهد و منجر به زمان بارگذاری سریع‌تر، عملکرد روان‌تر و بهبود عمر باتری، به ویژه در دستگاه‌های تلفن همراه می‌شود.

افزایش تجربه کاربری

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

• اعلان‌ها: نمایش اعلان‌ها زمانی که یک تب پنهان دوباره قابل مشاهده می‌شود.
• نشانگرهای پیشرفت: متوقف کردن یا از سرگیری نشانگرهای پیشرفت بر اساس قابلیت مشاهده بودن.
• ذخیره پیشرفت کاربر: ذخیره خودکار پیشرفت کاربر زمانی که صفحه پنهان می‌شود برای جلوگیری از از دست رفتن داده‌ها.

این بهبودها به ایجاد یک وب‌سایت واکنش‌گرا و کاربرپسندتر، صرف نظر از دستگاه یا شرایط شبکه کاربر، کمک می‌کنند.

بهینه‌سازی منابع

Page Visibility API برای مدیریت کارآمد منابع، به ویژه در برنامه‌های تک-صفحه‌ای (SPA) و برنامه‌های وب که وظایف پس‌زمینه را انجام می‌دهند، حیاتی است. با تعلیق عملیات غیرضروری زمانی که یک تب پنهان است، این API منابع سیستم را برای سایر برنامه‌ها و وظایف آزاد می‌کند و عملکرد کلی سیستم را بهبود می‌بخشد.

چگونه از Page Visibility API استفاده کنیم

استفاده از Page Visibility API ساده است. در اینجا یک مثال اولیه آورده شده است:

// بررسی وضعیت اولیه قابل مشاهده بودن
if (document.visibilityState === "visible") {
  // صفحه قابل مشاهده است، وظایف را شروع یا از سر بگیرید
  startTasks();
} else {
  // صفحه پنهان است، وظایف را متوقف کنید
  pauseTasks();
}

// گوش دادن به رویدادهای تغییر وضعیت قابل مشاهده بودن
document.addEventListener("visibilitychange", function() {
  if (document.visibilityState === "visible") {
    // صفحه قابل مشاهده است، وظایف را شروع یا از سر بگیرید
    startTasks();
  } else {
    // صفحه پنهان است، وظایف را متوقف کنید
    pauseTasks();
  }
});

function startTasks() {
  console.log("شروع وظایف...");
  // کد شما برای شروع وظایف سنگین در اینجا قرار می‌گیرد
}

function pauseTasks() {
  console.log("متوقف کردن وظایف...");
  // کد شما برای متوقف کردن وظایف سنگین در اینجا قرار می‌گیرد
}

این قطعه کد نشان می‌دهد که چگونه وضعیت اولیه قابل مشاهده بودن را بررسی کرده و به رویدادهای `visibilitychange` گوش دهید تا وظایف را بر اساس آن شروع یا متوقف کنید.

مثال‌های عملی و موارد استفاده

بیایید چند مثال عملی از نحوه استفاده از Page Visibility API در سناریوهای مختلف را بررسی کنیم:

مثال ۱: بهینه‌سازی پخش ویدئو

یک وب‌سایت پخش ویدئو را در نظر بگیرید. زمانی که کاربر به تب دیگری می‌رود، نیازی به ادامه بافرینگ یا پخش ویدئو در پس‌زمینه نیست.

const videoElement = document.getElementById("myVideo");

document.addEventListener("visibilitychange", function() {
  if (document.visibilityState === "visible") {
    // صفحه قابل مشاهده است، پخش ویدئو را از سر بگیرید
    videoElement.play();
  } else {
    // صفحه پنهان است، پخش ویدئو را متوقف کنید
    videoElement.pause();
  }
});

این کد ویدئو را زمانی که تب پنهان می‌شود متوقف می‌کند و باعث صرفه‌جویی در پهنای باند و منابع CPU می‌شود.

مثال ۲: کاهش فرکانس نظرسنجی داده‌ها

بسیاری از برنامه‌های وب برای به‌روز ماندن با آخرین اطلاعات به نظرسنجی مکرر داده‌ها متکی هستند. با این حال، این کار می‌تواند زمانی که کاربر به طور فعال صفحه را مشاهده نمی‌کند، بیهوده باشد.

let pollingInterval;

function startPolling() {
  pollingInterval = setInterval(function() {
    // کد شما برای دریافت داده از سرور
    fetchData();
  }, 5000); // هر ۵ ثانیه نظرسنجی کنید
}

function stopPolling() {
  clearInterval(pollingInterval);
}


document.addEventListener("visibilitychange", function() {
  if (document.visibilityState === "visible") {
    // صفحه قابل مشاهده است، نظرسنجی را شروع کنید
    startPolling();
  } else {
    // صفحه پنهان است، نظرسنجی را متوقف کنید
    stopPolling();
  }
});

// در ابتدا اگر صفحه قابل مشاهده است، نظرسنجی را شروع کنید
if (document.visibilityState === "visible") {
    startPolling();
}

function fetchData() {
  // با منطق واقعی دریافت داده خود جایگزین کنید
  console.log("در حال دریافت داده...");
}

این کد نظرسنجی داده‌ها را زمانی که تب پنهان است متوقف کرده و زمانی که تب دوباره قابل مشاهده می‌شود، آن را از سر می‌گیرد.

مثال ۳: متوقف کردن حلقه‌های بازی

برای بازی‌های مبتنی بر وب، ضروری است که حلقه بازی را زمانی که کاربر به تب دیگری می‌رود متوقف کنید تا از مصرف غیرضروری CPU و خالی شدن باتری جلوگیری شود.

let gameLoopInterval;

function startGameLoop() {
  gameLoopInterval = setInterval(gameLoop, 16); // ۶۰ فریم بر ثانیه
}

function stopGameLoop() {
  clearInterval(gameLoopInterval);
}

function gameLoop() {
  // منطق بازی شما در اینجا
  console.log("حلقه بازی در حال اجرا است...");
}


document.addEventListener("visibilitychange", function() {
  if (document.visibilityState === "visible") {
    // صفحه قابل مشاهده است، حلقه بازی را شروع کنید
    startGameLoop();
  } else {
    // صفحه پنهان است، حلقه بازی را متوقف کنید
    stopGameLoop();
  }
});

// در ابتدا اگر صفحه قابل مشاهده است، حلقه بازی را شروع کنید
if (document.visibilityState === "visible") {
    startGameLoop();
}

این کد حلقه بازی را زمانی که تب پنهان است متوقف می‌کند و از مصرف منابع توسط بازی در پس‌زمینه جلوگیری می‌کند.

مثال ۴: ذخیره خودکار داده‌های کاربر

برای جلوگیری از از دست رفتن داده‌ها، برنامه‌ها می‌توانند به طور خودکار داده‌های کاربر را زمانی که صفحه پنهان می‌شود ذخیره کنند.

document.addEventListener("visibilitychange", function() {
  if (document.visibilityState === "hidden") {
    // صفحه پنهان است، داده‌های کاربر را ذخیره کنید
    saveUserData();
  }
});

function saveUserData() {
  // کد شما برای ذخیره داده‌های کاربر در حافظه محلی یا سرور
  console.log("در حال ذخیره داده‌های کاربر...");
}

این کار تضمین می‌کند که پیشرفت کاربر ذخیره می‌شود حتی اگر کاربر به طور تصادفی تب را ببندد یا از صفحه خارج شود.

سازگاری با مرورگرها

Page Visibility API به طور گسترده توسط مرورگرهای مدرن از جمله Chrome, Firefox, Safari, Edge و Opera پشتیبانی می‌شود. برای آخرین اطلاعات می‌توانید جدول سازگاری را در وب‌سایت MDN Web Docs بررسی کنید.

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

بهترین شیوه‌ها برای استفاده از Page Visibility API

در اینجا چند مورد از بهترین شیوه‌ها برای استفاده از Page Visibility API آورده شده است:

• از بهینه‌سازی بیش از حد خودداری کنید: کد را بر اساس وضعیت قابل مشاهده بودن به طور زودهنگام بهینه‌سازی نکنید. برنامه خود را پروفایل کنید تا سنگین‌ترین وظایف را شناسایی کرده و ابتدا روی بهینه‌سازی آن‌ها تمرکز کنید.
• تغییرات قابل مشاهده بودن را Debounce یا Throttle کنید: برای جلوگیری از مدیریت بیش از حد رویدادها، Debounce یا Throttle کردن رویداد `visibilitychange` را در نظر بگیرید.
• به طور کامل تست کنید: برنامه خود را در مرورگرهای مختلف و روی دستگاه‌های مختلف تست کنید تا اطمینان حاصل کنید که Page Visibility API به درستی کار می‌کند.
• دسترسی‌پذیری را در نظر بگیرید: اطمینان حاصل کنید که استفاده شما از Page Visibility API تأثیر منفی بر دسترسی‌پذیری ندارد. به عنوان مثال، راه‌های جایگزینی برای دسترسی کاربران به اطلاعات یا ویژگی‌هایی که هنگام پنهان بودن صفحه متوقف یا غیرفعال می‌شوند، فراهم کنید.
• بازخورد واضح ارائه دهید: به کاربران اطلاع دهید که چه زمانی وظایف بر اساس وضعیت قابل مشاهده بودن متوقف یا از سر گرفته می‌شوند. این می‌تواند به جلوگیری از سردرگمی و بهبود تجربه کاربری کمک کند. به عنوان مثال، یک نوار پیشرفت می‌تواند زمانی که تب پنهان است متوقف شده و زمانی که دوباره قابل مشاهده می‌شود، از سر گرفته شود.

آینده عملکرد وب و Page Visibility API

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

• وضعیت‌های قابل مشاهده بودن دقیق‌تر: این API می‌تواند گسترش یابد تا اطلاعات دقیق‌تری در مورد وضعیت قابل مشاهده بودن یک صفحه ارائه دهد، مانند اینکه آیا بخشی از آن توسط عناصر دیگر پوشانده شده یا مسدود شده است.
• ادغام با سایر APIها: این API می‌تواند با سایر APIهای مرورگر، مانند Idle Detection API، ادغام شود تا قابلیت‌های مدیریت منابع پیچیده‌تری را ارائه دهد.
• بهبود Polyfillها: Polyfillهای دقیق‌تر و کارآمدتری می‌توانند برای پشتیبانی از مرورگرهای قدیمی‌تر توسعه داده شوند.

نتیجه‌گیری

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

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