Di chuyển sang nội dung gợi ý của ứng dụng tác nhân người dùng

Các chiến lược để di chuyển trang web của bạn từ việc dựa vào chuỗi tác nhân người dùng sang Gợi ý ứng dụng tác nhân người dùng mới.

Rowan Merewood

Chuỗi tác nhân người dùng là một bề mặt tạo vân tay số thụ động quan trọng trong các trình duyệt, vì gặp rất nhiều khó khăn khi xử lý. Tuy nhiên, có đủ loại lý do hợp lệ cho việc thu thập và xử lý dữ liệu tác nhân người dùng. Vì vậy, những gì cần thiết là một đường dẫn đến giải pháp tốt hơn. Gợi ý ứng dụng tác nhân người dùng cung cấp cả cách rõ ràng để khai báo nhu cầu của bạn về dữ liệu tác nhân người dùng và các phương thức để trả về dữ liệu ở định dạng dễ sử dụng.

Bài viết này sẽ hướng dẫn bạn cách kiểm tra quyền truy cập vào dữ liệu tác nhân người dùng và di chuyển việc sử dụng chuỗi tác nhân người dùng sang Gợi ý ứng dụng tác nhân người dùng.

Kiểm tra việc thu thập và sử dụng dữ liệu tác nhân người dùng

Giống như mọi hình thức thu thập dữ liệu, bạn phải luôn hiểu lý do mình thu thập dữ liệu đó. Bước đầu tiên, bất kể bạn có thực hiện hành động nào hay không, là tìm hiểu vị trí và lý do bạn sử dụng dữ liệu tác nhân người dùng.

Nếu bạn không biết liệu dữ liệu tác nhân người dùng có đang được sử dụng hay không, hãy cân nhắc tìm kiếm mã giao diện người dùng để sử dụng navigator.userAgent và mã phụ trợ để sử dụng tiêu đề HTTP User-Agent. Bạn cũng nên kiểm tra mã giao diện người dùng để sử dụng các tính năng đã ngừng hoạt động, chẳng hạn như navigator.platform và navigator.appVersion.

Từ góc độ chức năng, hãy nghĩ về bất kỳ vị trí nào trong mã mà bạn đang ghi lại hoặc xử lý:

  • Tên hoặc phiên bản trình duyệt
  • Tên hoặc phiên bản hệ điều hành
  • Mẫu hoặc kiểu thiết bị
  • Loại CPU, cấu trúc hoặc độ bit (ví dụ: 64 bit)

Cũng có khả năng bạn đang sử dụng thư viện hoặc dịch vụ của bên thứ ba để xử lý tác nhân người dùng. Trong trường hợp này, hãy kiểm tra xem chúng có được cập nhật để hỗ trợ tính năng Gợi ý ứng dụng tác nhân người dùng hay không.

Có phải bạn chỉ sử dụng dữ liệu tác nhân người dùng cơ bản không?

Bộ Gợi ý ứng dụng tác nhân người dùng mặc định bao gồm:

  • Sec-CH-UA: tên trình duyệt và phiên bản chính/quan trọng
  • Sec-CH-UA-Mobile: giá trị boolean cho biết thiết bị di động
  • Sec-CH-UA-Platform: tên hệ điều hành
    • Xin lưu ý rằng thay đổi này đã được cập nhật trong phần quy cách và sẽ sớm được phản ánh trong Chrome và các trình duyệt dựa trên Chromium khác.

Phiên bản rút gọn của chuỗi tác nhân người dùng được đề xuất cũng sẽ giữ lại thông tin cơ bản này theo cách tương thích ngược. Ví dụ: thay vì Chrome/90.0.4430.85, chuỗi sẽ bao gồm Chrome/90.0.0.0.

Nếu bạn chỉ kiểm tra chuỗi tác nhân người dùng để biết tên trình duyệt, phiên bản lớn hoặc hệ điều hành, thì mã sẽ tiếp tục hoạt động mặc dù có thể bạn sẽ thấy các cảnh báo về việc ngừng sử dụng.

Mặc dù bạn có thể và nên di chuyển sang tính năng Gợi ý ứng dụng tác nhân người dùng, nhưng có thể bạn vẫn còn một số hạn chế về mã hoặc tài nguyên cũ ngăn chặn điều này. Việc giảm thông tin trong chuỗi tác nhân người dùng theo cách tương thích ngược này là nhằm đảm bảo rằng mặc dù mã hiện có sẽ nhận được thông tin ít chi tiết hơn, nhưng nó vẫn giữ lại các chức năng cơ bản.

