Trang này được dịch bởi Cloud Translation API.

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:

Có các thuộc tính mới trong API Screen Capture (API Chụp ảnh màn hình) giúp cải thiện trải nghiệm chia sẻ màn hình.
Giờ đây, bạn có thể xác định chính xác liệu tài nguyên trên trang của bạn có chặn hiển thị hay không.
Có một cách mới để gửi dữ liệu đến máy chủ phụ trợ bằng cách khai báo PendingBeacon API trong bản dùng thử theo nguyên gốc. Và nhiều lợi ích khác.
Và còn nhiều tính năng khác.

Tôi là Adriana Jara. Hãy cùng tìm hiểu kỹ hơn và xem có gì mới dành cho nhà phát triển trong Chrome 107.

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

Trong phiên bản này, API Screen Capture (Chụp ảnh màn hình) 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);

Chế độ này giúp ngăn chặn tình trạng tự chụp ảnh mình do nhầm lẫn và tránh hiệu ứng "Gương gương" mà chúng ta thấy trong các hội nghị truyền hình.

DisplayMediaStreamOptionshiện cũng có thuộc tính surfaceSwitching. Thuộc tính này thêm một tuỳ chọn để kiểm soát theo phương thức lập trình việc 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 một danh sách dài các thẻ. Tuy nhiên, hành vi này sẽ hiển thị theo điều kiện trong trường hợp ứng dụng web không xử lý.

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

Ngoài ra, MediaTrackConstraintSet cũng thêm thuộc tính displaySurface. Khi getDisplayMedia() được gọi, trình duyệt sẽ cho phép người dùng lựa chọn 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 chia sẻ quá mức do nhầm lẫn 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ông cụ chọn nội dung nghe nhìn cũ và mới.

Xác định các 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 rất quan trọng để nhà phát triển xây dựng trải nghiệm người dùng nhanh chóng, cho đến nay, các 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 tài nguyên có chặn hiển thị hay không.

Giờ đây, API Hiệu suất bao gồm cả thuộc tính displayBlockingStatus. Thuộc tính này cung cấp tín hiệu trực tiếp từ trình duyệt giúp 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ã tại đây cho biết cách lấy danh sách tất cả tài nguyên của bạn và sử dụng thuộc tính showBlockingStatus mới để liệt kê tất cả tài nguyên đang 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 đảm bảo Các chỉ số quan trọng về trang web và cải thiện trải nghiệm người dùng. Hãy xem tài liệu MDN để tìm hiểu thêm về API Hiệu suất, tìm kiếm các tài nguyên chặn hiển thị và tối ưu hoá.

Bản dùng thử theo nguyên gốc API Đang chờ xử lý

APIPendingBeacon 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 vào cuối lượt truy cập của người dùng nhưng không có thời gian thích hợp để thực hiện cuộc gọi "gửi". API này uỷ quyền gửi lệnh gọi đến chính trình duyệt, vì vậy, API này có thể hỗ trợ beacon trên page unload hoặc trên page hide mà không cần nhà phát triển phải triển khai lệnh gọi vào đúng thời điểm phù hợp.

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

Và nhiều kiến thức khác!

Tất nhiên, vẫn còn nhiều lý do khác.

Tiêu đề http expect-ct không đượ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 nội suy grid-template, nhưng lần này bạn nên đưa yếu tố này vào.

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

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

Để 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 các tính năng mới của Chrome!