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.
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ọngSec-CH-UA-Mobile
: giá trị boolean cho biết thiết bị di độngSec-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