Cara menggunakan WINDOW.HISTORY.PUSHSTATE pada JavaScript

Di panduan ini kita akan membangun sebauh situs dengan transisi halaman yang halus dan indah tanpa penyegaran halaman yang biasanya agresif. Bernavigasilah di demo halaman untuk melihat apa yang saya maksud.

Untuk meraih efek ini kita akan menggunakan History Web API. Singkatnya, API ini digunakan untuk merubah riwayat browser. Dia mengizinkan kita untuk memuat sebuah URL baru, mengganti judul halaman, dan pada saat yang sama merekamnya sebagai sebuah kunjungan ke browser tanpa benar-benar memuat lamannya.

Ini terdengar membingungkan, tapi dia membuka beberapa kesempatan untuk menyajikan transisi laman secara lebih halus dan memberimu sensasi cepat yang meningkatkan pengalaman pengguna. Kamu mungkin telah menyaksikan aksi History Web API di beberapa situs ada aplikasi seperti Trello, Quartz, dan Privacy.

Sebelum kita pergi lebih jauh, mari lihat ke API yang akan kita luncurkan di situs.

History Web API Secara Singkat

Untuk mengakses Web History API, pertama kita menulis 128 dan diikuti dengan salah satu API-nya; atau . Di panduan ini kita akan fokus pada metode 129, sehingga.

1window.history.pushState( state, title, url );

Seperti yang bisa kamu lihat dari intipan di atas, metode 130 memiliki tiga parameter.

1. Parameter pertama, 131, akan menjadi objek yang mengandung data arbitrary. Data ini akan bisa diakses melalui 132. Dalam aplikasi di dunia nyata, kita akan melewatkan data seperti page ID, URL, atau seri input yang didapat dari sebuah form.
2. Dua parameter terakhir adalah 133dan 
3. 134. Keduanya merubah URL dan judul dokumen di browser, dan juga merekam mereka sebagai entri baru di riwayat browser.

Mari bedah contoh berikut untuk memahami lebih baik cara kerja metode 129.

