Navigation API peramban modern

API Navigasi adalah pengganti API Riwayat yang lebih baru dan lebih canggih. API ini memperlakukan navigasi sebagai objek utama yang dapat Anda cegat, batalkan, dan tunggu—lebih mendekati cara SPA menangani perutean pada tahun 2024.

window.navigation menyediakan daftar entri, entri saat ini, dan peristiwa navigasi. navigation.entries() mengembalikan setiap entri dalam riwayat saat ini; navigation.currentEntry adalah entri aktif. Bandingkan dengan panjang API Riwayat yang buram dan status yang tidak dapat dibaca.

Dengarkan navigation.addEventListener("navigate", handler) untuk mencegat setiap navigasi dalam dokumen yang sama—klik tautan, pengiriman formulir, navigasi kembali/maju, dan navigasi terprogram. Satu kait menggantikan kumpulan pencegatan klik, popstate, dan pendengar pengiriman formulir.

Memanggil e.intercept({ handler }) mengambil alih navigasi. Penangan mengembalikan nilai yang dapat ditunggu; selama masih menunggu, navigasi berstatus "sedang berlangsung" dan URL sudah diperbarui. Cara ini menyatukan perlombaan historis antara perubahan URL dan penampilan tampilan.

Tidak semua navigasi dapat dicegat (lintas asal, unduhan). Periksa e.canIntercept sebelum memanggil intercept. Penjagaan defensif ini hanya membutuhkan satu baris dan membedakan navigasi SPA dari keberangkatan lintas asal yang sebenarnya.

navigation.navigate(url, options) memicu navigasi secara terprogram, setara dengan klik. Objek yang dikembalikan memiliki promise committed dan finished, sehingga Anda dapat menunggu perubahan URL atau penyelesaian penuh penangan.

Setiap entri navigasi memiliki key yang stabil (di seluruh pemuatan ulang) dan id yang berlaku per sesi. Gunakan key untuk status persisten (posisi gulir yang disimpan, draf formulir) dan id untuk status sementara. Satu-satunya status API Riwayat hanyalah objek data buram.

navigation.back() dan navigation.forward() adalah pembungkus praktis untuk traverseTo. Keduanya mengembalikan pasangan hasil yang dapat ditunggu yang sama, { committed, finished }, sehingga Anda dapat menunggu navigasi kembali selesai sebelum melakukan pekerjaan lanjutan.

Jika pengguna mengeklik tautan kedua saat tautan pertama masih dirender, navigasi yang sedang berlangsung dapat dibatalkan. Penangan menerima AbortSignal melalui e.signal; teruskan ke panggilan pengambilan data agar pekerjaan yang sudah tidak relevan dibatalkan saat navigasi baru dimulai.

API Riwayat memang berfungsi, tetapi penggunaannya kurang praktis: perubahan status dan perenderan tampilan tidak saling terhubung, penanganan klik harus dilakukan secara manual, koordinasi banyak pendengar rentan bermasalah, dan pemulihan posisi gulir tidak lengkap. API Navigasi sejak awal dirancang untuk kebutuhan SPA dan mengatasi semua masalah tersebut.

Chrome dan Edge mendukung API Navigasi. Safari dan Firefox masih tertinggal (per awal 2026); kirim kode yang mendeteksi fitur ("navigation" in window) dan gunakan cadangan API Riwayat + peristiwa perubahan status jika fitur tersebut tidak tersedia. Kerangka kerja seperti SvelteKit dan TanStack sudah membungkus pendeteksian ini.

Untuk proyek baru yang menargetkan audiens yang terutama menggunakan Chromium, adopsi sekarang dan terima penggunaan cadangan API Riwayat. Untuk situs publik dengan audiens luas, tunggu dukungan Safari/Firefox (atau gunakan pustaka perutean yang mengabstraksikan keduanya). API yang lebih sederhana ini layak ditunggu.

Apa keunggulan utama peristiwa navigasi pada API Navigasi dibandingkan kombinasi perubahan status pada API Riwayat dan pencegatan klik manual?

API Navigasi menyatukan navigasi SPA di bawah satu peristiwa navigasi dengan semantik intercept/pembatalan, kunci per entry yang stabil, dan penantian penangan asinkron. API ini menggantikan rangkaian tambal sulam API Riwayat + perubahan status + pencegatan klik. API ini didukung di peramban Chromium saat ini; lakukan pendeteksian fitur dan gunakan cadangan API Riwayat untuk kode lintas peramban sampai Safari dan Firefox menyusul.