Chiến lược: API JavaScript phía máy khách theo yêu cầu

Nếu đang sử dụng navigator.userAgent, bạn nên chuyển sang ưu tiên navigator.userAgentData trước khi quay lại phân tích cú pháp chuỗi tác nhân người dùng.

if (navigator.userAgentData) {
  // use new hints
} else {
  // fall back to user-agent string parsing
}

Nếu bạn đang kiểm tra thiết bị di động hoặc máy tính, hãy sử dụng giá trị boolean mobile:

const isMobile = navigator.userAgentData.mobile;

userAgentData.brands là một mảng các đối tượng có thuộc tính brand và version, trong đó trình duyệt có thể liệt kê khả năng tương thích với các thương hiệu đó. Bạn có thể truy cập trực tiếp dưới dạng mảng hoặc sử dụng lệnh gọi some() để kiểm tra xem có một mục cụ thể nào đó hay không:

function isCompatible(item) {
  // In real life you most likely have more complex rules here
  return ['Chromium', 'Google Chrome', 'NewBrowser'].includes(item.brand);
}
if (navigator.userAgentData.brands.some(isCompatible)) {
  // browser reports as compatible
}

Nếu cần một trong các giá trị tác nhân người dùng có hàm lượng entropy cao và chi tiết hơn, bạn cần chỉ định giá trị đó và kiểm tra kết quả trong Promise được trả về:

navigator.userAgentData.getHighEntropyValues(['model'])
  .then(ua => {
    // requested hints available as attributes
    const model = ua.model
  });

Bạn cũng có thể sử dụng chiến lược này nếu muốn chuyển từ quy trình xử lý phía máy chủ sang xử lý phía máy khách. API JavaScript không đòi hỏi quyền truy cập vào các tiêu đề của yêu cầu HTTP, vì vậy, bạn có thể yêu cầu các giá trị tác nhân người dùng bất cứ lúc nào.

Chiến lược: Tiêu đề tĩnh phía máy chủ

Nếu đang sử dụng tiêu đề yêu cầu User-Agent trên máy chủ và nhu cầu của bạn về dữ liệu đó tương đối nhất quán trên toàn bộ trang web, thì bạn có thể chỉ định gợi ý của ứng dụng mong muốn dưới dạng một tập hợp tĩnh trong các phản hồi của mình. Đây là một phương pháp tương đối đơn giản vì bạn thường chỉ cần định cấu hình ở một vị trí. Ví dụ: tiêu đề đó có thể nằm trong cấu hình máy chủ web nếu bạn đã thêm tiêu đề vào đó, cấu hình lưu trữ hoặc cấu hình cấp cao nhất của khung hoặc nền tảng bạn sử dụng cho trang web của mình.

Hãy cân nhắc chiến lược này nếu bạn đang chuyển đổi hoặc tuỳ chỉnh các phản hồi được phân phát dựa trên dữ liệu của tác nhân người dùng.

Các trình duyệt hoặc ứng dụng khác có thể chọn cung cấp nhiều gợi ý mặc định. Vì vậy, bạn nên chỉ định mọi gợi ý cần thiết, ngay cả khi các gợi ý đó thường được cung cấp theo mặc định.

Ví dụ: các giá trị mặc định hiện tại của Chrome sẽ được biểu thị như sau:

🎂️ Tiêu đề phản hồi

Accept-CH: Sec-CH-UA-Mobile, Sec-CH-UA-Platform, Sec-CH-UA

Nếu cũng muốn nhận mẫu thiết bị trong phản hồi, bạn cần gửi:

🎂️ Tiêu đề phản hồi

Accept-CH: Sec-CH-UA-Mobile, Sec-CH-UA-Model, Sec-CH-UA-Platform, Sec-CH-UA

Khi xử lý vấn đề này ở phía máy chủ, trước tiên, bạn nên kiểm tra xem tiêu đề Sec-CH-UA mong muốn đã được gửi hay chưa. Sau đó, hãy dùng dự phòng để phân tích cú pháp tiêu đề User-Agent nếu không có.

