Page Visibility API: Deteksi Status Tab Browser secara Real-Time

JAKARTA, cssmayo.com – Pernahkah kamu membuka tab YouTube lalu beralih ke tab lain, dan video otomatis berhenti? Atau notifikasi di aplikasi web yang berhenti datang saat tab sedang tidak aktif, lalu langsung muncul semua saat tab dibuka kembali? Di balik perilaku yang terasa “cerdas” itu, ada satu browser API sederhana yang bekerja: Page Visibility API.

Page Visibility API adalah standar web yang memungkinkan JavaScript mendeteksi apakah halaman web yang sedang berjalan sedang terlihat oleh pengguna atau tersembunyi — misalnya karena pengguna berpindah ke tab lain, meminimalkan browser, atau mengunci layar. Selain itu, dengan informasi ini, aplikasi web bisa membuat keputusan cerdas tentang sumber daya mana yang perlu dijalankan dan mana yang bisa dijeda untuk menghemat performa dan daya.

Cara Kerja Page Visibility API

Page Visibility API bekerja melalui dua antarmuka utama yang sangat sederhana.

document.visibilityState: Properti yang mengembalikan string yang mendeskripsikan status visibilitas halaman saat ini. Nilainya bisa "visible" saat halaman terlihat pengguna, atau "hidden" saat halaman tersembunyi karena tab tidak aktif, browser diminimalkan, atau layar dikunci.

document.hidden: Properti boolean yang mengembalikan true jika halaman sedang tersembunyi, dan false jika terlihat. Selain itu, ini adalah cara tercepat untuk mengecek status visibilitas tanpa perlu membandingkan string.

visibilitychange event: Event yang dilemparkan oleh document setiap kali status visibilitas halaman berubah — baik dari visible ke hidden maupun sebaliknya.

Penting dipahami bahwa “hidden” tidak selalu berarti pengguna menutup tab. Ada banyak kondisi yang membuat halaman masuk ke state hidden:

• Pengguna berpindah ke tab lain di browser yang sama
• Pengguna beralih ke aplikasi lain di desktop atau mobile
• Browser diminimalkan ke taskbar
• Layar perangkat dikunci atau mati
• Pada mobile, pengguna menekan tombol home untuk kembali ke launcher

Dengan demikian, page visibility API memberikan gambaran yang lebih akurat tentang apakah halaman benar-benar sedang digunakan, bukan sekadar apakah tab-nya terbuka.

// Cek status awal
console.log(document.visibilityState); // "visible" atau "hidden"

// Pantau perubahan
document.addEventListener('visibilitychange', () => {
  if (document.hidden) {
    console.log('Pengguna meninggalkan halaman');
    // Jeda animasi, hentikan polling, dll
  } else {
    console.log('Pengguna kembali ke halaman');
    // Lanjutkan aktivitas, refresh data, dll
  }
});

Kasus Penggunaan Page Visibility API

Page Visibility API berguna di banyak skenario yang sering ditemui dalam pengembangan web:

• Menjeda video dan audio: Saat tab tersembunyi, media player bisa dijeda otomatis dan dilanjutkan saat pengguna kembali. Ini persis yang dilakukan YouTube dan platform streaming lainnya.
• Menghemat API polling: Aplikasi yang terus-menerus meminta data terbaru dari server bisa menghentikan polling saat tab tidak aktif. Hasilnya adalah pengurangan beban server dan penghematan bandwidth yang signifikan.
• Menghentikan animasi berat: Animasi CSS atau canvas yang intensif CPU bisa dijeda saat halaman tidak terlihat — menghemat baterai di perangkat mobile dan mengurangi beban CPU.
• Melacak waktu aktif: Aplikasi analitik bisa mengukur berapa lama pengguna benar-benar aktif di halaman, bukan hanya berapa lama tab terbuka. Selain itu, data ini jauh lebih akurat untuk mengukur engagement.
• Sinkronisasi data saat kembali: Saat pengguna kembali ke tab, aplikasi bisa langsung memperbarui data yang mungkin sudah ketinggalan — seperti feed media sosial atau harga saham.
• Game web: Game bisa dijeda secara otomatis saat pemain berpindah tab dan dilanjutkan saat mereka kembali.

Contoh Implementasi: Efisiensi Polling

Berikut contoh nyata menghentikan interval saat tab tersembunyi:

let intervalId;

function startPolling() {
  intervalId = setInterval(fetchLatestData, 5000);
}

function stopPolling() {
  clearInterval(intervalId);
}

