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 bộ tiêu đề gợi ý ứng dụng cho phép các trang web lấy lựa chọn ưu tiên về nội dung đa phương tiện của người dùng 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

Các 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 nghe nhìn ưu tiên của người dùng như prefers-color-scheme hoặc prefers-reduced-motion có thể có ảnh hưởng đáng kể đến số lượng CSS cần phân phối trên một trang và đến trải nghiệm mà người dùng sẽ có khi tải trang.

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 khác mà người dùng ưu tiên. Tốt nhất là bạn không nên tải CSS cho bảng phối màu cụ thể không phù hợp trong đường dẫn hiển thị 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, những trang web có lưu lượng truy cập cao như Google Tìm kiếm và muốn tôn trọng các tính năng nghe nhìn ưu tiên của người dùng như prefers-color-scheme và CSS cùng dòng đó vì lý do hiệu suất, bạn cần biết về bảng phối màu ưu tiên (hoặc các tính năng nội dung nghe nhìn khác do người dùng ưu tiên) tại thời điểm yêu cầu để tải trọng HTML ban đầu đã có CSS phù hợp cùng dòng.

Ngoài ra, và dành riêng cho prefers-color-scheme, các trang web luôn muốn tránh giao diện màu không chính xác.

Tiêu đề gợi ý của ứng dụng Sec-CH-Prefers-Color-Scheme và Sec-CH-Prefers-Reduced-Motion là tiêu đề đầu tiên trong chuỗi tiêu đề gợi ý ứng dụng cho 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 nhằm giải quyết vấn đề này.

Nền trên gợi ý của ứng dụng

Gợi ý ứng dụng HTTP xác định một tiêu đề phản hồi Accept-CH mà các máy chủ có thể dùng để quảng cáo việc sử dụng tiêu đề yêu cầu để chủ động thương lượng nội dung, thường được gọi là gợi ý ứng dụng. Đề xuất Tiêu đề về ứng dụng 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 xác định một tập hợp các gợi ý của ứng dụng nhằm truyền tải các tính năng nội dung nghe nhìn mà người dùng ưu tiên. Các gợi ý ứng dụng này được đặt tên theo tính năng đa phương tiện theo lựa chọn ưu tiên của người dùng tương ứng mà chúng báo cáo. Ví dụ: bảng phối màu hiện đang được ưa thích 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 rõ ràng.

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

Các gợi ý ứng dụng được đề xuất trong Tiêu đề Gợi ý ứng dụng có tính năng sử dụng nội dung đa phương tiện của người dùng có lẽ sẽ được dùng nhiều nhất làm Gợi ý quan trọng của ứng dụng. Các Gợi ý ứng dụng quan trọng là các Gợi ý ứng dụng có tác dụng thay đổi tài nguyên kết quả. Một tài nguyên như vậy phải được tìm nạp một cách nhất quán qua các lần tải trang (bao gồm cả lần tải trang initial) để tránh gây khó chịu cho người dùng khi họ chuyển đổi.

Cú pháp gợi ý của ứ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 ý của ứng dụng khách đượ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ải rằng người dùng ưu tiên giao diện tối và giảm chuyển động, gợi ý của ứng dụng sẽ trông 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 ý về ứng dụng ở trên là @media (prefers-color-scheme: dark) {} và @media (prefers-reduced-motion: reduce) {} lần lượt.

Hoàn thành danh sách các gợi ý ứng dụng

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

Gợi ý ứ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 ý của ứng dụng Sec-CH-Prefers-Color-Scheme được hỗ trợ trên Chromium 93. Tiêu đề gợi ý của ứng dụng Sec-CH-Prefers-Reduced-Motion được hỗ trợ trên Chromium 108. 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 xem bản minh hoạ trong Chromium 93 và chú ý cách CSS cùng dòng thay đổi theo bảng phối màu ưu tiên của người dùng.

Sec-CH-Prefers-Color-Scheme: tối

Sec-CH-Prefers-Color-Scheme: ánh sáng

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

Hãy xem thử bản minh hoạ trong Chromium 108 và chú ý cách CSS cùng dòng 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, thông báo cho ứng dụng thông qua Accept-CH rằng ứng dụng chấp nhận Sec-CH-Prefers-Color-Scheme và Gợi ý ứng dụng Sec-CH-Prefers-Contrast, trong đó theo Critical-CH, máy chủ coi Sec-CH-Prefers-Color-Scheme là Gợi ý ứng dụng quan trọng và thay đổi phản hồi khi đượ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 và thông báo cho máy chủ qua Sec-CH-Prefers-Color-Scheme rằng yêu cầu này được người dùng ưu tiên đối với 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 theo lựa chọn ưu tiên của ứng dụng sao cho phù hợp và chẳng hạn như chèn CSS chịu trách nhiệm về giao diện tối vào 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 việc xử lý tiêu đề gợi ý của ứng dụng Sec-CH-Prefers-Color-Scheme trong thực tế. Mã này là nội dung hỗ trợ bản 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 ý về ứng dụng khách 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 dựa trên 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 nền tảng web mạnh mẽ, 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 cân nhắc về bảo mật của Gợi ý ứng dụng HTTP và Các cân nhắc bảo mật về Độ 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

Xác nhận

Cảm ơn bạn rất nhiều về những ý kiến phản hồi và lời khuyên có giá trị của Yoav lãi. Hình ảnh chính của Tdadamemd trên Wikimedia Commons.