Bản dùng thử theo nguyên gốc mới cho tính năng Điều hướng mềm

Barry Pollard
Michal Mocny

Ngày xuất bản: 31 tháng 7 năm 2025

Chrome sẽ ra mắt một bản dùng thử theo nguyên gốc mới từ Chrome 139 cho Soft Navigations API mà chúng tôi đã thử nghiệm trước đây. Thử nghiệm nguồn gốc này cho phép các trang web dùng thử API trên trang web của họ với người dùng thực để kiểm thử thực địa API và cung cấp ý kiến phản hồi cho nhóm Chrome.

Điều hướng mềm là gì?

Thao tác điều hướng mềm là khi JavaScript chặn một thao tác điều hướng (ví dụ: nhấp vào một đường liên kết) và cập nhật nội dung trên trang hiện có, thay vì tải một trang mới rồi cập nhật URL trong thanh địa chỉ (với trạng thái nhật ký để cho phép thao tác điều hướng mềm qua lại). Đối với người dùng, những thao tác này trông giống như thao tác điều hướng thông thường, nhưng theo trình duyệt, trang này vẫn là trang gốc.

Lý do cần có Soft Navigation API

Soft Navigations API là một API được đề xuất để cho phép phát hiện dựa trên kinh nghiệm về cái gọi là "thao tác điều hướng mềm" mà các trang web Ứng dụng một trang (SPA) sử dụng. Vì không có hoạt động điều hướng trang thực tế nào xảy ra đối với hoạt động điều hướng mềm, nên điều này có nghĩa là JavaScript cần quản lý theo cách thủ công một số thao tác thường xảy ra đối với hoạt động điều hướng. Một số thao tác, chẳng hạn như quản lý nhật ký điều hướng, có thể thực hiện bằng các API hiện tại. Tuy nhiên, bạn không thể thực hiện các thao tác khác, chẳng hạn như đo lường Các chỉ số quan trọng về trang web cho những thao tác điều hướng này.

Soft Navigation API cho phép quan sát các thao tác điều hướng mềm. Mặc dù JavaScript khởi tạo thao tác điều hướng mềm (thường là một khung JavaScript) biết thời điểm xảy ra thao tác điều hướng, nhưng JavaScript khác và chính trình duyệt sẽ không biết.

Các chỉ số quan trọng về trang web và SPA

Một trong những yếu tố chính thúc đẩy Soft Navigation API là cho phép đo lường Chỉ số quan trọng chính của trang web cho SPA. Chỉ số quan trọng chính của trang web được đo lường bằng cả trình duyệt (để hiển thị trong các công cụ như Báo cáo trải nghiệm người dùng trên Chrome) và bằng các thư viện JavaScript Giám sát người dùng thực (RUM).

Các khung JavaScript có thể đo lường một số khía cạnh của Các chỉ số quan trọng về trang web. Đặc biệt, Lượt tương tác đến nội dung hiển thị tiếp theo (INP) và Mức thay đổi bố cục tích luỹ (CLS) dựa trên các thành phần cơ bản (tương ứng là Event Timing API và Layout Instability API) có thể được đo lường trong bất kỳ khoảng thời gian nào để tính toán các chỉ số INP và CLS. Tuy nhiên, các chỉ số khác như Thời gian hiển thị nội dung lớn nhất (LCP) chỉ được trình duyệt phát ra – dựa trên các thao tác điều hướng trang và được hoàn tất khi có lượt tương tác.

Cách Soft Navigation API cho phép đo lường Các chỉ số quan trọng về trang web cho SPA

Lần lặp lại đầu tiên của Soft Navigation API đã kết hợp các phương pháp phỏng đoán điều hướng mềm với việc đặt lại LCP. Sau khi được đặt lại, LCP có thể được phát lại cho các thao tác điều hướng mềm đối với nội dung hiển thị mới, cho phép đo lường chỉ số này cho các thao tác điều hướng mềm.

Lần lặp lại mới nhất này áp dụng một phương pháp khác và tách các khái niệm này thành Soft Navigation API và một mục nhập hiệu suất mới cho Lượt tương tác đến nội dung hiển thị có ý nghĩa. Mục interaction-contentful-paint này đo lường "nội dung hiển thị có ý nghĩa" sau các lượt tương tác. Hiện tại, chỉ có các thao tác điều hướng mềm mới phát ra tín hiệu này, nhưng tín hiệu này sẽ mở ra những trường hợp sử dụng tiềm năng khác ngoài LCP nếu được bật cho tất cả các lượt tương tác.

API này cũng mở rộng từng mục nhập hiệu suất largest-contentful-paint, interaction-contentful-paint, event-timing và layout-shift để bao gồm một giá trị nhận dạng cho biết mục nhập đó dành cho hoạt động điều hướng nào. Các mục hiệu suất được phát ra sau sự kiện mà chúng đang đo lường – thường là trong thời gian rảnh. Điều này có nghĩa là URL thường sẽ thay đổi vào thời điểm mục nhập hiệu suất được phát ra. Việc đưa cả thông tin điều hướng vào mục nhập giúp bạn đo lường Các chỉ số quan trọng về trang web cho một URL cụ thể dễ dàng hơn nhiều mà không cần phải so khớp thời gian mục nhập hiệu suất với thời gian mục nhập điều hướng mềm.

Tại sao cần có một phương pháp phỏng đoán?

