Javascript History API

Location Bar (tempat mengisikan URL) dan tombol Back merupakan dua elemen yang paling banyak digunakan pada sebuah browser [1]. Sebagai elemen terpopuler, tentunya sangat banyak pengguna yang bergantung pada kedua elemen ini dalam melakukan navigasi website. Ketika ingin mengunjungi sebuah web, kita memasukkan alamat web tersebut ke dalam Location Bar. Jika kita berpindah-pindah halaman dalam satu jendela browser, kita lalu dapat kembali ke halaman sebelumnya melalui tombol Back. Model navigasi seperti ini merupakan model yang paling umum digunakan oleh pengguna awam.

Di dalam sebuah website sendiri biasanya terdapat elemen-elemen yang tidak berubah antar halaman web, misalnya menu atau logo dari website. Ketika pengguna berpindah dari satu halaman ke halaman lain maka pengguna harus mengambil kembali elemen-elemen yang sama tersebut. Pengembang web modern menghindari hal ini dengan menggunakan teknik seperti AJAX yang dapat memperbaharui halaman web dengan menambah atau mengubah bagian-bagian yang perlu diganti tanpa pengguna harus berpindah halaman. Penggunaan AJAX untuk navigasi web seperti ini, sayangnya membuat tombol Back tidak lagi dapat digunakan. AJAX memperbaharui halaman web tanpa berpindah halaman ini maka browser tidak dapat mencatat sejarah browsing, yang menyebabkan tombol Back tidak dapat digunakan. Hal ini seringkali mengecewakan para pengguna.

History API dari Javascript kemudian dikembangkan untuk menyelesaikan permasalahan tombol Back yang tidak dapat digunakan pada website dengan fitur AJAX ini. Fitur utama yang ditawarkan oleh History API adalah penelusuran dan manipulasi sejarah browser. Adapun mayoritas dari History API dapat diakses melalui objek window.history.

Langsung saja, mari kita lihat beberapa fitur yang ditawarkan.

Penelusuran Sejarah Browser

Penelusuran sejarah browser dapat dilakukan dengan sangat mudah, melalui method khusus yang sudah disediakan yaitu history.back dan history.forward:

1
2
3
4
5
6
// mundur satu halaman ke belakang
window.history.back();
history.back();        // fungsinya sama dengan di atas

// maju satu halaman ke depan
history.forward();

Kita juga dapat bergerak ke posisi spesifik dalam sejarah, dengan menggunakan method history.go. Method history.go menerima satu parameter, yaitu sebuah angka yang menentukan sejauh mana kita ingin bergerak relatif terhadap posisi sekarang dalam sejarah. Hal ini berarti nilai positif akan membuat kita bergerak maju, dan nilai negatif membuat kita bergerak mundur dalam sejarah browser.

1
2
3
4
5
history.go(-1); // bergerak mundur ke 1 halaman sebelumnya
history.go(-5); // bergerak mundur ke 5 halaman sebelumnya

history.go(1);  // bergerak maju 1 halaman
history.go(5);  // bergerak maju 5 halaman

Jika kita tidak mengetahui dengan pasti ada berapa halaman ke belakang maupun ke depan, kita dapat menggunakan properti history.length untuk melihat ada berapa banyak total sejarah yang sudah tercatat.

1
var jlhSejarah = history.length;

Dengan menggunakan fungsi maupun properti di atas kita dapat mempermudah navigasi halaman pengguna melalui kode program. Selanjutnya, kita akan melihat bagaimana secara langsung menambahkan data sejarah baru ke browser.

Manipulasi Sejarah Browser

Terdapat dua method utama yang akan kita gunakan untuk melakukan manipulasi sejarah browser, yaitu history.pushState dan history.replaceState. history.pushState berguna untuk menambahkan catatan sejarah baru ke dalam browser, sementara history.replaceState digunakan untuk memodifikasi catatan sejarah terakhir (halaman yang sedang dibuka pengguna).

Langsung saja, kita akan melihat cara kerja dari masing-masing fungsi yang disediakan untuk manipulasi sejarah browser.

Fungsi history.pushState

Seperti yang dijelaskan sebelumnya, history.pushState menambahkan sejarah baru ke dalam browser. Hal ini berarti setiap kali kita memanggil history.pushState browser akan memindahkan halaman yang sekarang dengan data baru ke dalam history stack. Hal ini sedikit berbeda dengan navigasi biasa yang mana browser memasukkan URL halaman baru ke dalam history stack dan kemudian melakukan download kepada halaman baru tersebut.

history.pushState menerima tiga buah parameter, yaitu:

  1. Sebuah objek yang menyimpan data sejarah. Objek ini dapat diisikan dengan data apapun yang kita inginkan, dan idealnya berisi data yang digunakan untuk menandai status halaman yang dibuka. Objek ini disebut dengan objek state. Objek state disimpan di dalam komputer lokal pengguna, dengan batas maksimal 640k karakter ketika objek diserialkan (misal dengan memanggil JSON.stringify). Jika memerlukan objek yang lebih besar dari itu, gunakan sessionStorage dan localStorage.

    Objek state ini nantinya akan diberikan ke halaman yang sedang aktif ketika pengguna menekan tombol Back (atau kembali ke halaman sebelumya dengan history.back maupun history.go). Objek diberikan melalui event popstate.

  2. Parameter kedua merupakan sebuah string, yang memberikan nama dari sejarah yang akan dikunjungi. Sayangnya, parameter kedua ini belum didukung mayoritas browser pada masa penulisan (September 2014) sehingga parameter ini tidak melakukan apa-apa.

  3. Sebuah string yang berisi URL baru. Browser tidak akan pindah ke URL baru ini ketika kita memanggil pushState, melainkan hanya menggantikan URL yang ada dengan URL baru ini. Begitupun, terdapat kasus di mana browser akan membuka URL ini, misalnya ketika kita mematikan dan menjalankan kembali browser. Parameter ketiga ini dapat diisikan dengan URL relatif, tetapi harus dari domain yang sama. Jika URL yang diberikan memiliki domain berbeda maka sebuah exception akan dilemparkan. Parameter ketiga bersifat opsional. Jika tidak diberikan, parameter ketiga diasumsikan adalah alamat URL sekarang.

