Lựa chọn ưu tiên về nội dung đa phương tiện của người dùng có tiêu đề gợi ý của ứng dụng

Một nhóm tiêu đề gợi ý của ứng dụng cho phép các trang web thu thập lựa chọn ưu tiên về nội dung nghe nhìn của người dùng (không bắt buộc) tại thời điểm yêu cầu, cho phép máy chủ nội tuyến CSS phù hợp vì lý do hiệu suất.

Truy vấn nội dung đa phương tiện CSS, và cụ thể là các tính năng nội dung đa phương tiện theo lựa chọn ưu tiên của người dùng như prefers-color-scheme hoặc prefers-reduced-motion, có thể ảnh hưởng đáng kể đến lượng CSS mà một trang cần phân phối và đến trải nghiệm mà người dùng sẽ có được khi trang tải.

Tập trung vào prefers-color-scheme – nhưng nhấn mạnh rằng lý do này cũng áp dụng cho các tính năng đa phương tiện ưu tiên khác của người dùng – tốt nhất là bạn không nên tải CSS cho một bảng phối màu cụ thể không khớp trong đường dẫn kết xuất quan trọng, mà thay vào đó, ban đầu chỉ tải CSS hiện có liên quan. Một cách để thực hiện việc này là thông qua <link media>.

Tuy nhiên, các trang web có lưu lượng truy cập cao như Google Tìm kiếm muốn tuân thủ các tính năng đa phương tiện ưu tiên của người dùng như prefers-color-scheme và CSS nội tuyến vì lý do hiệu suất, cần biết về bảng phối màu ưu tiên (hoặc các tính năng đa phương tiện ưu tiên khác của người dùng tương ứng) lý tưởng là tại thời điểm yêu cầu, để tải trọng HTML ban đầu đã có CSS phù hợp được nội tuyến.

Ngoài ra, và đặc biệt là đối với prefers-color-scheme, các trang web bằng mọi cách đều muốn tránh hiện tượng nhấp nháy giao diện màu không chính xác.

Tiêu đề gợi ý ứng dụng Sec-CH-Prefers-Color-SchemeSec-CH-Prefers-Reduced-Motion là tiêu đề đầu tiên trong một loạt tiêu đề gợi ý ứng dụng về các tính năng nội dung nghe nhìn theo lựa chọn ưu tiên của người dùng nhằm giải quyết vấn đề này.

Thông tin cơ bản về gợi ý cho ứng dụng

Gợi ý ứng dụng HTTP xác định tiêu đề phản hồi Accept-CH mà máy chủ có thể sử dụng để quảng cáo việc sử dụng tiêu đề yêu cầu cho quá trình thương lượng nội dung chủ động, thông thường được gọi là gợi ý ứng dụng khách. Đề xuất Tiêu đề gợi ý ứng dụng về tính năng nội dung nghe nhìn theo lựa chọn ưu tiên của người dùng xác định một tập hợp gợi ý ứng dụng nhằm truyền đạt các tính năng nội dung nghe nhìn theo lựa chọn ưu tiên của người dùng. Các gợi ý này cho ứng dụng được đặt tên theo tính năng nội dung nghe nhìn tương ứng theo lựa chọn ưu tiên của người dùng mà chúng báo cáo. Ví dụ: bảng phối màu hiện đang được ưu tiên theo prefers-color-scheme được báo cáo thông qua gợi ý ứng dụng Sec-CH-Prefers-Color-Scheme có tên thích hợp.

Thông tin cơ bản về các gợi ý quan trọng của ứng dụng

Gợi ý ứng dụng khách được đề xuất trong Tiêu đề Gợi ý của ứng dụng có tính năng về nội dung đa phương tiện theo lựa chọn ưu tiên của người dùng có lẽ sẽ thường được dùng nhất làm Gợi ý quan trọng về ứng dụng. Gợi ý quan trọng cho ứng dụng là những Gợi ý cho ứng dụng thay đổi đáng kể tài nguyên thu được. Bạn nên tìm nạp tài nguyên như vậy một cách nhất quán trên các lượt tải trang (bao gồm cả lượt tải trang đầu tiên) để tránh các nút chuyển mà người dùng nhìn thấy bị giật.

Cú pháp gợi ý ứng dụng

Các tính năng đa phương tiện theo lựa chọn ưu tiên của người dùng bao gồm tên (như prefers-reduced-motion) và các giá trị được phép (như no-preference hoặc reduce). Mỗi trường tiêu đề gợi ý ứng dụng được biểu thị dưới dạng đối tượng Tiêu đề có cấu trúc cho HTTP chứa một mục có giá trị là chuỗi. Ví dụ: để truyền đạt rằng người dùng thích giao diện tối và giảm chuyển động, gợi ý của ứng dụng sẽ giống như trong ví dụ dưới đây.

GET / HTTP/2
Host: example.com
Sec-CH-Prefers-Color-Scheme: "dark"
Sec-CH-Prefers-Reduced-Motion: "reduce"

Thông tin CSS tương đương với thông tin được truyền tải trong gợi ý ứng dụng ở trên lần lượt là @media (prefers-color-scheme: dark) {}@media (prefers-reduced-motion: reduce) {}.

Danh sách đầy đủ các gợi ý về ứng dụng

Danh sách gợi ý cho ứng dụng được mô hình hoá theo các tính năng nội dung nghe nhìn theo lựa chọn ưu tiên của người dùng trong Truy vấn nội dung nghe nhìn cấp 5.

