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 điểm mới dành cho nhà phát triển trong Chrome 107.

Các thuộc tính mới trong Screen Capture API

Trong phiên bản này, Screen Capture API bổ sung 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 ghi lại hình ảnh của chính mình và tránh hiệu ứng "Phòng gương" mà chúng ta thường thấy trong các cuộc họp video.

DisplayMediaStreamOptionshiện cũng có thuộc tính surfaceSwitching. Thuộc tính này bổ sung một lựa 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 chuyển đến getDisplayMedia(). 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ị truyền hình hoặc chọn trong danh sách dài các thẻ, nhưng hành vi này chỉ xuất hiện trong trường hợp ứng dụng web không xử lý được.

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

MediaTrackConstraintSet cũng 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 hiện 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 chặn việc vô tình chia sẻ quá nhiều vì việc chia sẻ một thẻ có thể là chế độ mặc định. Ảnh chụp màn hình của lời nhắc cũ và mới trong công cụ chọn phương tiện.

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 cho người dùng. Cho đến nay, nhà phát triển vẫn dựa vào phương pháp phỏng đoán phức tạp để xác định xem một tài nguyên có chặn hiển thị hay không.

Giờ đây, Performance API có thuộc tính renderBlockingStatus 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 được tải xuống.

Đoạn mã dưới đâ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 chặn 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 giúp cải thiện Core Web Vitals và mang lại trải nghiệm tốt hơn cho người dùng. Hãy xem tài liệu MDN để tìm hiểu thêm về Performance API, tìm những tài nguyên chặn hiển thị đó và tối ưu hoá.

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

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

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

Các ứng dụng thường muốn gửi những 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 thích 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, vì vậy, API này có thể hỗ trợ đèn hiệu 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 gửi vào đúng thời điểm.

Đăng ký bản dùng thử theo nguyên gốc, dùng thử API và 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 điều 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 chúng ta nên đưa phép nội suy này vào.

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

Đây chỉ là một số điểm nổi bật chính. Hãy xem các đường liên kết bên dưới để biết thêm những thay đổi khác trong Chrome 107.

Đăng ký

Để nắm bắt thông tin mới nhất, hãy đăng ký kênh YouTube của Chrome Developers. 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 khi Chrome 108 ra mắt, tôi sẽ có mặt tại đây để chia sẻ với bạn những điểm mới trong Chrome!