Chiến lược: Ủy quyền gợi ý cho các yêu cầu nhiều nguồn gốc

Nếu đang yêu cầu các tài nguyên phụ nhiều nguồn gốc hoặc nhiều trang web đòi hỏi phải gửi Gợi ý ứng dụng tác nhân người dùng theo yêu cầu của mình, thì bạn sẽ cần chỉ định rõ ràng gợi ý mong muốn bằng Chính sách về quyền.

Ví dụ: giả sử https://blog.site lưu trữ các tài nguyên trên https://cdn.site có thể trả về các tài nguyên được tối ưu hoá cho một thiết bị cụ thể. https://blog.site có thể yêu cầu gợi ý Sec-CH-UA-Model, nhưng cần uỷ quyền rõ ràng cho https://cdn.site bằng cách sử dụng tiêu đề Permissions-Policy. Danh sách các gợi ý do chính sách kiểm soát có trong Bản nháp cơ sở hạ tầng Gợi ý về ứng dụng

⬇️ Phản hồi từ blog.site uỷ quyền gợi ý

Accept-CH: Sec-CH-UA-Model
Permissions-Policy: ch-ua-model=(self "https://cdn.site")

⬆️ Yêu cầu tài nguyên phụ trên cdn.site bao gồm gợi ý được uỷ quyền

Sec-CH-UA-Model: "Pixel 5"

Bạn có thể chỉ định nhiều gợi ý cho nhiều nguồn gốc, chứ không chỉ từ dải ô ch-ua:

🎂️ Phản hồi từ blog.site khi uỷ quyền cho nhiều gợi ý cho nhiều điểm gốc

Accept-CH: Sec-CH-UA-Model, DPR
Permissions-Policy: ch-ua-model=(self "https://cdn.site"),
                    ch-dpr=(self "https://cdn.site" "https://img.site")

Chiến lược: Ủy quyền gợi ý cho iframe

iframe trên nhiều nguồn gốc hoạt động theo cách tương tự như tài nguyên nhiều nguồn gốc, nhưng bạn sẽ chỉ định các gợi ý muốn uỷ quyền trong thuộc tính allow.

🎂️ Phản hồi từ blog.site

Accept-CH: Sec-CH-UA-Model

↪️ HTML cho blog.site

<iframe src="https://widget.site" allow="ch-ua-model"></iframe>

⬆️ Yêu cầu gửi đến widget.site

Sec-CH-UA-Model: "Pixel 5"

Thuộc tính allow trong iframe sẽ ghi đè mọi tiêu đề Accept-CH mà widget.site có thể tự gửi, vì vậy, hãy đảm bảo bạn đã chỉ định mọi tiêu đề mà trang web của iframe đó sẽ cần.

Chiến lược: Gợi ý phía máy chủ linh động

Nếu có các phần cụ thể trong hành trình của người dùng mà bạn cần nhiều lựa chọn gợi ý hơn so với phần còn lại của trang web, thì bạn có thể chọn yêu cầu các gợi ý đó theo yêu cầu thay vì tĩnh trên toàn bộ trang web. Việc quản lý này phức tạp hơn, nhưng nếu bạn đã đặt nhiều tiêu đề trên mỗi tuyến đường thì việc này có thể thực hiện được.

Điều quan trọng cần nhớ ở đây là mỗi phiên bản của tiêu đề Accept-CH sẽ ghi đè hiệu quả tập hợp hiện có. Vì vậy, nếu bạn đang đặt tiêu đề một cách linh động thì mỗi trang phải yêu cầu bộ gợi ý đầy đủ cần thiết.

Ví dụ: có thể có một phần trên trang web mà bạn muốn cung cấp các biểu tượng và chế độ điều khiển phù hợp với hệ điều hành của người dùng. Để làm được điều này, bạn nên lấy thêm Sec-CH-UA-Platform-Version để phân phát các tài nguyên phụ thích hợp.

🎂️ Tiêu đề phản hồi cho /blog

Accept-CH: Sec-CH-UA-Mobile, Sec-CH-UA-Platform, Sec-CH-UA

🎂️ Tiêu đề phản hồi cho /app

Accept-CH: Sec-CH-UA-Mobile, Sec-CH-UA-Platform, Sec-CH-UA-Platform-Version, Sec-CH-UA

