Aplikasi Web Satu Halaman dapat menampilkan konten yang berbeda tanpa memuat halaman baru. Untuk melakukannya, mereka menggunakan pengendali klik pada link dan History API. History API memungkinkan Anda untuk memanipulasi histori sesi browser. Dengan cara ini kita dapat memperbarui URL saat menampilkan halaman yang berbeda (biasanya disebut "tampilan" di Aplikasi Web Satu Halaman). Tindakan ini juga memastikan tombol kembali browser masih berfungsi seperti yang diharapkan.
Lihat Aplikasi Web Satu Halaman dalam codelab ini. Dasbor menampilkan gambar kucing atau dan menyediakan link untuk beralih di antara kedua hewan tersebut. Tampaknya berhasil dengan baik!
Mengungkap 404 yang licik
Sayangnya ada bug halus di aplikasi. Mari kita lihat.
- Untuk melihat pratinjau situs, tekan Lihat Aplikasi. Lalu tekan Layar Penuh
. - Klik link Doggos. Perhatikan perubahan URL.
- Muat ulang aplikasi.
Anda mendapatkan halaman dengan "Cannot GET /doggos" di dalamnya—404 tersembunyi. URL ini "tersembunyi", karena aplikasi web tampaknya berfungsi dengan baik selama Anda hanya mengeklik tautan di dalamnya. URL akan terganggu saat menggunakan URL di jendela browser baru atau saat memuat ulang halaman. Masalahnya adalah server tidak mengetahui cara merespons permintaan untuk
URL ini. Kode JavaScript di aplikasi web kami menggunakan History API untuk
bernavigasi di antara URL tersebut, tetapi server tidak mengetahui apa yang harus dilakukan dengan URL tersebut.
Setiap kali server tidak mengetahui apa yang harus dilakukan untuk URL yang diminta, server akan merespons dengan kode status HTTP 404. Dengan kode ini, server mengatakan belum
menemukan apa pun untuk URL yang diminta.
Dalam kasus ini, mesin telusur tidak akan mengindeks URL karena pengguna akan mengklik hasil penelusuran dan menemukan pesan error, tetapi bukan konten yang mereka cari, seperti gambar.
Memperbaiki server
Project ini menggunakan server express.js yang ditulis dalam JavaScript. Mari kita perbaiki servernya, agar merespons dengan index.html dan aplikasi satu halaman akan menangani sisanya.
- Klik Remix untuk Mengedit agar project dapat diedit.
- Pilih file
server.js.
File ini berisi kode server. Editor ini 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 kita buat. Mari kita ubah ini untuk menayangkan semua URL, sehingga juga dapat berfungsi dengan URL tambahan di masa mendatang.
Untuk melakukannya, kita dapat mengubah kode yang dimulai pada 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 setiap URL tertentu.
- Untuk melihat pratinjau situs, tekan Lihat Aplikasi. Lalu tekan Layar Penuh
.
Memuat ulang dan membuka link di jendela samaran baru kini akan berfungsi seperti yang diharapkan.