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

Tác nhân người dùng string là tạo vân tay số thụ động đáng kể Surface trong trình duyệt, như cũng khó xử lý. Tuy nhiên, có tất cả các loại lý do 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à một đường dẫn đến 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ả hai 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 trong một đị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 vào dữ liệu tác nhân người dùng và di chuyển cách 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 tìm hiểu lý do mình thực hiện đang thu thập hình ảnh đó. Bước đầu tiên, bất kể bạn có thực hiện bất kỳ hành động nào, 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 hoặc ở đâu, hãy cân nhắc việc tìm kiếm mã giao diện người dùng để sử dụng navigator.userAgent và mã phụ trợ cho việc 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ã 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 lên hỗ trợ Gợi ý ứng dụng tác nhân người dù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
    • Lưu ý rằng thay đổi này đã được cập nhật trong quy cách và sẽ được phản ánh trong Chrome và 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ụ: thay vì Chrome/90.0.4430.85 thì 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 cho tên trình duyệt, phiên bản chính, 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ó khả năng để xem 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 vẫn có mã hoặc tài nguyên hạn chế 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 mặc dù mã hiện tại sẽ nhận thông tin ít chi tiết hơn, mã này vẫn sẽ giữ nguyên 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 hiện đang sử dụng navigator.userAgent bạn nên chuyển sang thích 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ó brand và version những thuộc tính nơi trình duyệt có thể liệt kê khả năng tương thích với thương hiệu khác. Bạn có thể truy cập trực tiếp dưới dạng mảng hoặc bạn có thể sử dụng Lệnh gọi some() để kiểm tra xem có một mục nhập cụ thể 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 bạn 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 sẽ cần chỉ định giá trị này 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ừ từ quy trình xử lý phía máy chủ sang xử lý phía máy khách. JavaScript API không đòi hỏi quyền truy cập vào các tiêu đề của yêu cầu HTTP, nên các giá trị tác nhân người dùng có thể được yêu cầu tại bất kỳ điểm nào.

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

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

Cân nhắc sử dụng chiến lược này nếu bạn đang chuyển đổi hoặc tuỳ chỉnh câu trả lờ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ách khác có thể chọn cung cấp các gợi ý mặc định khác nhau, vì vậy chỉ định mọi thứ bạn cần, ngay cả khi thông tin đó thường được cung cấp bởi 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 được mẫu thiết bị trong phản hồi, thì bạ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 phải kiểm tra xem Tiêu đề Sec-CH-UA đã được gửi rồi dự phòng đến tiêu đề User-Agent phân tích cú pháp nếu không có dữ liệu.

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 bạn đ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 cần đến Gợi ý ứng dụng tác nhân người dùng để được gửi theo yêu cầu của họ, sau đó bạn sẽ cần phải chỉ định rõ ràng gợi ý mong muốn bằng Chính sách quyền.

Ví dụ: giả sử https://blog.site lưu trữ 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 phải uỷ quyền rõ ràng cho https://cdn.site bằng Permissions-Policy . Danh sách các gợi ý được kiểm soát bởi chính sách có trong Gợi ý về ứng dụng khách Cơ sở hạ tầng bản nháp

⬇️ 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 chỉ định gợi ý bạn 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 widget.site có thể tự gửi, vì vậy, hãy đảm bảo bạn đã chỉ định mọi thứ trang web iframe này sẽ cần.

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

Nếu có những giai đoạn cụ thể trong hành trình của người dùng mà bạn cần có nhiều lựa chọn hơ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ì cố định trên toàn bộ trang web. Quy trình này 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ể khả thi.

Điều quan trọng cần nhớ ở đây là mỗi thực thể của 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 chủ động khi đặt tiêu đề thì mỗi trang phải yêu cầu tập hợp gợi ý đầy đủ cần thiết.

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

⬇️ 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 trên là yêu cầu đầu tiên của bạn. Tuy nhiên, trường hợp 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 trình duyệt tên với 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 câu hỏi ở đâ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ó 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ể hãy sử dụng tiêu đề Critical-CH. Tệp này có cùng định dạng với Accept-CH nhưng báo 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 lần đầu tiên một email đượ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. Gửi tiêu đề bổ sung và trình duyệt sẽ làm phần việc còn lại.

Đối với những tình huống mà bạn thực sự cần phải có thêm gợi ý về trang đầu tiên tải, Độ tin cậy gợi ý của ứng dụng khách đề xuất đang tạo một tuyến để chỉ định gợi ý trong phần cài đặt cấp độ kết nối. Chiến dịch này sử dụng Giao thức lớp ứng dụng Tiện ích Settings(ALPS) sang TLS 1.3 để cho phép việc chuyển gợi ý sớm này trên các kết nối HTTP/2 và HTTP/3. Chiến dịch này vẫn đang ở giai đoạn rất sớm, nhưng nếu bạn chủ động quản lý TLS và 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 mà phụ thuộc vào navigator.userAgent, bao gồm các phần của chuỗi tác nhân người dùng sẽ đã giảm. Về lâu dài, bạn nên có kế hoạch chuyển sang phương pháp tương đương navigator.userAgentData, nhưng có một giải pháp tạm thời.

UA-CH Refill là một giải pháp nhỏ cho phép bạn ghi đè navigator.userAgent bằng một chuỗi mới 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 bổ sung có chứa thuộc tính "mô hình" gợi ý:

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

Chuỗi thu được sẽ cho thấy mô hình Pixel 5 nhưng vẫn cho thấy mô hình bị giảm 92.0.0.0 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ợ khác

Nếu những 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 Thảo luận trong privacy-sandbox-dev-support kho lưu trữ và chúng ta có thể cùng bạn khám phá vấn đề của mình.

Ảnh của Ricardo Rocha trên Unsplash