Tính năng mới trong Chrome 107

Adriana Jara

Dưới đây là những gì bạn cần phải biết:

Tôi là Adriana Jara. Hãy cùng tìm hiểu những tính năng mới dành cho nhà phát triển trong Chrome 107.

Các thuộc tính mới trong API Chụp ảnh màn hình

Trong phiên bản này, Screen Capture API thêm các thuộc tính mới để cải thiện trải nghiệm chia sẻ màn hình.

DisplayMediaStreamOptions đã thêm thuộc tính selfBrowserSurface. Với gợi ý này, ứng dụng có thể cho trình duyệt biết rằng khi gọi getDisplayMedia(), thẻ hiện tại sẽ bị loại trừ.

// Exclude the streaming tab
const options = {
  selfBrowserSurface: 'exclude',
};
const stream = await navigator
                    .mediaDevices
                    .getDisplayMedia(options);

Tính năng này giúp ngăn chặn việc vô tình tự chụp ảnh và tránh hiệu ứng "Ngôi nhà gương" mà chúng ta thường thấy trong các hội nghị truyền hình.

DisplayMediaStreamOptions hiện cũng có thuộc tính surfaceSwitching. Tài sản này thêm một tuỳ chọn để kiểm soát theo phương thức lập trình xem Chrome có hiển thị nút chuyển đổi thẻ trong khi chia sẻ màn hình hay không. Các tuỳ chọn này sẽ được truyền đếngetDisplayMedia(). Nút Share this tab instead cho phép người dùng chuyển sang một thẻ mới mà không cần quay lại thẻ hội nghị video hoặc chọn trong danh sách dài các thẻ, nhưng hành vi này được hiển thị có điều kiện trong trường hợp ứng dụng web không xử lý hành vi đó.

// Show the switch to this tab button
const options = {
  surfaceSwitching: 'include',
};
const stream = await navigator
                    .mediaDevices
                    .getDisplayMedia(options);

Ngoài ra, MediaTrackConstraintSet sẽ thêm thuộc tính displaySurface. Khi getDisplayMedia() được gọi, trình duyệt sẽ cung cấp cho người dùng lựa chọn về các nền tảng hiển thị: thẻ, cửa sổ hoặc màn hình. Khi sử dụng quy tắc ràng buộc displaySurface, ứng dụng web giờ đây có thể gợi ý cho trình duyệt nếu muốn một trong các loại nền tảng được cung cấp nổi bật hơn.

Ví dụ: tính năng này có thể giúp ngăn việc chia sẻ quá nhiều do vô tình vì chế độ mặc định có thể là chia sẻ một thẻ. Ảnh chụp màn hình về lời nhắc của bộ chọn nội dung nghe nhìn cũ và mới.

Xác định tài nguyên chặn hiển thị

Thông tin chi tiết đáng tin cậy về hiệu suất của trang là yếu tố quan trọng để nhà phát triển xây dựng trải nghiệm nhanh chóng cho người dùng. Cho đến nay, nhà phát triển đã dựa vào các phương pháp phỏng đoán phức tạp để xác định xem một tài nguyên có đang chặn hiển thị hay không.

Giờ đây, Performance API bao gồm thuộc tính renderBlockingStatus. Thuộc tính này cung cấp tín hiệu trực tiếp từ trình duyệt để xác định những tài nguyên ngăn trang của bạn hiển thị, cho đến khi tài nguyên được tải xuống.

Đoạn mã ở đây cho biết cách lấy danh sách tất cả tài nguyên và sử dụng thuộc tính renderBlockingStatus mới để liệt kê tất cả tài nguyên đang chặn chế độ hiển thị.

// Get all resources
const res = window.performance.getEntriesByType('resource');

// Filter to get only the blocking ones
const blocking =   res.filter(({renderBlockingStatus}) =>
      renderBlockingStatus === 'blocking');

Việc tối ưu hoá cách tải tài nguyên sẽ giúp cải thiện Chỉ số quan trọng chính của trang web và mang lại trải nghiệm tốt hơn cho người dùng. Hãy xem tài liệu của MDN để tìm hiểu thêm về Performance API, tìm những tài nguyên chặn kết xuất và tối ưu hoá chúng.

Bản dùng thử theo nguyên gốc PendingBeacon API

PendingBeacon API mang tính khai báo cho phép trình duyệt kiểm soát thời điểm gửi beacon.

beacon là một gói dữ liệu được gửi đến máy chủ phụ trợ mà không mong đợi một phản hồi cụ thể.

Các ứng dụng thường muốn gửi các beacon này khi người dùng kết thúc lượt truy cập, nhưng không có thời điểm nào phù hợp để thực hiện lệnh gọi "gửi" đó. API này uỷ quyền gửi cho chính trình duyệt để có thể hỗ trợ beacon trên page unload hoặc trên page hide mà nhà phát triển không cần phải triển khai lệnh gửi vào đúng thời điểm.

Đăng ký dùng thử phiên bản gốc, dùng thử API và vui lòng gửi ý kiến phản hồi cho chúng tôi để cải thiện các trường hợp sử dụng.

Và nhiều tính năng khác!

Tất nhiên là còn nhiều tính năng khác nữa.

  • Tiêu đề http expect-ct không còn được dùng nữa.
  • Thuộc tính rel hiện được hỗ trợ trên các phần tử <form>.
  • Lần trước, tôi đã đề cập đến phép nội suy grid-template, lần này bạn nên thêm phép nội suy này.

Tài liệu đọc thêm

Bài viết này chỉ đề cập đến một số điểm nổi bật chính. Hãy truy cập các đường liên kết bên dưới để biết các thay đổi khác trong Chrome 107.

Đăng ký

Để luôn nắm bắt thông tin mới nhất, hãy đăng ký kênh YouTube dành cho nhà phát triển Chrome. Bạn sẽ nhận được thông báo qua email mỗi khi chúng tôi ra mắt video mới.

Tôi là Adriana Jara. Ngay sau khi Chrome 108 được phát hành, tôi sẽ sẵn sàng cho bạn biết những tính năng mới trong Chrome!