Soft Navigation API xem xét một thao tác điều hướng mềm khi xảy ra những trường hợp sau:

  • Xảy ra một lượt tương tác dựa trên người dùng (các lượt cập nhật URL mà không có lượt tương tác của người dùng sẽ không được tính)
  • … dẫn đến việc sửa đổi DOM và một thao tác kết xuất
  • … và một URL cập nhật sẽ xuất hiện
  • Cập nhật URL, bao gồm cả thay đổi về nhật ký.

API này sử dụng phương pháp dựa trên kinh nghiệm thay vì cho phép một khung JavaScript "phát" một thao tác điều hướng mềm hoặc được xây dựng dựa trên Navigation API vì điều này cho phép hiểu một cách nhất quán về những gì tạo nên một thao tác điều hướng mềm, bất kể khung hoặc cách nhà phát triển sử dụng thao tác đó.

Các khung hoặc nhà phát triển có thể cập nhật URL cho một thao tác điều hướng mềm ngay cả khi không có hoạt động tương tác của người dùng hoặc bản cập nhật DOM mà chúng tôi coi là những gì người dùng sẽ thấy khi điều hướng. Họ cũng có thể cập nhật URL vào những thời điểm khác nhau – khi bắt đầu tương tác hoặc chỉ khi kết thúc (khi hoàn tất) – hoặc ở bất kỳ trạng thái nào ở giữa.

Thay vì dựa vào các lựa chọn về khung, việc tích hợp tính năng phát hiện thao tác điều hướng mềm vào trình duyệt sẽ thiết lập "phương pháp phỏng đoán" chính tắc (dựa trên ý kiến phản hồi của bạn từ giai đoạn dùng thử ban đầu này). Nhờ đó, chúng tôi có thể đo lường Các chỉ số quan trọng về trang web cho các thao tác điều hướng mềm trên quy mô lớn và so sánh các phép đo đó trên quy mô lớn.

Các khung và nhà phát triển cũng có thể bỏ qua các phương pháp phỏng đoán của Soft Navigations API và sử dụng các API Event Timing, Layout Instability và Interaction to Contentful Paint cơ bản để đo lường các chỉ số hiệu suất bổ sung theo ý muốn. Tuy nhiên, bạn nên sử dụng Core Web Vitals bằng phương pháp phỏng đoán để cho phép đo lường trên các trang web.

Cần trợ giúp để kiểm thử Soft Navigation API

Chúng tôi cần sự trợ giúp của bạn để kiểm thử Soft Navigations API nhằm kiểm tra xem phương pháp phỏng đoán có đáp ứng đúng kỳ vọng của bạn về thời điểm xảy ra một thao tác điều hướng mềm hay không. Có trường hợp nào API không báo cáo các thao tác điều hướng mềm khi bạn cho rằng các thao tác đó đã xảy ra không? Ngược lại, API có lặp lại các thao tác điều hướng mà bạn không coi là thao tác điều hướng mềm không?

Ví dụ: chúng tôi nhận thấy các trường hợp sau đây gây ra vấn đề: khi một URL được cập nhật bằng replaceState thay vì thêm nhật ký hoặc khi một thao tác điều hướng không do người dùng thực hiện xảy ra (ví dụ: đăng xuất khi hết thời gian chờ). Cả hai trường hợp này đều được giải thích bằng cách không khớp với phương pháp phỏng đoán và nhóm Chrome cảm thấy thoải mái khi không đưa các trường hợp này vào, nhưng chúng tôi muốn nhận được ý kiến của các nhà phát triển web nếu họ đồng ý. Chúng tôi đặc biệt muốn biết về những trường hợp mà các phương pháp phỏng đoán có vẻ đã được đáp ứng nhưng API vẫn không nhận ra thao tác điều hướng mềm.

Ngoài ra, chúng tôi muốn biết liệu API này và nguyên tắc cơ bản mới về Lượt tương tác đến nội dung hiển thị có giải quyết được trường hợp sử dụng chính là cho phép đo lường Chỉ số quan trọng chính của trang web cho SPA hay không.

Chúng tôi muốn API này hữu ích nhất có thể và điều đó sẽ dễ dàng hơn nhiều trước khi API được ra mắt và các trang web bắt đầu phụ thuộc vào một quy trình triển khai. Do đó, chúng tôi yêu cầu các nhà phát triển SPA và những người quan tâm đến việc đo lường hiệu suất web cho những trang web này hãy dùng thử API này và cho chúng tôi biết hiệu quả của API đối với bạn.

Cách kiểm thử

Bạn có thể kiểm thử API này cục bộ bằng cờ Chrome hoặc các lựa chọn dòng lệnh. Ngoài ra, bạn có thể kiểm thử trong trường bằng bản dùng thử theo nguyên gốc.

Hãy tham khảo tài liệu của chúng tôi hoặc kho lưu trữ GitHub để biết thêm thông tin chi tiết về kỹ thuật của API, đặc biệt là cách đo lường Các chỉ số quan trọng chính của trang web. Ngoài ra, còn có phiên bản điều hướng mềm thử nghiệm của thư viện web-vitals.

Phản hồi

Chúng tôi đang tích cực thu thập ý kiến phản hồi về thử nghiệm này tại những nơi sau:

Nếu bạn không chắc chắn, đừng lo lắng quá nhiều. Chúng tôi muốn nhận được ý kiến phản hồi ở cả hai nơi và sẽ sẵn sàng phân loại vấn đề ở cả hai nơi cũng như chuyển hướng vấn đề đến đúng vị trí.