Làm chủ Navigation API: Định tuyến và Quản lý Lịch sử cho Ứng dụng Trang đơn

Navigation API đại diện cho một bước tiến quan trọng trong cách chúng ta xử lý việc định tuyến và quản lý lịch sử trong các Ứng dụng Trang đơn (SPA). Các phương pháp truyền thống thường dựa vào việc thao tác đối tượng `window.location` hoặc sử dụng các thư viện của bên thứ ba. Mặc dù những cách tiếp cận này đã phục vụ chúng ta tốt, Navigation API cung cấp một giải pháp hợp lý, hiệu suất cao và giàu tính năng hơn, cho phép các nhà phát triển kiểm soát tốt hơn trải nghiệm điều hướng của người dùng.

Navigation API là gì?

Navigation API là một API trình duyệt hiện đại được thiết kế để đơn giản hóa và nâng cao cách các SPA quản lý điều hướng, định tuyến và lịch sử. Nó giới thiệu một đối tượng `navigation` mới, cung cấp các phương thức và sự kiện cho phép các nhà phát triển chặn và kiểm soát các sự kiện điều hướng, cập nhật URL và duy trì lịch sử duyệt web nhất quán mà không cần tải lại toàn bộ trang. Điều này mang lại trải nghiệm người dùng nhanh hơn, mượt mà hơn và phản hồi tốt hơn.

Lợi ích của việc sử dụng Navigation API

• Cải thiện hiệu suất: Bằng cách loại bỏ việc tải lại toàn bộ trang, Navigation API cải thiện đáng kể hiệu suất của các SPA. Việc chuyển đổi giữa các chế độ xem khác nhau trở nên nhanh hơn và mượt mà hơn, dẫn đến trải nghiệm người dùng hấp dẫn hơn.
• Kiểm soát nâng cao: API cung cấp khả năng kiểm soát chi tiết đối với các sự kiện điều hướng, cho phép các nhà phát triển chặn và sửa đổi hành vi điều hướng khi cần thiết. Điều này bao gồm việc ngăn chặn điều hướng, chuyển hướng người dùng và thực thi logic tùy chỉnh trước hoặc sau khi điều hướng xảy ra.
• Quản lý lịch sử đơn giản hóa: Việc quản lý ngăn xếp lịch sử của trình duyệt trở nên dễ dàng hơn với Navigation API. Các nhà phát triển có thể thêm, thay thế và duyệt qua các mục lịch sử theo chương trình, đảm bảo trải nghiệm duyệt web nhất quán và có thể dự đoán được.
• Điều hướng khai báo: Navigation API khuyến khích một cách tiếp cận khai báo hơn đối với việc định tuyến, cho phép các nhà phát triển xác định các quy tắc và hành vi điều hướng một cách rõ ràng và ngắn gọn. Điều này cải thiện khả năng đọc và bảo trì mã nguồn.
• Tích hợp với các Framework hiện đại: Navigation API được thiết kế để tích hợp liền mạch với các framework và thư viện JavaScript hiện đại, chẳng hạn như React, Angular và Vue.js. Điều này cho phép các nhà phát triển tận dụng các tính năng của API trong quy trình phát triển hiện có của họ.

Các khái niệm và tính năng cốt lõi

1. Đối tượng `navigation`

Trái tim của Navigation API là đối tượng `navigation`, có thể truy cập thông qua đối tượng `window` toàn cục (tức là, `window.navigation`). Đối tượng này cung cấp quyền truy cập vào các thuộc tính và phương thức khác nhau liên quan đến điều hướng, bao gồm:

• `currentEntry`: Trả về một đối tượng `NavigationHistoryEntry` đại diện cho mục nhập hiện tại trong lịch sử điều hướng.
• `entries()`: Trả về một mảng các đối tượng `NavigationHistoryEntry` đại diện cho tất cả các mục nhập trong lịch sử điều hướng.
• `navigate(url, { state, info, replace })`: Điều hướng đến một URL mới.
• `back()`: Điều hướng trở lại mục lịch sử trước đó.
• `forward()`: Điều hướng tới mục lịch sử tiếp theo.
• `reload()`: Tải lại trang hiện tại.
• `addEventListener(event, listener)`: Thêm một trình lắng nghe sự kiện cho các sự kiện liên quan đến điều hướng.

2. `NavigationHistoryEntry`

