Navigation API chính thức đạt chuẩn Baseline: Giải pháp thay thế hoàn hảo cho History API

Navigation API, một giải pháp hiện đại thay thế cho History API lâu đời, đã đạt trạng thái Baseline Newly Available kể từ tháng 1 năm 2026. Hiện tại, API này đã được hỗ trợ trên các trình duyệt chính bao gồm Chrome, Edge, Firefox 147 và Safari 26.2. Navigation API cung cấp một giao diện tập trung, được xây dựng chuyên biệt để quản lý điều hướng phía client trong các ứng dụng đơn trang (SPA), giải quyết các vấn đề thiết kế cơ bản đã gây khó khăn cho các nhà phát triển web trong hơn một thập kỷ qua.

Những hạn chế của History API

History API, vốn là cơ chế chính cho định tuyến SPA kể từ khi ra mắt, có những thiếu sót đã được ghi nhận rõ ràng. Nó không thể phát hiện tất cả các loại tác nhân kích hoạt điều hướng, không cung cấp cách đọc toàn bộ ngăn xếp lịch sử hay chỉnh sửa các mục không phải là mục hiện tại. Hơn nữa, sự kiện popstate hoạt động không nhất quán, thường không kích hoạt khi pushState hoặc replaceState được gọi theo chương trình. Theo tài liệu của Chrome for Developers, Ian Hickson, cựu biên tập viên đặc tả HTML, từng gọi pushState() là "sai lầm yêu thích" của ông. Navigation API được thiết kế từ đầu như một sự thay thế hoàn toàn chứ không phải là một bản vá lỗi tăng cường.

Tính năng nổi bật của Navigation API

Trọng tâm của API mới là sự kiện navigate, kích hoạt cho mọi loại điều hướng, dù đó là nhấp chuột vào liên kết, gửi biểu mẫu, nhấn nút quay lại/tiếp theo hay các lệnh gọi chương trình. Điều này thay thế cho cách tiếp cận phân mảnh trước đây, nơi các nhà phát triển phải thiết lập trình nghe sự kiện click trên các liên kết, xử lý popstate riêng biệt và tính toán nhiều trường hợp ngoại lệ.

Phương thức event.intercept() tự động xử lý việc cập nhật URL, quản lý ngăn xếp lịch sử và các nguyên lý khả dụng truy cập như quản lý tiêu điểm, giúp loại bỏ đáng kể lượng mã mẫu (boilerplate). API này cũng cung cấp tính năng khôi phục cuộn trang tích hợp, tín hiệu hủy bỏ (abort signals) cho các điều hướng bị hủy và các sự kiện navigatesuccess/navigateerror để xử lý lỗi tập trung.

Đánh giá từ chuyên gia

Jake Archibald đã nhấn mạnh tầm quan trọng của bản phát hành này: "Web giờ đây có định tuyến cấp thấp hợp lý cho các điều hướng." Trong một video hướng dẫn, ông giải thích rằng API này chia việc chặn điều hướng thành hai phần: một precommitHandler cho các tác vụ cần xảy ra trước khi URL thay đổi (như lấy dữ liệu trong khi nội dung cũ vẫn hiển thị) và một handler để chuyển đổi nội dung sau khi URL cập nhật. Tuy nhiên, ông lưu ý rằng bản triển khai của Safari hiện tại chưa hỗ trợ precommitHandler. "Hy vọng Safari sẽ sớm thêm hỗ trợ cho trình xử lý precommit," Archibald nói thêm.

Wael Fadl Allah, một nhà phát triển đã thử nghiệm API này, mô tả nó là "một bước ngoặt trong việc xây dựng SPA". Ông đánh giá cao khả năng kiểm soát định tuyến thống nhất từ sự kiện navigate, các phương thức đáng tin cậy như navigation.back(), forward(), traverseTo(key), reload(), và khả năng lưu trữ trạng thái tích hợp với khôi phục cuộn trang phù hợp.

Quản lý lịch sử trình duyệt tốt hơn

Navigation API cũng mang lại những cải tiến trong việc quản lý các mục lịch sử. Các nhà phát triển có thể kiểm tra danh sách đầy đủ các mục lịch sử cùng nguồn gốc (same-origin) thông qua navigation.entries(), truy cập trạng thái có cấu trúc trên bất kỳ mục nào bằng .getState(), và điều hướng trực tiếp đến các mục cụ thể bằng traverseTo(key). Đây là một cải tiến đáng kể so với History API, vốn không cung cấp cách nào để kiểm tra ngăn xếp lịch sử hay điều hướng đến các mục tùy ý.

Đối với các nhà phát triển muốn chuyển đổi từ History API, kho lưu trữ WICG Navigation API trên GitHub bao gồm hướng dẫn chuyển đổi chuyên biệt. Tài liệu MDN Web Docs cũng cung cấp tài liệu tham khảo và ví dụ toàn diện.

Cần lưu ý rằng các bộ định tuyến SPA phổ biến như React Router và TanStack Router đang có các thảo luận mở về việc áp dụng Navigation API làm nền tảng cho logic định tuyến của họ, mặc dù chưa có bản tích hợp nào được phát hành tại thời điểm viết bài này. Navigation API hoạt động ở mức thấp hơn các bộ định tuyến khung này, cung cấp các nguyên thủy nền tảng mà các abstraction cấp cao hơn có thể xây dựng dựa trên đó thay vì cạnh tranh trực tiếp.