document.addEventListener('visibilitychange', () => {
  if (document.hidden) {
    stopPolling();
  } else {
    fetchLatestData(); // Langsung ambil data terbaru
    startPolling();
  }
});

startPolling(); // Mulai saat halaman pertama kali dimuat

Dengan pola ini, server tidak dibebani permintaan dari tab yang sedang tidak digunakan pengguna. Selain itu, saat pengguna kembali, data langsung diperbarui tanpa menunggu interval berikutnya.

Page Visibility API dan Performa Aplikasi

Salah satu dampak terbesar page visibility API adalah pada performa aplikasi web secara keseluruhan. Browser modern sendiri sudah melakukan beberapa optimasi otomatis saat tab tidak aktif — misalnya membatasi frekuensi requestAnimationFrame dan setTimeout. Namun optimasi browser ini tidak selalu cukup untuk semua skenario. Hasilnya, developer perlu mengambil tindakan eksplisit untuk aplikasi yang lebih kompleks.

Bayangkan sebuah dashboard monitoring yang menampilkan grafik real-time dengan data yang diperbarui setiap detik. Saat tab tersembunyi, setiap pembaruan data melibatkan request ke server, parsing JSON, pembaruan state, dan re-render komponen — semua pekerjaan ini terjadi tanpa ada satu pun pengguna yang melihatnya. Selain itu, jika ada seratus pengguna yang membuka dashboard namun sedang tidak melihatnya, beban server yang sia-sia ini sangat signifikan.

Dengan page visibility API, semua pekerjaan itu bisa dihentikan saat tab tidak aktif dan dilanjutkan saat pengguna kembali. Oleh karena itu, page visibility API bukan hanya tentang kenyamanan pengguna — ia adalah alat optimasi performa yang berdampak langsung pada infrastruktur server dan biaya operasional.

Page Visibility API dalam Konteks Framework Modern

Page visibility API adalah Web API native yang bisa digunakan langsung di JavaScript murni. Namun dalam aplikasi modern yang dibangun dengan React, Vue, atau Angular, ada cara yang lebih idiomatis untuk menggunakannya.

React Hook kustom:

import { useState, useEffect } from 'react';

function usePageVisibility() {
  const [isVisible, setIsVisible] = useState(!document.hidden);

  useEffect(() => {
    const handleVisibilityChange = () => {
      setIsVisible(!document.hidden);
    };

    document.addEventListener('visibilitychange', handleVisibilityChange);

    return () => {
      document.removeEventListener('visibilitychange', handleVisibilityChange);
    };
  }, []);

  return isVisible;
}

// Penggunaan dalam komponen
function LiveFeed() {
  const isVisible = usePageVisibility();

  useEffect(() => {
    if (!isVisible) return; // Hentikan saat tidak terlihat

    const interval = setInterval(fetchFeed, 3000);
    return () => clearInterval(interval);
  }, [isVisible]);

  return <div>...</div>;
}

Dengan pola hook seperti ini, logika page visibility API menjadi sangat mudah digunakan kembali di seluruh aplikasi. Selain itu, cleanup event listener ditangani secara otomatis oleh useEffect — mencegah memory leak yang sering terjadi saat event listener tidak dihapus dengan benar.

Page Visibility API didukung oleh semua browser modern tanpa perlu polyfill — Chrome, Firefox, Safari, Edge, dan Opera semuanya mendukung penuh. Selain itu, dukungan dimulai dari versi browser yang sudah sangat lama sehingga tidak perlu khawatir tentang kompatibilitas di hampir semua lingkungan produksi.

Kesimpulan

Page Visibility API adalah salah satu browser API yang paling sederhana namun dampaknya pada performa dan pengalaman pengguna sangat besar. Dengan hanya beberapa baris kode, aplikasi web bisa menjadi jauh lebih cerdas dalam mengelola sumber daya — berhenti bekerja keras saat tidak ada yang melihat, dan langsung siap saat pengguna kembali. Selain itu, penerapannya yang mudah dan dukungan browser yang universal menjadikan page visibility API sebagai fitur yang seharusnya ada di setiap aplikasi web modern yang serius. Mulai dari menghemat request API yang tidak perlu, menjeda animasi yang boros CPU, hingga mengukur engagement secara akurat — page visibility API memberikan nilai yang jauh melampaui kesederhanaannya.

Eksplorasi lebih dalam Tentang topik: Techno

Cobain Baca Artikel Lainnya Seperti: Web Animations API: Animasi Web Native Tanpa Library Eksternal