Giao diện `NavigationHistoryEntry` đại diện cho một mục nhập duy nhất trong lịch sử điều hướng. Nó cung cấp thông tin về mục nhập, chẳng hạn như URL, trạng thái và ID duy nhất của nó.

• `url`: URL của mục lịch sử.
• `key`: Một định danh duy nhất cho mục lịch sử.
• `id`: Một định danh duy nhất khác, đặc biệt hữu ích để theo dõi vòng đời của một sự kiện điều hướng.
• `sameDocument`: Một giá trị boolean cho biết liệu việc điều hướng có dẫn đến một điều hướng trong cùng một tài liệu hay không.
• `getState()`: Trả về trạng thái được liên kết với mục lịch sử (được thiết lập trong quá trình điều hướng).

3. Các sự kiện điều hướng

Navigation API gửi đi một số sự kiện cho phép các nhà phát triển theo dõi và kiểm soát hành vi điều hướng. Các sự kiện này bao gồm:

• `navigate`: Được gửi đi khi một điều hướng được bắt đầu (ví dụ: nhấp vào một liên kết, gửi một biểu mẫu hoặc gọi `navigation.navigate()`). Đây là sự kiện chính để chặn và xử lý các yêu cầu điều hướng.
• `navigatesuccess`: Được gửi đi khi một điều hướng hoàn tất thành công.
• `navigateerror`: Được gửi đi khi một điều hướng thất bại (ví dụ: do lỗi mạng hoặc một ngoại lệ không được xử lý).
• `currentchange`: Được gửi đi khi mục lịch sử hiện tại thay đổi (ví dụ: khi điều hướng tới hoặc lui).
• `dispose`: Được gửi đi khi một NavigationHistoryEntry không còn có thể truy cập được, chẳng hạn như khi nó bị xóa khỏi lịch sử trong một hoạt động `replaceState`.

Triển khai định tuyến với Navigation API: Một ví dụ thực tế

Hãy minh họa cách sử dụng Navigation API để triển khai định tuyến cơ bản trong một SPA đơn giản. Giả sử một ứng dụng có ba chế độ xem: Trang chủ, Giới thiệu và Liên hệ.

Đầu tiên, tạo một hàm để xử lý các thay đổi tuyến đường:

function handleRouteChange(url) {
  const contentDiv = document.getElementById('content');
  switch (url) {
    case '/':
      contentDiv.innerHTML = '
Trang chủ
Chào mừng đến với trang Chủ!
';
      break;
    case '/about':
      contentDiv.innerHTML = '
Giới thiệu
Tìm hiểu thêm về chúng tôi.
';
      break;
    case '/contact':
      contentDiv.innerHTML = '
Liên hệ
Hãy liên lạc với chúng tôi.
';
      break;
    default:
      contentDiv.innerHTML = '
404 Không tìm thấy
Không tìm thấy trang.
';
  }
}

Tiếp theo, thêm một trình lắng nghe sự kiện cho sự kiện `navigate`:

window.navigation.addEventListener('navigate', (event) => {
  const url = new URL(event.destination.url).pathname;
  event.preventDefault(); // Ngăn chặn hành vi điều hướng mặc định của trình duyệt

  const promise = new Promise((resolve) => {
      handleRouteChange(url);
      resolve(); // Giải quyết promise sau khi xử lý tuyến đường
  });

  event.transition = promise;
});

Mã này chặn sự kiện `navigate`, trích xuất URL từ đối tượng `event.destination`, ngăn chặn hành vi điều hướng mặc định của trình duyệt, gọi `handleRouteChange` để cập nhật nội dung, và thiết lập promise `event.transition`. Việc thiết lập `event.transition` đảm bảo trình duyệt đợi cho việc cập nhật nội dung hoàn tất trước khi cập nhật giao diện người dùng.

Cuối cùng, bạn có thể tạo các liên kết kích hoạt điều hướng:

Trang chủ | Giới thiệu | Liên hệ

Và gắn một trình lắng nghe sự kiện click vào các liên kết đó:

document.addEventListener('click', (event) => {
  if (event.target.tagName === 'A' && event.target.hasAttribute('data-navigo')) {
    event.preventDefault();
    window.navigation.navigate(event.target.href);
  }
});

