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

1

1

1

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

Seperti yang bisa kamu lihat dari intipan di atas, metode

1

1. Parameter pertama,

   1

   31, akan menjadi objek yang mengandung data arbitrary. Data ini akan bisa diakses melalui

   1

   32. 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

   1

   33dan 

3. 1

   34. 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

1

1

(function( $ ){

2

3

  $( "a" ).on( "click", function( event ) {

4

5

		event.preventDefault();

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

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

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

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

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

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

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

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

Pada kode di atas, sebuah tautan terlampir dengan event

1

1

DAn dia melakukannya; screenshot menunjukkan URL-nya berubah ke "about/" seperti yang didefinisikan metode

1

1

Namun, semua browser di contoh ini menolak parameter

1

1

1

"Broswer cenderung untuk menangani event

1

43secara berbeda saat memuat laman. Chrome (sebelum v34) dan Safari selalu mengeluarkan event

1

43saat 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 metode

1

Seperti yang disebutkan sebelumnya. API bawaan browser dipanggi melalui jendela

1

1

1

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

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

1

1

1. Muat jQuery dan History.js di dalam

   1

   50dokumen. Kamu bisa memuatnya project dependency melalui Bower, atau sebuah CDN seperi CDNJS atau JSDelivr.
2. Bungkus header, konten dan footer dalam

   1

   51dengan id

   1

   52;

   1

   53
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

   1

   54 yang akan kita gunakan untuk memilih menu.
5. Terakhir, kita akan memberikan tiap tautan sebuah atribut

   1

   33yang akan kita lewati

   1

   30 untuk menentukan judul dokumen.

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

1

1

2

1

3

1

4

1

5

1

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

(function( $ ){

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

(function( $ ){

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

(function( $ ){

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

(function( $ ){

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

(function( $ ){

2

2

2

2

2

2

2

2

2

2

3

3

3

3

3

3

3

3

3

(function( $ ){

  $( "a" ).on( "click", function( event ) {

(function( $ ){

  $( "a" ).on( "click", function( event ) {

  $( "a" ).on( "click", function( event ) {

  $( "a" ).on( "click", function( event ) {

2

  $( "a" ).on( "click", function( event ) {

2

  $( "a" ).on( "click", function( event ) {

2

4

4

4

4

4

4

4

4

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

1

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

1

4

2

5

3

4

5

5

5

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

5

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

		event.preventDefault();

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

		event.preventDefault();

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

5

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

		event.preventDefault();

2

		event.preventDefault();

2

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

2

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

2

5

2

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

3

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

3

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

3

5

3

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

3

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

  $( "a" ).on( "click", function( event ) {

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

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,

   1

   53, yang membungkus seluruh konten situs kita.
2. Kita melampirkan event click. Tapi, seperti yang bisa kamu lihat di atas, kita melampirkannya ke elemen

   1

   59ketimbang melampirkannya langsung ke event dari tiap menu navigasi. Praktik ini di kenal sebagai event delegation. Dengan kata lain, elemen

   1

   59 kita bertanggung jawab untuk mendengarkan event klik terhadap

   1

   61.
3. Kita juga telah menambahkan

   1

   62 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

   1

   63mengandung format judul, yang didapat dari atribut judul tautan atau tautan teks. Tiap judul laman mengikuti konvensi

   1

   64, kecuali untuk beranda. "Acme" adalah nama perusahaan khayalan kita.
6. Terakhir, kita melewatkan

   1

   63dan URL laman ke metode

   1

   29 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.

1

4

2

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

3

5

4

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

5

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

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

5

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

		event.preventDefault();

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

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

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

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

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

2

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

2

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

2

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

2

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

2

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

3

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

3

3

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

3

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

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

1. Baris pertama dari kode akan mendengarkan ke perubahan riwayat yang terjadi melalui metode

   1

   29 History.js dan menjalankan fungsi yang terlampir.
2. Kita mendapatkan perubahan keadaan, termasuk aneka data seperti URL, judul, dan id.
3. Melalui metode

   1

   68 jQuery kita mendapatkan konten dari URL yang ada.
4. Terakhir, kita menyaring elemen dengan sebuah

   1

   48 bernama

   1

   52dari 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

1

1

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

2

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

3

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

4

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

5

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

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

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

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

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

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

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

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

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

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

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

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.

1

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

2

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

3

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

4

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

5

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

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

1

1

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

2

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

3

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

4

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

5

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

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

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

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

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

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

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

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

1

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

1

1

1

2

1

3

1

4

5

1

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

1

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

1

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

1

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

1

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

1

2

1

2

1

2

1

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.