Gợi ý cho ứng dụng Giá trị được phép Tính năng nội dung đa phương tiện theo lựa chọn ưu tiên của người dùng tương ứng
Sec-CH-Prefers-Reduced-Motion no-preference, reduce prefers-reduced-motion
Sec-CH-Prefers-Reduced-Transparency no-preference, reduce prefers-reduced-transparency
Sec-CH-Prefers-Contrast no-preference, less, more, custom prefers-contrast
Sec-CH-Forced-Colors active, none forced-colors
Sec-CH-Prefers-Color-Scheme light, dark prefers-color-scheme
Sec-CH-Prefers-Reduced-Data no-preference, reduce prefers-reduced-data

Hỗ trợ trình duyệt

Tiêu đề gợi ý ứng dụng Sec-CH-Prefers-Color-Scheme được hỗ trợ trên Chromium 93. Tiêu đề gợi ý ứng dụng Sec-CH-Prefers-Reduced-Motion được hỗ trợ trên Chromium 108. Ý kiến phản hồi của các nhà cung cấp khác, cụ thể là WebKitMozilla, đang chờ xử lý.

Bản minh hoạ về Sec-CH-Prefers-Color-Scheme

Hãy thử bản minh hoạ trong Chromium 93 và lưu ý cách CSS nội tuyến thay đổi theo bảng phối màu mà người dùng ưu tiên.

Sec-CH-Prefers-Color-Scheme: dark

Sec-CH-Prefers-Color-Scheme: light

Bản minh hoạ Sec-CH-Prefers-Reduced-Motion

Hãy thử bản minh hoạ trong Chromium 108 và lưu ý cách CSS nội tuyến thay đổi theo lựa chọn ưu tiên về chuyển động của người dùng.

Cách hoạt động

  1. Máy khách gửi một yêu cầu ban đầu đến máy chủ. bash GET / HTTP/2 Host: example.com
  2. Máy chủ phản hồi, cho ứng dụng khách biết thông qua Accept-CH rằng máy chủ chấp nhận gợi ý cho ứng dụng khách Sec-CH-Prefers-Color-SchemeSec-CH-Prefers-Contrast, trong đó theo Critical-CH, máy chủ coi Sec-CH-Prefers-Color-Scheme là một gợi ý quan trọng cho ứng dụng khách, cũng như thay đổi phản hồi theo thông tin do Vary truyền tải. bash HTTP/2 200 OK Content-Type: text/html Accept-CH: Sec-CH-Prefers-Color-Scheme, Sec-CH-Prefers-Contrast Vary: Sec-CH-Prefers-Color-Scheme Critical-CH: Sec-CH-Prefers-Color-Scheme
  3. Sau đó, ứng dụng sẽ thử lại yêu cầu, thông báo cho máy chủ thông qua Sec-CH-Prefers-Color-Scheme rằng ứng dụng có lựa chọn ưu tiên của người dùng về nội dung có giao diện tối.bash GET / HTTP/2 Host: example.com Sec-CH-Prefers-Color-Scheme: "dark"
  4. Sau đó, máy chủ có thể điều chỉnh phản hồi cho phù hợp với lựa chọn ưu tiên của ứng dụng khách, chẳng hạn như đưa CSS chịu trách nhiệm về giao diện tối vào phần nội dung phản hồi.

Ví dụ về Node.js

Ví dụ về Node.js bên dưới, được viết cho khung Express.js phổ biến, cho thấy cách xử lý tiêu đề gợi ý ứng dụng Sec-CH-Prefers-Color-Scheme trong thực tế. Mã này thực sự là nguồn cung cấp cho màn hình minh hoạ ở trên.

app.get("/", (req, res) => {
  // Tell the client the server accepts the `Sec-CH-Prefers-Color-Scheme` client hint…
  res.set("Accept-CH", "Sec-CH-Prefers-Color-Scheme");
  // …and that the server's response will vary based on its value…
  res.set("Vary", "Sec-CH-Prefers-Color-Scheme");
  // …and that the server considers this client hint a _critical_ client hint.
  res.set("Critical-CH", "Sec-CH-Prefers-Color-Scheme");
  // Read the user's preferred color scheme from the headers…
  const prefersColorScheme = req.get("sec-ch-prefers-color-scheme");
  // …and send the adequate HTML response with the right CSS inlined.
  res.send(getHTML(prefersColorScheme));
});

Những điều cần cân nhắc về quyền riêng tư và bảo mật

Nhóm Chromium đã thiết kế và triển khai tiêu đề Client Hints của các tính năng về nội dung đa phương tiện theo lựa chọn ưu tiên của người dùng bằng cách sử dụng các nguyên tắc cốt lõi nêu trong bài viết Kiểm soát quyền truy cập vào các tính năng mạnh mẽ của nền tảng web, bao gồm cả quyền kiểm soát của người dùng, tính minh bạch và công thái học.

Các điểm cần cân nhắc về bảo mật của Gợi ý ứng dụng HTTP và Các điểm cần cân nhắc về bảo mật của Độ tin cậy của gợi ý ứng dụng cũng áp dụng cho đề xuất này.

Tài liệu tham khảo

Lời cảm ơn

Cảm ơn bạn đã đóng góp ý kiến phản hồi và lời khuyên có giá trị của Yoav Weiss. Hình ảnh chính của Tdadamemd trên Wikimedia Commons.