Điều này thiết lập định tuyến phía máy khách cơ bản bằng Navigation API. Bây giờ, việc nhấp vào các liên kết sẽ kích hoạt một sự kiện điều hướng cập nhật nội dung của div `content` mà không cần tải lại toàn bộ trang.

Thêm Quản lý Trạng thái

Navigation API cũng cho phép bạn liên kết trạng thái với mỗi mục lịch sử. Điều này hữu ích để bảo toàn dữ liệu qua các sự kiện điều hướng. Hãy sửa đổi ví dụ trước để bao gồm một đối tượng trạng thái.

Khi gọi `navigation.navigate()`, bạn có thể truyền vào một đối tượng `state`:

window.navigation.navigate('/about', { state: { pageTitle: 'Về Chúng Tôi' } });

Bên trong trình lắng nghe sự kiện `navigate`, bạn có thể truy cập trạng thái bằng cách sử dụng `event.destination.getState()`:

window.navigation.addEventListener('navigate', (event) => {
  const url = new URL(event.destination.url).pathname;
  const state = event.destination.getState();
  event.preventDefault();

  const promise = new Promise((resolve) => {
      handleRouteChange(url, state);
      resolve();
  });
  event.transition = promise;

});

function handleRouteChange(url, state = {}) {
  const contentDiv = document.getElementById('content');
  let title = state.pageTitle || 'Ứng dụng của tôi'; // Tiêu đề mặc định

  switch (url) {
    case '/':
      contentDiv.innerHTML = '
Trang chủ
Chào mừng đến với trang Chủ!
';
      title = 'Trang chủ';
      break;
    case '/about':
      contentDiv.innerHTML = '
Giới thiệu
Tìm hiểu thêm về chúng tôi.
';
      break;
    case '/contact':
      contentDiv.innerHTML = '
Liên hệ
Hãy liên lạc với chúng tôi.
';
      break;
    default:
      contentDiv.innerHTML = '
404 Không tìm thấy
Không tìm thấy trang.
';
      title = '404 Không tìm thấy';
  }
  document.title = title;
}

Trong ví dụ đã sửa đổi này, hàm `handleRouteChange` bây giờ chấp nhận một tham số `state` và sử dụng nó để cập nhật tiêu đề tài liệu. Nếu không có trạng thái nào được truyền vào, nó mặc định là 'Ứng dụng của tôi'.

Sử dụng `navigation.updateCurrentEntry()`

Đôi khi bạn có thể muốn cập nhật trạng thái của mục lịch sử hiện tại mà không kích hoạt một điều hướng mới. Phương thức `navigation.updateCurrentEntry()` cho phép bạn làm điều này. Ví dụ, nếu một người dùng thay đổi một cài đặt trên trang hiện tại, bạn có thể cập nhật trạng thái để phản ánh sự thay đổi đó:

function updateUserSetting(setting, value) {
  const currentState = navigation.currentEntry.getState() || {};
  const newState = { ...currentState, [setting]: value };
  navigation.updateCurrentEntry({ state: newState });
  console.log('Đã cập nhật cài đặt:', setting, 'thành', value);
}

// Ví dụ sử dụng:
updateUserSetting('theme', 'dark');

Hàm này lấy trạng thái hiện tại, hợp nhất cài đặt đã cập nhật, và sau đó cập nhật mục lịch sử hiện tại với trạng thái mới.

Các trường hợp sử dụng nâng cao và những điều cần cân nhắc

1. Xử lý việc gửi Form

Navigation API có thể được sử dụng để xử lý việc gửi form trong các SPA, ngăn chặn việc tải lại toàn bộ trang và cung cấp một trải nghiệm người dùng liền mạch hơn. Bạn có thể chặn sự kiện gửi form và sử dụng `navigation.navigate()` để cập nhật URL và hiển thị kết quả mà không cần tải lại toàn bộ trang.

2. Các thao tác bất đồng bộ

Khi xử lý các sự kiện điều hướng, bạn có thể cần thực hiện các thao tác bất đồng bộ, chẳng hạn như tìm nạp dữ liệu từ một API. Thuộc tính `event.transition` cho phép bạn liên kết một promise với sự kiện điều hướng, đảm bảo rằng trình duyệt đợi cho thao tác bất đồng bộ hoàn thành trước khi cập nhật trang. Xem các ví dụ ở trên.

3. Khôi phục vị trí cuộn