Chiến lược: Cần có gợi ý từ phía máy chủ khi có yêu cầu đầu tiên

Có thể có những trường hợp bạn yêu cầu nhiều hơn bộ gợi ý mặc định trong yêu cầu đầu tiên. Tuy nhiên, điều này có thể hiếm khi xảy ra, vì vậy, hãy đảm bảo bạn đã xem lại lý do.

Yêu cầu đầu tiên thực sự là yêu cầu cấp cao nhất đầu tiên cho nguồn gốc đó được gửi trong phiên duyệt web đó. Bộ gợi ý mặc định bao gồm tên trình duyệt với phiên bản lớn, nền tảng và chỉ báo trên thiết bị di động. Vậy câu hỏi cần đặt ra ở đây là bạn có cần dữ liệu mở rộng trong lần tải trang đầu tiên không?

Có 2 gợi ý cho yêu cầu đầu tiên. Trước tiên, bạn có thể sử dụng tiêu đề Critical-CH. Phương thức này có cùng định dạng như Accept-CH nhưng cho trình duyệt biết rằng nên thử lại yêu cầu ngay lập tức nếu yêu cầu đầu tiên được gửi mà không có gợi ý quan trọng.

⬆️ Yêu cầu ban đầu

[With default headers]

🎂️ Tiêu đề phản hồi

Accept-CH: Sec-CH-UA-Model
Critical-CH: Sec-CH-UA-Model

🔃 Trình duyệt thử lại yêu cầu ban đầu với tiêu đề bổ sung

[With default headers + …]
Sec-CH-UA-Model: Pixel 5

Điều này sẽ làm phát sinh chi phí thử lại ở yêu cầu đầu tiên, nhưng chi phí triển khai tương đối thấp. Hãy gửi thêm tiêu đề và trình duyệt sẽ làm phần còn lại.

Trong những trường hợp mà bạn thực sự cần thêm gợi ý trong lần tải trang đầu tiên, đề xuất độ tin cậy của Gợi ý ứng dụng sẽ đưa ra một tuyến để chỉ định gợi ý trong chế độ cài đặt cấp kết nối. Tính năng này tận dụng tiện ích Application-Layer Protocol Settings (Cài đặt giao thức lớp ứng dụng – ALPS) cho TLS 1.3 (Bảo mật tầng truyền tải) để cho phép việc chuyển sớm gợi ý trên các kết nối HTTP/2 và HTTP/3. Đây vẫn chỉ mới ở giai đoạn đầu, nhưng nếu bạn chủ động quản lý các chế độ cài đặt TLS và kết nối của riêng mình thì đây là thời điểm lý tưởng để đóng góp.

Chiến lược: Hỗ trợ phiên bản cũ

Có thể bạn có mã cũ hoặc mã của bên thứ ba trên trang web phụ thuộc vào navigator.userAgent, bao gồm cả các phần của chuỗi tác nhân người dùng sẽ được giảm bớt. Về lâu dài, bạn nên lập kế hoạch chuyển sang các lệnh gọi navigator.userAgentData tương đương, nhưng vẫn có giải pháp tạm thời.

UA-CH Retrofill là một thư viện nhỏ cho phép bạn ghi đè navigator.userAgent bằng một chuỗi mới được tạo từ các giá trị navigator.userAgentData được yêu cầu.

Ví dụ: mã này sẽ tạo một chuỗi tác nhân người dùng có thêm gợi ý "model":

import { overrideUserAgentUsingClientHints } from './uach-retrofill.js';
overrideUserAgentUsingClientHints(['model'])
  .then(() => { console.log(navigator.userAgent); });

Chuỗi kết quả sẽ cho thấy mô hình Pixel 5, nhưng vẫn cho thấy 92.0.0.0 rút gọn do không yêu cầu gợi ý uaFullVersion:

Mozilla/5.0 (Linux; Android 10.0; Pixel 5) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/92.0.0.0 Mobile Safari/537.36

Hỗ trợ thêm

Nếu những chiến lược này không phù hợp với trường hợp sử dụng của bạn, vui lòng bắt đầu Thảo luận trong kho lưu trữ privacy-sandbox-dev-support và chúng ta có thể cùng bạn tìm hiểu vấn đề.

Ảnh chụp của Ricardo Rocha trên Unsplash