Aplikasi Web Satu Halaman dapat menampilkan konten yang berbeda tanpa memuat halaman baru. Yang akan dilakukan jadi, mereka menggunakan handler klik pada tautan dan History API. Sejarah API memungkinkan Anda memanipulasi histori sesi browser. Dengan cara ini kita dapat memperbarui URL saat menampilkan halaman yang berbeda (biasanya disebut "tampilan" di Aplikasi Web Satu Halaman). Ini juga memastikan tombol kembali di browser masih bekerja seperti yang diharapkan.
Lihat Aplikasi Web Satu Halaman di codelab ini. Menampilkan kucing atau {i>dog<i} gambar dan menyediakan tautan untuk beralih antara kedua hewan tersebut. Sepertinya berhasil baik!
Mengungkap 404 yang licik
Sayangnya ada bug halus dalam aplikasi. Mari kita lihat!
- Untuk melihat pratinjau situs, tekan Lihat Aplikasi. Lalu tekan
Layar penuh
. - Klik link Doggos. Perhatikan bagaimana URL berubah.
- Muat ulang aplikasi.
Anda mendapatkan halaman yang berisi "Cannot GET /doggos" itu—404 yang licik. Ini "licik",
karena aplikasi web tampaknya bekerja dengan
baik selama Anda hanya mengeklik tautan di
anotasi. URL akan rusak ketika menggunakan URL di jendela {i>browser<i} baru atau ketika menyegarkan
kami. Masalahnya adalah server tidak tahu
bagaimana menanggapi permintaan untuk
URL tersebut. Kode JavaScript di aplikasi web kita
menggunakan History API untuk
menavigasi di antara mereka, tetapi server tidak tahu apa yang harus dilakukan dengan mereka.
Setiap kali server tidak tahu apa yang harus dilakukan untuk URL yang diminta, server akan merespons
dengan kode status HTTP 404. Dengan kode ini, server menyatakan belum menemukan
apa pun untuk URL yang diminta.
Dalam hal ini, mesin telusur tidak akan mengindeks URL karena pengguna akan mengklik hasil penelusuran dan menemukan pesan {i>error<i}, tetapi bukan kontennya dicari, misalnya gambar-gambar anjingnya.
Memperbaiki server
Project ini menggunakan server express.js yang ditulis dalam pada JavaScript. Mari kita perbaiki server agar merespons dengan index.html dan satu aplikasi halaman akan menangani sisanya.
- Klik Remix to Edit agar project dapat diedit.
- Pilih file
server.js.
File ini berisi kode server. Ia menyiapkan server express.js dan mengirim
konten index.html. Penyiapan rute di baris 15 hanya menayangkan aplikasi web
saat permintaan mengarah ke URL /. Server juga harus menayangkan
URL lain yang telah
buat. Mari kita ubah ini untuk menayangkan semua URL, sehingga juga berfungsi dengan
URL tambahan di masa mendatang.
Untuk melakukannya, kita dapat mengubah kode mulai dari baris 15 menjadi ini:
app.get('/*', function(request, response) {
response.sendFile(__dirname + '/views/index.html');
});
/* cocok dengan URL apa pun dan server kini merespons dengan aplikasi web di
index.html untuk URL tertentu.
- Untuk melihat pratinjau situs, tekan Lihat Aplikasi. Lalu tekan
Layar penuh
.
Menyegarkan dan membuka tautan di jendela penyamaran baru kini akan berfungsi sebagai yang diharapkan.