API Visibility Page: بهبود تجربه و عملکرد کاربر

من همیشه مشتاق به اشتراک گذاشتن بینش در مورد APIهای کمتر شناخته شده و در عین حال قدرتمند در اکوسیستم وب مدرن هستم.

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

صفحه Visibility API چیست؟

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

شروع به کار با صفحه Visibility API

بیایید دو مؤلفه اصلی صفحه نمایش API را بررسی کنیم: document.hidden اموال و visibilitychange رویداد.

سند.ملاک پنهان

را document.hidden ویژگی یک مقدار بولی است که نشان می دهد صفحه در حال حاضر پنهان یا قابل مشاهده است. اگر صفحه پنهان باشد، ویژگی true را برمی گرداند. اگر قابل مشاهده باشد، false برمی گردد.
مثال:

if (document.hidden) {
  console.log("The page is hidden");
} else {
  console.log("The page is visible");
}

رویداد تغییر دید

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

مثال:

document.addEventListener("visibilitychange", function() {
  if (document.hidden) {
    console.log("The page is hidden");
  } else {
    console.log("The page is visible");
  }
});

یک مثال عملی

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

تایمر را بررسی کنید و ببینید که وقتی به یک برگه دیگر می روید چگونه به طور “جادویی” متوقف می شود.

برای کشف کد وارد CodePen شوید.

چه زمانی از صفحه Visibility API استفاده کنیم

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

در اینجا چند مورد استفاده رایج وجود دارد که باید از API مشاهده صفحه استفاده کنید:

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

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

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

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

• تجزیه و تحلیل وب: با ردیابی وضعیت نمایان بودن صفحات خود، می توانید داده های تجزیه و تحلیل دقیق تری در مورد تعامل کاربر و مدت زمان جلسه جمع آوری کنید. این به شما کمک می کند تا تصمیمات آگاهانه تری در مورد طراحی و عملکرد برنامه وب خود بگیرید.

من را دنبال کنید توییتر یا در لینکدین وصل شوید.

🚨 آیا می خواهید دوستانی پیدا کنید و از همسالان خود یاد بگیرید؟
در اینجا می توانید به انجمن توسعه دهندگان وب رایگان ما بپیوندید. 🎉