1(function( $ ){ 23 $( "a" ).on( "click", function( event ) { 45 event.preventDefault(); window.history.pushState( state, title, url ); 0window.history.pushState( state, title, url ); 1window.history.pushState( state, title, url ); 2window.history.pushState( state, title, url ); 3window.history.pushState( state, title, url ); 4window.history.pushState( state, title, url ); 5window.history.pushState( state, title, url ); 6window.history.pushState( state, title, url ); 7

Pada kode di atas, sebuah tautan terlampir dengan event 136lalu meluncurkan metode129. Saat kita menekan tautan, kita berharap kode untuk merubah judul dan URL dokumen.

DAn dia melakukannya; screenshot menunjukkan URL-nya berubah ke "about/" seperti yang didefinisikan metode 129. Dan karena motede130 membuat rekaman baru di riwayat browser, kita bisa kembali ke halaman sebelumnya melalui tombol Back browser.

Namun, semua browser di contoh ini menolak parameter 133. Kamu bisa melihat dari screenshot. Dokumennya tidak berubah menjadi About - Acme seperti yang dispesifikasikan. Lebih lanjut lagi, memanggil metode 129 tidak akan memicu event 142; sebuah event yang dikirim tiap kali riwayat berubah-terkadang kita butuh! Ada beberapa perbedaan cara browser menangani event ini, seperi yang dinyatakan di MDN.

"Broswer cenderung untuk menangani event 143secara berbeda saat memuat laman. Chrome (sebelum v34) dan Safari selalu mengeluarkan event 143saat memuat laman namun Firefox tidak.

Kita memerlukan sebuah pustaka sebagai posisi mundur untuk membuat History Web API bekerja secara konsisten di antara browser tanpa rintangan.

Berkenalan Dengan History.js

Semenjak metode129 tidak bekerja sesuai potensinya, di panduan ini kita akan menggunakan History.js Seperti yang namanya implikasikan, pustaka JavaScript ini adalah sebuah polyfill, mereplika History API yang bekerja di browser berbeda. Sehingga juga mengekspos sekumpulan metode yang dimiliki API bawaan, meskipun dengan beberapa perbedaan.

Seperti yang disebutkan sebelumnya. API bawaan browser dipanggi melalui jendela 146dengan huruf "h" kecil, sementara History.js API diakses melalui 147dengan huruf "H" besar. Memberikan contoh sebelumnya dan berasumsi bahwa kita memiliki berkas history.js termuat. Kita bisa merevisi kodenya agar sesuai (perhatikan huruf "H" besar).

1window.history.pushState( state, title, url ); 9

Saya harap penjelasan singkatnya mudah dipahami. Jika tidak, berikut adalah beberapa referensi lebih lanjut jika kamu ingin mempelajari lebih mengenai Web History API.

• History API
• Memanipulasi Riwayat Browser
• Pengatar ke HTML5 History

Membangun Situs Statis Kita

Di bagian ini kita tidak akan membahas tiap tahap yang dibutuhkan untuk membangun sebuah situs statis secara detil. Situs kita akan sederhana seperti yang tampakkan screenshot berikut:

Kamu tidak perlu membuat sebuah situs yang terlihat persis sama; kamu bebas menambahkan konten apapun dan membuat halaman sebanyak yang kamu ingin. Namun, ada beberapa poin penting yang kamu perlu pertimbangkan terkait struktur HTML dan penggunaan atribut 148 dan 149untuk beberapa elemen.

1. Muat jQuery dan History.js di dalam 150dokumen. Kamu bisa memuatnya project dependency melalui Bower, atau sebuah CDN seperi CDNJS atau JSDelivr.
2. Bungkus header, konten dan footer dalam 151dengan id 152; 153
3. Ada beberapa item navigasi di header situs dan footer. Tiap menu harus merujuk ke sebuah halaman. Pastikan halamannya tersedia dan memiliki konten.
4. Tiap tautan menu diberikan class 154 yang akan kita gunakan untuk memilih menu.
5. Terakhir, kita akan memberikan tiap tautan sebuah atribut 133yang akan kita lewati 130 untuk menentukan judul dokumen.

Telah melakukannya semua, markup HTML kita akan tampak seperti berikut:

111213315417519window.history.pushState( state, title, url ); 0(function( $ ){ 1window.history.pushState( state, title, url ); 1(function( $ ){ 3window.history.pushState( state, title, url ); 3(function( $ ){ 5window.history.pushState( state, title, url ); 5(function( $ ){ 7window.history.pushState( state, title, url ); 6(function( $ ){ 920212223242526272829303132333435363738(function( $ ){ 5 $( "a" ).on( "click", function( event ) { 0(function( $ ){ 7 $( "a" ).on( "click", function( event ) { 2 $( "a" ).on( "click", function( event ) { 3 $( "a" ).on( "click", function( event ) { 423 $( "a" ).on( "click", function( event ) { 625 $( "a" ).on( "click", function( event ) { 8274041424344454647

Ketika kamu telah selesai membangun situs statismu kita bisa pindah ke bagian utama dari panduan ini.

Menerapkan History Web API

Sebelum kita mulai menulis kode apapun, kita perlu membuat sebuah berkas baru untuk menyimpan JavaScript; kita akan menamainya script.js dan memuat berkasnya ke dalam dokumen sebelum tag penutup 157.

Mari tambahkan pecahan pertama dari kode untuk mengubah judul dokumen dan URL saat menekan navigasi menu:

1492513454556window.history.pushState( state, title, url ); 058window.history.pushState( state, title, url ); 1 event.preventDefault(); 0window.history.pushState( state, title, url ); 3 event.preventDefault(); 2window.history.pushState( state, title, url ); 558window.history.pushState( state, title, url ); 6 event.preventDefault(); 620 event.preventDefault(); 822window.history.pushState( state, title, url ); 0024window.history.pushState( state, title, url ); 02265828window.history.pushState( state, title, url ); 0630window.history.pushState( state, title, url ); 0832window.history.pushState( state, title, url ); 10345836window.history.pushState( state, title, url ); 1438window.history.pushState( state, title, url ); 16 $( "a" ).on( "click", function( event ) { 0window.history.pushState( state, title, url ); 18

Saya telah membagi kodenya ke beberapa bagian. Ini akan membuatnya lebih mudah bagimu untuk menunjuk kode dengan referensi berikut:

1. Di baris pertama, kita pilih elemen, 153, yang membungkus seluruh konten situs kita.
2. Kita melampirkan event click. Tapi, seperti yang bisa kamu lihat di atas, kita melampirkannya ke elemen 159ketimbang melampirkannya langsung ke event dari tiap menu navigasi. Praktik ini di kenal sebagai event delegation. Dengan kata lain, elemen 159 kita bertanggung jawab untuk mendengarkan event klik terhadap 161.
3. Kita juga telah menambahkan 162 sehingga pengguna tidak akan diarahkan ke halaman yang dipertanyakan.
4. Jika URL menu yang diklik sama dengan jendela saat ini, kita tidak perlu memproses operasi selanjutnya, karena itu tidak perlu.
5. variabel 163mengandung format judul, yang didapat dari atribut judul tautan atau tautan teks. Tiap judul laman mengikuti konvensi 164, kecuali untuk beranda. "Acme" adalah nama perusahaan khayalan kita.
6. Terakhir, kita melewatkan 163dan URL laman ke metode 129 History.js

Pada titik ini, ketika kita menekan menu navigasi, judul dan URL akan berubah sesuai yang ditunjukkan di bawah:

Bahkan jika konten halamannya tetap sama! Dia tidak diperbaharui agar cocok dengan judul dan URL baru.

Konten

Kita perlu menambah baris kode berikut untuk benar-beanr mengganti konten halaman.

1492window.history.pushState( state, title, url ); 223584window.history.pushState( state, title, url ); 265window.history.pushState( state, title, url ); 28window.history.pushState( state, title, url ); 058window.history.pushState( state, title, url ); 1 event.preventDefault(); 0window.history.pushState( state, title, url ); 3window.history.pushState( state, title, url ); 34window.history.pushState( state, title, url ); 5window.history.pushState( state, title, url ); 6window.history.pushState( state, title, url ); 3720window.history.pushState( state, title, url ); 3922window.history.pushState( state, title, url ); 4124window.history.pushState( state, title, url ); 4326window.history.pushState( state, title, url ); 4528window.history.pushState( state, title, url ); 4730window.history.pushState( state, title, url ); 493234window.history.pushState( state, title, url ); 436window.history.pushState( state, title, url ); 18

Sekali lagi, kode di sini di bagi ke beberapa bagian.

1. Baris pertama dari kode akan mendengarkan ke perubahan riwayat yang terjadi melalui metode 129 History.js dan menjalankan fungsi yang terlampir.
2. Kita mendapatkan perubahan keadaan, termasuk aneka data seperti URL, judul, dan id.
3. Melalui metode 168 jQuery kita mendapatkan konten dari URL yang ada.
4. Terakhir, kita menyaring elemen dengan sebuah 148 bernama 152dari data yang didapat, dan akhirnya mengganti konten halaman sekarang dengannya.

Setelah ditambahkan, kontennya harusnya sekarang diperbaharui saat kita menekan menu navigasi. Seperti yang disebutkan, kita juga bisa mengakses halaman yang terkunjungi kembali melalui tombol Back dan Forward browser.

Situs kita dapat ditampilkan pada titik ini. Namun, kita ingin melangkah lebih jauh dengan menambahkan sedikit animasi untuk membuat halannya jadi hidup dan akhirnya situs kita terasa lebih menarik.

Menambahkan Animasi dan Transisi

Animasi pada situasi ini cukup sederhana, sehingga kita menulisnya dari awal daripada memuat animasi melalui pustakan seperi Animate.css, Motion UI dari ZURB, atau Effeckt.css. Kita akan menamakannya 171, seperti berikut:

1window.history.pushState( state, title, url ); 562window.history.pushState( state, title, url ); 583window.history.pushState( state, title, url ); 604window.history.pushState( state, title, url ); 625window.history.pushState( state, title, url ); 02window.history.pushState( state, title, url ); 0window.history.pushState( state, title, url ); 66window.history.pushState( state, title, url ); 1window.history.pushState( state, title, url ); 68window.history.pushState( state, title, url ); 3window.history.pushState( state, title, url ); 70window.history.pushState( state, title, url ); 5window.history.pushState( state, title, url ); 02window.history.pushState( state, title, url ); 6window.history.pushState( state, title, url ); 74

Seperti yang diimplikasikan namanya, animasinya akan menggeser konten halaman dari bawah ke atas dengan elemen opacity. Terapkan animasinya ke elemen yang membungkus konten utama halaman seperti berikut.

1window.history.pushState( state, title, url ); 762window.history.pushState( state, title, url ); 783window.history.pushState( state, title, url ); 804window.history.pushState( state, title, url ); 825window.history.pushState( state, title, url ); 74

Transisi dari satu halaman ke halaman lainnya akan terasa lebih harus saat animasinya diterapkan. Di sini, kamu bisa berhenti dan mengganpnya kerja seharian! Situs kita telah selesai dan kita siap meluncurkannya ke dunia untuk dilihat.

Namun, adalah satu hal lagi yang perlu kamu pertimbangkan, terutama bagi yang ingin mengawasi jumlah pengunjung dan perilaku pengunjung situsmu.

Kita perlu menambahkan pelacakkan Google Analytics ke tiap page view.

Google Analytics

Semenjak situs kita akan dimuat secara asinkron (kecuali untuk halaman yang dimuat di awal) melacak angka page view juga harus dilakukan secara asinkron.

Untuk memulainya, pastikan kamu memiliki standar Google Analytics terpasang di 150dokumen. Kodenya biasanya terlihat seperti berikut:

1window.history.pushState( state, title, url ); 862window.history.pushState( state, title, url ); 883window.history.pushState( state, title, url ); 904window.history.pushState( state, title, url ); 925window.history.pushState( state, title, url ); 94window.history.pushState( state, title, url ); 0window.history.pushState( state, title, url ); 1window.history.pushState( state, title, url ); 97window.history.pushState( state, title, url ); 3window.history.pushState( state, title, url ); 99window.history.pushState( state, title, url ); 5window.history.pushState( state, title, url ); 6102

Lalu kita perlu mengatur kode JavaScript kita untuk memasukkan kode pelacakkan Google Analytics sehingga tiap halaman yang dimuat secara asinkron akan dihitung sebagai page view juga.

Kita memiliki beberapa pilihan. Pertama, kita bisa menghitung ketika pengguna menekan tautan navigasi, atau ketika mengganti judul dan URL halaman, atau ketika konten dari halaman telah sukses dimuat.

Kita akan memilih yang terakhir, yang tampak paling otentik, dan untuk melakukannya kita akan menggunakan metode 173 jQuery setelah merubah konten halaman seperti berikut:

11042106310845111window.history.pushState( state, title, url ); 0113window.history.pushState( state, title, url ); 1115window.history.pushState( state, title, url ); 3117window.history.pushState( state, title, url ); 5119window.history.pushState( state, title, url ); 6121201232212524127

Begitulah, sekarang kita telah membuat page view terhitung di Google Analytics.

Kesimpulan

Di Panduan ini kita telah meningkatkan sebuah situs statis sederhana menggunakan Web History API untuk membuat transisi halaman yang halus, memuatnya lebih cepat, dan secara keseluruhan membawa pengalaman yang lebh baik pada pengguna. Di akhir panduan ini, kita juga telah mengimplementasikan Google Analytics untuk merekam page view secara asinkron. Ditambah lagi, situs kita crawl-able secara sempurna oleh mesin pencari. Karena seperti yang disebutkan sebelumnya hanya situs HTML sederhana.

Ini adalah panduan yang berisi, menjelaskan banyak hal seperti animasi CSS, jQuery Ajax, dan jQuery Promise. Berikut adalah referensi berguna untuk kamu lihat, untuk memperkuat yang telah kamu pelajari.

• Padnaun Pemula ke Animasi CSS
• Tips Singkat: JavaScript Event Delegation dalam 4 Menit
• AJAX untuk Front-End Designers
• Wrangle Async Tasks dengan jQuery Promises
• Demystifying Google Analytics

Terakhir, jangan lupa untuk mengunjungi situs demo dari panduan ini dan juga sumber kode-nya di repositori.