Chrome 105 giới thiệu 2 phương thức mới trên NavigateEvent của API Điều hướng (được ra mắt trong phiên bản 102) để cải thiện các phương thức được cho là có vấn đề trong thực tế. intercept() (cho phép nhà phát triển kiểm soát trạng thái sau khi điều hướng) thay thế transitionWhile() (có vẻ khó sử dụng). Phương thức scroll() cuộn đến một quảng cáo cố định được chỉ định trong URL, thay thế cho restoreScroll() (không hoạt động trong một số loại thao tác điều hướng).
Trong bài viết này, tôi sẽ giải thích vấn đề của cả hai định dạng và cách các phương pháp mới khắc phục những vấn đề đó.
NavigateEvent.transitionWhile()
Phương thức NavigateEvent.trasitionWhile(), ra mắt cùng với API Điều hướng trong Chrome 102, chặn hoạt động điều hướng đến các lượt chuyển đổi phía máy khách trong các ứng dụng trang đơn. Đối số đầu tiên của lớp này là một lời hứa báo hiệu cho trình duyệt và các phần khác của ứng dụng web rằng ứng dụng đã hoàn tất.
Cách này có hiệu quả kém trong thực tế. Hãy xem xét mẫu lập trình phổ biến sau:
event.transitionWhile((async () => {
doSyncStuff();
await doAsyncStuff();
})());
Chức năng này tương đương với mã dưới đây. Điều này khiến một số phần điều hướng chạy trước khi API biết rằng nhà phát triển có ý định chặn điều hướng.
doSyncStuff();
event.transitionWhile((async () => {
await doAsyncStuff();
})());
Một ví dụ về điều này có thể gây rắc rối cho ứng dụng là logic khôi phục thao tác cuộn, trong đó ứng dụng ghi lại vị trí cuộn sau khi thay đổi DOM, thay vì trước đó.
Những điểm thay đổi
Để thay thế transitionWhile(), thông số kỹ thuật hiện tại sẽ ra mắt NavigateEvent.intercept(). Phương thức mới này sẽ sử dụng một trình xử lý cùng với các thuộc tính focusReset và scrollRestoration được transitionWhile() hỗ trợ. Trình xử lý mới luôn chạy sau khi các thay đổi về thao tác điều hướng được xác nhận và các nội dung như vị trí cuộn đã được nắm bắt nhằm tránh các sự cố xảy ra với transitionWhile().
Phương thức transitionWhile() vẫn còn hoạt động nhưng không được dùng nữa và sẽ bị xoá trong Chrome 108.
Dùng phương thức chặn()
NavigateEvent.intercept() có các hạn chế tương tự như transitionWhile(), vì trong đó không thể gọi được trên mọi sự kiện điều hướng. Hoạt động điều hướng trên nhiều nguồn gốc không bị giao cắt và hoạt động truyền tải trên nhiều tài liệu cũng không thể bị chặn. Thao tác này sẽ gửi một DOMException thuộc loại "SecurityError".
Để sử dụng intercept(), bạn chỉ cần truyền trình xử lý tuỳ chỉnh khi gọi trình xử lý đó.
navigation.addEventListener("navigate", event => {
event.intercept({
async handler() {
doSyncStuff();
await doAsyncStuff();
}
});
});
NavigateEvent.scroll()
Một thao tác điều hướng như từ đầu trang đến điểm neo (gọi là di chuyển từ /a sang /a#id) sẽ do trình duyệt xử lý hoàn toàn ngay cả trong một ứng dụng trang đơn. Tuy nhiên, việc điều hướng đến một điểm neo trên một "trang" khác (/a đến /b#id) – đơn giản đối với ứng dụng nhiều trang, lại phức tạp hơn đối với ứng dụng trang đơn. Ứng dụng phải chặn hoạt động điều hướng đến /b#id bằng NavigateEvent.transitionWhile(), sau đó gọi NavigateEvent.restoreScroll() để đưa thẻ liên kết vào khung hiển thị. Như đã nêu ở trên, hiện tại việc này khó thực hiện.
Những điểm thay đổi
Trong các ứng dụng trang đơn, giờ đây, bạn có thể kiểm soát việc trình duyệt có xử lý thao tác cuộn đến văn bản liên kết hay không hoặc mã của bạn có xử lý như vậy hay không.
Sử dụng scroll()
Theo mặc định, trình duyệt sẽ tìm cách xử lý thao tác cuộn tự động sau khi trình xử lý chặn đã thực hiện xong. Nếu bạn muốn tự xử lý thao tác cuộn, hãy đặt scroll thành "manual", sau đó gọi NavigateEvent.scroll() khi trình duyệt cố gắng đặt vị trí cuộn.
navigation.addEventListener("manual", event => {
scroll: "manual",
event.intercept({
async handler() {
doSyncStuff();
// Handle scrolling earlier than by default:
event.scroll();
await doAsyncStuff();
}
});
});
Phương thức restoreScroll() vẫn còn hoạt động nhưng không được dùng nữa và sẽ bị xoá trong Chrome 108.
Kết luận
Chúng tôi hy vọng có thể sớm cập nhật bài viết của chúng tôi về Navigation API (API Điều hướng). Trong thời gian chờ đợi, thông số kỹ thuật cho API này chứa nhiều thông tin dành riêng cho nhà phát triển web.