Ketika menggunakan history.pushState, hal yang paling perlu diperhatikan adalah data yang kita berikan pada parameter pertama. Sebagai data yang menandakan keadaan (state) dari sebuah sejarah yang baru dibuat, biasanya data ini lah yang menentukan tampilan atau bentuk halaman yang akan kita berikan ke pengguna. Misalnya pada sebuah daftar artikel yang disimpan dalam beberapa halaman, kita dapat mengirimkan nomor halaman selanjutnya seperti berikut:

1
2
3
4
5
var data = {
    hal: halSelanjutnya
};

history.pushState(data, "Halaman " + halSelanjutnya, "/artikel/halaman/" + halSelanjutnya);

Perhatikan bahwa data yang kita kirimkan berisi halaman selanjutnya, yakni halaman yang akan kita tampilkan bukan halaman tempat sekarang pengguna berada. Data yang kita kirimkan ini akan dapat diakses ketika pengguna menekan tombol Back dari halaman berikutnya. Data kita akses melalui event popstate.

Fungsi history.replaceState

history.replaceState merupakan method yang cara kerjanya sama persis dengan history.pushState. Perbedaan utama method ini dengan history.pushState adalah history.replaceState tidak menambahkan catatan sejarah baru, melainkan langsung menggantikan state halaman yang sedang dibuka sekarang.

Method ini sangat berguna terutama ketika kita ingin menambahkan state baru ke halaman, berdasarkan apa yang dilakukan oleh pengguna.

Event PopState

Event PopState dijalankan oleh browser setiap kali terjadi pergerakan isi sejarah dari satu dokumen yang sama. PopState hanya berjalan ketika pergerakan sejarah dilakukan secara langsung atas permintaan pengguna, dengan kata lain penekanan tombol Back dan Forward atau history.back maupun history.go akan menjalankan PopState. PopState tidak akan dijalankan ketika history.pushState maupun history.replaceState dijalankan.

Ingat juga bahwa PopState hanya berjalan untuk satu dokumen yang sama. Hal ini berarti ketika pengguna berpindah dokumen (misal dari index.html ke about.html), maka PopState tidak akan dijalankan ketika pengguna menekan tombol Back. Ketika mengembangkan aplikasi dengan History API, kita hanya akan memiliki satu dokumen web saja, untuk menjaga keberjalnjutan sejarah ini. Karenanya, aplikasi yang dibangun dengan memanfaatkan History API sebagai pengendali dokumen dikenal dengan nama Single Page Application (SPA).

Penggunaan event PopState sendiri tidak berbeda dengan event lainnya:

1
2
3
4
5
6
window.addEventListener("popstate", function (event) {
    var stateData = event.state;

    // kembalikan halaman ke state sebelumnya,
    // sesuai dari data pada stateData
});

Beberapa hal yang perlu diperhatikan dari contoh penggunaan PopState di atas:

  1. PopState diikatkan pada objek window. Hal ini penting, karena PopState yang sifatnya global dan untuk seluruh halaman ini hanya dimiliki oleh window saja.
  2. Data yang kita akses pada event.state adalah data yang kita berikan untuk parameter pertama pada history.pushState atau history.replaceState. Isi dari event.state ini akan terus berubah setiap kali pengguna menekan tombol Back atau Forward.

Hal lain yang juga perlu diingat adalah bahwa PopState tidak dijalankan ketika kita pertama kali membuka sebuah dokumen HTML. Begitupun, PopState akan tetap dijalankan ketika kita kembali membuka halaman pertama melalui tombl back.

Kegunaan Praktis History API

Seperti yang telah dijelaskan pada bagian awal, fungsi utama dari History API adalah untuk memastikan sejarah dari penelusuran pengguna tersimpan dalam browser, bahkan ketika aplikasi kita mengandalkan AJAX sebagai metode navigasi utama. Dalam prakteknya, tentunya kita tidak dapat semata-mata langsung menggunakan History API pada setiap pemanggilan kode AJAX. Jika dilakukan perubahan URL dan sejarah secara manual pada setiap pemanggilan AJAX, kode yang kita hasilkan akan menjadi sulit dibaca dan dirawat.

Yang umumnya dilakukan untuk menjaga kerapihan kode adalah mengembangkan sebuah pustaka khusus untuk memetakan URL dengan kode kita. Pustaka yang mengatur pemetaan antara URL dengan kode dikenal dengan nama Routing Library. Kita akan mencoba mengimplementasikan routing library pada bagian berikutnya.

Catatan Kaki

[1]Data dari Mozilla menunjukkan bahwa 95% pengguna menggunakan tombol Back, dan 92% pengguna menggunakan Location Bar.
comments powered by Disqus
Kembali ke bertzzie.com