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 trình duyệt, cũng như rất khó xử lý. Tuy nhiên, có tất cả các 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 điều cần thiết là cần có một 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 kiểm tra quyền truy cập của bạn 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ư với 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 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 dữ liệu tác nhân người dùng có đang được sử dụng hay không hoặc ở đâu, hãy cân nhắc tìm kiếm mã giao diện người dùng của bạn để 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 của mình để 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ừ quan điểm chức năng, hãy nghĩ đến vị trí bất kỳ trong mã nơi bạn đang ghi 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
  • Kiểu hoặc nhà sản xuất 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 liệu chúng có đang cập nhật để hỗ trợ 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 cơ bản cho tác nhân người dùng 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 thông số kỹ thuật và sẽ sớm được phản ánh trong Chrome cũng như các trình duyệt khác dựa trên Chromium.

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ụ: chuỗi sẽ bao gồm Chrome/90.0.0.0 thay vì Chrome/90.0.4430.85.

Nếu bạn chỉ kiểm tra chuỗi tác nhân người dùng cho tên trình duyệt, phiên bản lớn hoặc hệ điều hành, thì mã của bạn sẽ tiếp tục hoạt động mặc dù bạn có thể 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 Gợi ý ứng dụng tác nhân người dùng, nhưng có thể bạn sẽ có các hạn chế về tài nguyên hoặc mã cũ ngăn chặn điều này. Việc giảm thiểu 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 mã này vẫn sẽ giữ lại 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 mà 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 vào tệp đó dưới dạng mảng hoặc dùng lệnh gọi some() để kiểm tra xem có mục nhập cụ thể nào 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 chi tiết hơn, có entropy cao 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 quy trình xử lý phía máy khách. API JavaScript không yêu cầu 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 giá trị tác nhân người dùng bất cứ lúc nào.

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

Nếu đang sử dụng tiêu đề của 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 ý về ứng dụng mong muốn làm tập hợp tĩnh trong các phản hồi. Đây là một phương pháp tương đối đơn giản vì thường bạn chỉ cần định cấu hình cho nó ở một vị trí. Ví dụ: lỗi này có thể nằm trong cấu hình máy chủ web của bạn 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 mà bạn sử dụng cho trang web.

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 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 thứ mình cần, ngay cả khi thông tin đó thường được cung cấp theo mặc định.

Ví dụ: các chế độ mặc định hiện tại của Chrome sẽ được thể hiện 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, thì 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ý việc 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 đó dự phòng đến phân tích cú pháp tiêu đề User-Agent nếu không có.

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

Nếu đang yêu cầu các tài nguyên phụ trên nhiều nguồn gốc hoặc nhiều trang web đòi hỏi phải gửi Gợi ý về ứng dụng tác nhân người dùng theo yêu cầu của họ, thì bạn cần chỉ định rõ ràng các gợi ý mong muốn thông qua 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 tiêu đề Permissions-Policy. Danh sách các gợi ý được kiểm soát bởi chính sách có trong bản nháp cơ sở hạ tầng Gợi ý về ứng dụng

⬇️ Câu trả lời của 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 về 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ỉ trong dải ô ch-ua:

⬇️ Phản hồi của blog.site uỷ quyền nhiều gợi ý cho nhiều nguồn 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: Uỷ quyền gợi ý cho iframe

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

⬇️ Câu trả lờ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 thứ mà trang web iframe sẽ cần.

Chiến lược: Gợi ý phía máy chủ độ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, bạn có thể chọn yêu cầu các gợi ý đó theo yêu cầu thay vì theo cách tĩnh trên toàn bộ trang web. Việc quản lý này sẽ phức tạp hơn, nhưng nếu bạn đã đặt các tiêu đề khác nhau cho mỗi tuyến đường thì có thể thực hiện được.

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

Ví dụ: bạn có thể có một phần trên trang web nơi bạn muốn cung cấp các biểu tượng và quyền kiểm soát phù hợp với hệ điều hành của người dùng. Do đó, bạn nên kéo 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 ý phía máy chủ ở 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 rất 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ự có nghĩa 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 có phiên bản lớn, nền tảng và chỉ báo cho thiết bị di động. Vậy câu hỏi đặt ra ở đây là bạn có yêu cầu dữ liệu mở rộng trong lần tải trang đầu tiên không?

Để có thêm gợi ý trong yêu cầu đầu tiên, có 2 lựa chọn. Trước tiên, bạn có thể sử dụng tiêu đề Critical-CH. Phương thức này có định dạng giố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 sẽ thử lại yêu cầu ban đầu với tiêu đề bổ sung

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

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

Đối với những tình huống mà bạn thực sự đòi hỏi phải có thêm gợi ý khi tải trang đầu tiên, đề xuất về Độ tin cậy của gợi ý cho ứ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. Việc này tận dụng tiện ích Cài đặt giao thức lớp ứng dụng(ALPS) sang TLS 1.3 để cho phép truyền gợi ý sớm trên các kết nối HTTP/2 và HTTP/3. Đây vẫn còn ở giai đoạn đầu, nhưng nếu bạn chủ động quản lý chế độ cài đặt kết nối và TLS 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ợ 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ẽ bị rút gọn. Về lâu dài, bạn nên lên kế hoạch chuyển sang các lệnh gọi navigator.userAgentData tương đương. Tuy nhiên, sẽ có một giải pháp tạm thời.

UA-CH Refill 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ó bao gồm thêm gợi ý "mô hình":

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 đã giảm bớt vì gợi ý uaFullVersion không được yêu cầu:

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 các chiến lược này không bao gồm trường hợp sử dụng của bạn, hãy bắt đầu một Thảo luận trong kho lưu trữ privacy-sandbox-dev-support và chúng ta có thể cùng bạn khám phá vấn đề.

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