Transisi Halaman yang Halus dan Menyenangkan dengan History Web API

() translation by (you can also view the original English article)

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.

Situs Quartz yang entah abstrak (entah bagus juga).

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 windows.history dan diikuti dengan salah satu API-nya; sebuah metode atau properti. Di panduan ini kita akan fokus pada metode pushState(), sehingga.

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

Seperti yang bisa kamu lihat dari intipan di atas, metode pushStates() memiliki tiga parameter.

Parameter pertama, state, akan menjadi objek yang mengandung data arbitrary. Data ini akan bisa diakses melalui window.history.state. Dalam aplikasi di dunia nyata, kita akan melewatkan data seperti page ID, URL, atau seri input yang didapat dari sebuah form.
Dua parameter terakhir adalah title dan
url. 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 pushState().

(function( $ ){

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

		event.preventDefault();

		window.history.pushState( { ID: 9 }, "About - Acme", "about/" );
	} );

})( jQuery );

Pada kode di atas, sebuah tautan terlampir dengan event click lalu meluncurkan metode pushState(). Saat kita menekan tautan, kita berharap kode untuk merubah judul dan URL dokumen.

Browsers Window — **Dari atas ke bawah:** Chrome, Frefox, Opera.

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

Namun, semua browser di contoh ini menolak parameter title. Kamu bisa melihat dari screenshot. Dokumennya tidak berubah menjadi About - Acme seperti yang dispesifikasikan. Lebih lanjut lagi, memanggil metode pushState() tidak akan memicu event popstate; 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 popstate secara berbeda saat memuat laman. Chrome (sebelum v34) dan Safari selalu mengeluarkan event popstate saat 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 pushState() 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 history dengan huruf "h" kecil, sementara History.js API diakses melalui History dengan 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).

1	window.History.pushState( {}, 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.

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 id dan class untuk beberapa elemen.

Muat jQuery dan History.js di dalam head dokumen. Kamu bisa memuatnya project dependency melalui Bower, atau sebuah CDN seperi CDNJS atau JSDelivr.
Bungkus header, konten dan footer dalam div dengan id wrap; <div id="wrap"></div>
Ada beberapa item navigasi di header situs dan footer. Tiap menu harus merujuk ke sebuah halaman. Pastikan halamannya tersedia dan memiliki konten.
Tiap tautan menu diberikan class page-link yang akan kita gunakan untuk memilih menu.
Terakhir, kita akan memberikan tiap tautan sebuah atribut title yang akan kita lewati pushStates() untuk menentukan judul dokumen.

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

<head>
	<script src="jquery.js"></script>
	<script src="history.js"></script>
</head>
<body>
	<div id="wrap">
		<header>
			<nav>
				<ul>
					<li><a class="page-link" href="./" title="Acme">Home</a></li>
					<li><a class="page-link" href="./about.html" title="About Us">About</a></li>
					<!-- more menu -->
				</ul>
			</nav>
		</header>
		<div>
			<!-- content is here -->
		</div>
		<footer>
			<nav>
				<ul>
					<li><a href="tos.html" class="page-link" title="Terms of Service">Terms</a></li>
					<!-- more menu -->
				</ul>
			</nav>
			<!-- this is the footer -->
		</footer>
	</div>
</body>

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

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

// 1.
var $wrap = $( "#wrap" );

// 2.
$wrap.on( "click", ".page-link", function( event ) {
	
	// 3.
	event.preventDefault();
	
	// 4.
	if ( window.location === this.href ) {
		return;
	}
	
	// 5.
	var pageTitle = ( this.title ) ? this.title : this.textContent;
		pageTitle = ( this.getAttribute( "rel" ) === "home" ) ? pageTitle : pageTitle + " â€” Acme";
	
	// 6.
	History.pushState( null, pageTitle, this.href );
} );

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

Di baris pertama, kita pilih elemen, <div id="wrap"></div>, yang membungkus seluruh konten situs kita.
Kita melampirkan event click. Tapi, seperti yang bisa kamu lihat di atas, kita melampirkannya ke elemen #wrap ketimbang melampirkannya langsung ke event dari tiap menu navigasi. Praktik ini di kenal sebagai event delegation. Dengan kata lain, elemen #wrap kita bertanggung jawab untuk mendengarkan event klik terhadap .page-link.
Kita juga telah menambahkan event.preventDefaut() sehingga pengguna tidak akan diarahkan ke halaman yang dipertanyakan.
Jika URL menu yang diklik sama dengan jendela saat ini, kita tidak perlu memproses operasi selanjutnya, karena itu tidak perlu.
variabel pageTitle mengandung format judul, yang didapat dari atribut judul tautan atau tautan teks. Tiap judul laman mengikuti konvensi {Page Title} - Acme, kecuali untuk beranda. "Acme" adalah nama perusahaan khayalan kita.
Terakhir, kita melewatkan pageTitle dan URL laman ke metode pushState() History.js

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

The browser window with updated URL and title — Judul dan URL halaman berubah

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.
History.Adapter.bind( window, "statechange", function() {
	
	// 2.
	var state = History.getState();
	
	// 3.
	$.get( state.url, function( res ) {

		// 4.
		$.each( $( res ), function( index, elem ) {
			if ( $wrap.selector !== "#" + elem.id ) {
				return;
			}
			$wrap.html( $( elem ).html() );
		} );

	} );
} );

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

Baris pertama dari kode akan mendengarkan ke perubahan riwayat yang terjadi melalui metode pushState() History.js dan menjalankan fungsi yang terlampir.
Kita mendapatkan perubahan keadaan, termasuk aneka data seperti URL, judul, dan id.
Melalui metode .get() jQuery kita mendapatkan konten dari URL yang ada.
Terakhir, kita menyaring elemen dengan sebuah id bernama wrap dari 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.

The browser window now with the updated content

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 slideInUp, seperti berikut:

@keyframes slideInUp {
	from {
		transform: translate3d(0, 10px, 0);
		opacity: 0;
	}
	to {
		transform: translate3d(0, 0, 0);
		opacity: 1;
	}
}

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.

.section {
	animation-duration: .38s;
	animation-fill-mode: both;
	animation-name: slideInUp;
}

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 head dokumen. Kodenya biasanya terlihat seperti berikut:

<script>
		(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
			(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
			m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
		})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');

		ga('create', 'UA-XXXXXX-XX', 'auto');
		ga('send', 'pageview');

	</script>

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 promise() jQuery setelah merubah konten halaman seperti berikut:

$wrap.html( $( elem ).html() )
		.promise()
			.done( function( res ) {

			// Make sure the new content is added, and the 'ga()' method is available.
			if ( typeof ga === "function" && res.length !== 0 ) {
				ga('set', {
					page: window.location.pathname,
					title: state.title
				});
				ga('send', 'pageview');
		}
	});

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.

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