Memperbaiki 404 tersembunyi

Martin Splitt
Martin Splitt
X GitHub

Aplikasi 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 manipulasi histori sesi browser. Dengan cara ini, kita dapat memperbarui URL saat menampilkan halaman yang berbeda (biasanya disebut "tampilan" di Aplikasi Web Satu Halaman). Hal ini juga memastikan tombol kembali browser masih berfungsi seperti yang diharapkan.

Lihat Aplikasi Satu Halaman di codelab ini. Halaman ini menampilkan gambar kucing atau dan menyediakan link untuk beralih di antara kedua hewan tersebut. Sepertinya berfungsi dengan baik.

Mengungkap error 404 yang tersembunyi

Sayangnya, ada bug kecil di aplikasi. Mari kita lihat.

  • Untuk melihat pratinjau situs, tekan View App. Kemudian, tekan Fullscreen layar penuh.
  • Klik link Doggos. Perhatikan perubahan URL.
  • Muat ulang aplikasi.

Anda mendapatkan halaman dengan "Cannot GET /doggos" di dalamnya—404 palsu. Masalah ini "sulit dideteksi", karena aplikasi web tampaknya berfungsi dengan baik selama Anda hanya mengklik link di dalamnya. URL ini akan rusak saat digunakan di jendela browser baru atau saat halaman dimuat ulang. Masalahnya adalah server tidak tahu cara merespons permintaan untuk URL ini. Kode JavaScript di aplikasi web kita menggunakan History API untuk berpindah di antara URL tersebut, tetapi server tidak tahu apa yang harus dilakukan dengan URL tersebut. Setiap kali server tidak mengetahui tindakan yang harus dilakukan untuk URL yang diminta, server akan merespons dengan kode status HTTP 404. Dengan kode ini, server menyatakan bahwa server tidak 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, bukan konten yang mereka cari, seperti gambar.

Memperbaiki server

Project ini menggunakan server express.js yang ditulis dalam JavaScript. Mari kita perbaiki server, sehingga merespons dengan index.html dan aplikasi satu halaman akan menangani sisanya.

  • Klik Remix to Edit untuk membuat project dapat diedit.
  • Pilih file server.js.

File ini berisi kode server. Kode ini menyiapkan server express.js dan mengirimkan konten index.html. Penyiapan rute di baris 15 hanya menyajikan aplikasi web saat permintaan mengarah ke URL /. Server juga harus menyajikan URL lain yang telah kita buat. Mari kita ubah ini untuk menyajikan semua URL, sehingga juga berfungsi dengan URL tambahan di masa mendatang.

Untuk melakukannya, kita dapat mengubah kode mulai dari baris 15 menjadi seperti 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 View App. Kemudian, tekan Fullscreen layar penuh.

Memuat ulang dan membuka link di jendela samaran baru kini akan berfungsi seperti yang diharapkan.