Menggunakan Page Visibility API

Ernest Delgado
Ernest Delgado
X

Pengantar

Sebagai pengembang Web, kita cenderung senang dengan teknologi baru yang memungkinkan kita membuat laman Web yang lebih menarik dan interaktif. Grafis 3D dengan WebGL? Tentu saja. Kemampuan audio tingkat lanjut dengan WebAudio? Tentunya. Aplikasi kolaborasi waktu nyata menggunakan Kamera web dan mikrofon? Daftarkan saya!

Teknologi yang memungkinkan kita membangun aplikasi yang berjalan lebih efisien dan memberikan pengalaman pengguna yang lebih baik secara keseluruhan, kurang menarik, meskipun sama pentingnya. Di sinilah API seperti {i>PageVisibility<i} berperan.

Page Visibility API menjalankan fungsi sederhana namun penting – API ini memberi tahu aplikasi Anda saat halaman dapat dilihat oleh pengguna. Informasi dasar ini memungkinkan pembuatan halaman Web yang berperilaku berbeda saat tidak dilihat. Pertimbangkan beberapa contoh:

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

Pada awalnya, API ini mungkin tidak terlihat terlalu berguna di luar 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.

Dukungan Browser

  • 33
  • 12
  • 18
  • 7

Sumber

Spesifikasi API, yang saat ini berada dalam tahap Rekomendasi Kandidat, menyediakan kedua 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 (Anda bisa langsung membahasnya jika Anda tidak sabar).

Properti Visibilitas Dokumen

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

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

Berurusan dengan awalan vendor

Agar fokus pada kode, bukan semua awalan khusus vendor, saya akan menggunakan beberapa fungsi bantuan untuk mengisolasi khusus browser. Segera 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 benar-benar tersembunyi agar tidak dapat dilihat
  • 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 muatannya, nilai ini akan ditampilkan (nilai ini bersifat opsional; tidak semua browser akan mendukungnya)

Peristiwa Perubahan Visibilitas

Selain properti visibilitas, ada peristiwa perubahan visibilitas yang diaktifkan setiap kali status visibilitas dokumen berubah. Anda bisa mendaftarkan pemroses peristiwa untuk peristiwa ini secara langsung pada 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 tidak hanya melibatkan penggunaan fitur canggih yang dapat dilihat dan berinteraksi dengan pengguna. Aplikasi yang benar-benar hebat memanfaatkan sumber daya dan perhatian pengguna secara penuh pertimbangan, dan Page Visibility API merupakan bagian penting dari teka-teki tersebut. Untuk mempelajari lebih lanjut cara membangun aplikasi Web yang mempertimbangkan resource, lihat artikel kami yang lain terkait performa.

Referensi Eksternal