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.

François Beaufort
François Beaufort
GitHub
Thomas Steiner

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-Scheme và Sec-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 ý cho ứ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 việc đàm phán nội dung chủ động, thường được gọi là gợi ý cho ứng dụng. Đề 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 đượ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 tên phù hợp.

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

Các gợi ý ứng dụng được đề xuất trong 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 có thể được sử dụng phổ biến nhất dưới dạng Gợi ý ứng dụng quan trọ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 nội dung nghe nhìn theo lựa chọn ưu tiên của người dùng bao gồm một tên (chẳng hạn như prefers-reduced-motion) và các giá trị được cho phép (chẳng hạn như no-preference hoặc reduce). Mỗi trường tiêu đề gợi ý của ứ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à một 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"

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

Danh sách đầy đủ các gợi ý cho ứ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 nghe nhìn tương ứng theo lựa chọn ưu tiên của người dù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à WebKit và Mozilla, đang chờ xử lý.

Bản minh hoạ 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. Ứng dụng gửi 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 Sec-CH-Prefers-Color-Scheme và Gợi ý cho ứng dụng khách Sec-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 thay đổi phản hồi như được 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 đề gợi ý ứng dụng về tính năng đ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 được xác định trong phần 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à tính 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 Yoav Weiss đã dành thời gian chia sẻ ý kiến phản hồi và lời khuyên hữu ích. Hình ảnh chính của Tdadamemd trên Wikimedia Commons.