Menggunakan Page Visibility API

Ernest Delgado
Ernest Delgado
X

Pengantar

Sebagai developer Web, kita cenderung tertarik dengan teknologi baru yang memungkinkan kita membuat halaman Web yang lebih menarik dan interaktif. Grafis 3D dengan WebGL? Tentu saja. Kemampuan audio lanjutan dengan WebAudio? Tentu saja. Aplikasi kolaborasi real-time yang menggunakan kamera dan mikrofon Web? Daftarkan saya!

Meskipun kurang menarik, teknologi yang memungkinkan kita membangun aplikasi yang berjalan lebih efisien dan memberikan pengalaman pengguna yang lebih baik secara keseluruhan juga sama pentingnya. Di sinilah API seperti PageVisibility berperan.

Page Visibility API menjalankan fungsi yang sederhana, tetapi penting, yaitu memberi tahu aplikasi Anda saat halaman dapat dilihat oleh pengguna. Informasi dasar ini memungkinkan pembuatan halaman Web yang berperilaku berbeda saat tidak dilihat. Perhatikan beberapa contoh berikut:

  • Halaman web yang mengambil informasi dari server dapat memperlambat siklus update-nya saat tidak dilihat secara aktif
  • Halaman yang menampilkan carousel gambar berputar atau konten video/audio dapat dijeda hingga pengguna menampilkan halaman lagi
  • Aplikasi dapat memutuskan untuk menampilkan notifikasi kepada pengguna hanya saat aplikasi disembunyikan dari tampilan

Pada awalnya, API ini mungkin tidak terlihat terlalu berguna selain untuk kenyamanan pengguna, tetapi mengingat peningkatan besar dalam penjelajahan Web seluler, apa pun yang membantu menghemat daya baterai perangkat menjadi sangat penting. Dengan menggunakan PageVisibility API, situs Anda dapat membantu perangkat pengguna mengonsumsi lebih sedikit daya dan bertahan lebih lama.

Browser Support

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

Source

Spesifikasi API, yang saat tulisan ini dibuat berada dalam tahap Rekomendasi Kandidat, menyediakan properti untuk mendeteksi status visibilitas dokumen serta peristiwa untuk merespons perubahan visibilitas.

Dalam tutorial ini, saya akan membahas dasar-dasar API dan menunjukkan cara menerapkannya ke beberapa contoh praktis (silakan langsung beralih ke contoh tersebut jika Anda tidak sabar).

Properti visibilitas dokumen

Versi saat ini dari spesifikasi PageVisibilityAPI menentukan dua properti dokumen: boolean hidden dan enumerasi visibilityState. Properti visibilityState saat ini memiliki empat kemungkinan nilai: hidden, visible, prerender, dan unloaded.

Seperti yang mungkin Anda duga, atribut tersembunyi akan menampilkan nilai benar (true) jika dokumen tidak terlihat sama sekali. Biasanya, ini berarti dokumen diperkecil, berada di tab latar belakang, layar kunci OS aktif, dll. Atribut ini ditetapkan ke false jika ada bagian dokumen yang setidaknya terlihat sebagian di setidaknya satu layar. Selain itu, untuk mengakomodasi alat aksesibilitas, atribut tersembunyi dapat ditetapkan ke salah (false) saat alat seperti pembesar layar sepenuhnya mengaburkan dokumen, tetapi menampilkan tampilannya.

Menangani awalan vendor

Agar fokus tetap pada kode, bukan pada semua awalan khusus vendor, saya akan menggunakan beberapa fungsi bantuan untuk mengisolasi hal-hal khusus browser. Setelah Anda menghentikan dukungan untuk Browser Android 4.4, Anda dapat menghapus bagian ini dan tetap menggunakan nama standar.

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;
}

Contoh properti dokumen

Sekarang kita dapat menulis fungsi lintas browser, isHidden(), untuk melihat apakah dokumen terlihat.

function isHidden() {
    var prop = getHiddenProp();
    if (!prop) return false;

    return document[prop];
}

Untuk tampilan visibilitas dokumen yang lebih terperinci, Anda dapat menggunakan properti visibilityState. Properti ini menampilkan salah satu dari empat nilai:

  • hidden: dokumen sepenuhnya disembunyikan dari tampilan
  • visible: dokumen setidaknya terlihat sebagian di setidaknya satu perangkat layar
  • prerender: dokumen dimuat di luar layar dan tidak terlihat (nilai ini bersifat opsional; tidak semua browser akan mendukungnya)
  • unloaded: jika dokumen akan dihapus, nilai ini akan ditampilkan (nilai ini bersifat opsional; tidak semua browser akan mendukungnya)

Peristiwa VisibilityChange

Selain properti visibilitas, ada peristiwa visibilitychange yang diaktifkan setiap kali status visibilitas dokumen berubah. Anda dapat mendaftarkan pemroses peristiwa untuk peristiwa ini langsung di objek dokumen:

Contoh peristiwa

// 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";
   }
}

Ringkasan

Membangun aplikasi Web yang hebat melibatkan lebih dari sekadar menggunakan fitur-fitur canggih dan menarik yang dapat dilihat dan digunakan oleh pengguna. Aplikasi yang benar-benar hebat menggunakan resource dan perhatian pengguna dengan penuh pertimbangan, dan Page Visibility API adalah bagian penting dari teka-teki tersebut. Untuk mempelajari lebih lanjut cara membangun aplikasi Web yang hemat resource, lihat artikel terkait performa lainnya.

Referensi eksternal