Việc duy trì vị trí cuộn trong quá trình điều hướng là rất quan trọng để cung cấp một trải nghiệm người dùng tốt. Navigation API cung cấp các cơ chế để khôi phục vị trí cuộn khi điều hướng tới hoặc lui trong lịch sử. Bạn có thể sử dụng thuộc tính `scroll` của `NavigationHistoryEntry` để lưu trữ và khôi phục vị trí cuộn.

4. Xử lý lỗi

Việc xử lý các lỗi có thể xảy ra trong quá trình điều hướng là rất cần thiết, chẳng hạn như lỗi mạng hoặc các ngoại lệ chưa được xử lý. Sự kiện `navigateerror` cho phép bạn bắt và xử lý các lỗi này một cách mượt mà, ngăn ứng dụng bị sập hoặc hiển thị một thông báo lỗi cho người dùng.

5. Cải tiến lũy tiến

Khi xây dựng các SPA với Navigation API, điều quan trọng là phải xem xét đến cải tiến lũy tiến. Hãy đảm bảo rằng ứng dụng của bạn hoạt động chính xác ngay cả khi Navigation API không được trình duyệt hỗ trợ. Bạn có thể sử dụng tính năng phát hiện để kiểm tra sự hiện diện của đối tượng `navigation` và quay lại các phương pháp định tuyến truyền thống nếu cần.

So sánh với các phương pháp định tuyến truyền thống

Các phương pháp định tuyến truyền thống trong SPA thường dựa vào việc thao tác đối tượng `window.location` hoặc sử dụng các thư viện của bên thứ ba như `react-router` hoặc `vue-router`. Mặc dù các phương pháp này được sử dụng rộng rãi và đã được thiết lập tốt, chúng có một số hạn chế:

• Tải lại toàn bộ trang: Thao tác trực tiếp với `window.location` có thể kích hoạt việc tải lại toàn bộ trang, điều này có thể chậm và gây gián đoạn trải nghiệm người dùng.
• Độ phức tạp: Quản lý lịch sử và trạng thái bằng các phương pháp truyền thống có thể phức tạp và dễ gây ra lỗi, đặc biệt là trong các ứng dụng lớn và phức tạp.
• Chi phí hiệu suất: Các thư viện định tuyến của bên thứ ba có thể làm tăng đáng kể chi phí hiệu suất, đặc biệt nếu chúng không được tối ưu hóa cho các nhu cầu cụ thể của ứng dụng của bạn.

Navigation API giải quyết những hạn chế này bằng cách cung cấp một giải pháp hợp lý, hiệu suất cao và giàu tính năng hơn cho việc định tuyến và quản lý lịch sử. Nó loại bỏ việc tải lại toàn bộ trang, đơn giản hóa việc quản lý lịch sử và cung cấp khả năng kiểm soát chi tiết đối với các sự kiện điều hướng.

Khả năng tương thích của trình duyệt

Tính đến cuối năm 2024, Navigation API đã được hỗ trợ tốt trên các trình duyệt hiện đại, bao gồm Chrome, Firefox, Safari và Edge. Tuy nhiên, việc kiểm tra thông tin tương thích trình duyệt mới nhất trên các tài nguyên như Can I use trước khi triển khai Navigation API trong các ứng dụng sản phẩm của bạn luôn là một thói quen tốt. Nếu việc hỗ trợ các trình duyệt cũ hơn là bắt buộc, hãy cân nhắc sử dụng một polyfill hoặc một cơ chế dự phòng.

Kết luận

Navigation API là một công cụ mạnh mẽ để xây dựng các SPA hiện đại, hiệu suất cao với khả năng định tuyến và quản lý lịch sử nâng cao. Bằng cách tận dụng các tính năng của API, các nhà phát triển có thể tạo ra trải nghiệm người dùng nhanh hơn, mượt mà hơn và hấp dẫn hơn. Mặc dù đường cong học tập ban đầu có thể hơi dốc hơn so với việc sử dụng các phương pháp cũ hơn, đơn giản hơn, nhưng những lợi thế của Navigation API, đặc biệt là trong các ứng dụng phức tạp, khiến nó trở thành một khoản đầu tư xứng đáng. Hãy nắm bắt Navigation API và khai phá toàn bộ tiềm năng của các SPA của bạn.

Tìm hiểu thêm

• Tài liệu web MDN: Navigation API
• Đặc tả kỹ thuật WICG Navigation API