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

Pete LePage

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

Chúc mừng năm mới! Tôi là Pete LePage. Hãy cùng tìm hiểu sâu hơn và xem có gì mới dành cho nhà phát triển trong Chrome 97.

Di chuyển web

Nếu đang sử dụng Web Sockets hoặc API Kênh dữ liệu WebRTC để gửi thông báo giữa máy chủ và trang, thì bạn có một lựa chọn mới. WebTransport là một API mới cung cấp thông báo độ trễ thấp, hai chiều, máy khách-máy chủ.

API này có độ trễ thấp hơn WebSockets và không giống như RTC Data Channel API (API Kênh dữ liệu RTC) được thiết kế để nhắn tin ngang hàng, Web Transport API được thiết kế riêng cho hoạt động nhắn tin qua máy chủ máy khách.

API này hỗ trợ gửi dữ liệu một cách đáng tin cậy thông qua các API luồng và không đáng tin cậy với các API gói dữ liệu. Tính năng này được hỗ trợ trong trình thực thi web. Ngoài ra, vì nó cho thấy giao diện tương thích với Stream (Luồng), nên tính năng này hỗ trợ các hoạt động tối ưu hoá cho tính năng backpressure.

Để sử dụng công cụ này, bạn cần một máy chủ hỗ trợ HTTP/3, cách này nhìn chung sẽ dễ dàng hơn so với việc thiết lập và duy trì máy chủ WebRTC. Mở một thực thể WebTransport mới, chờ thực thể đó kết nối và bạn có thể bắt đầu gửi dữ liệu.

const url = 'https://example.com:4999/foo/bar';
const transport = new WebTransport(url);
await transport.ready;

const writer = transport.datagrams.writable.getWriter();
const data1 = new Uint8Array([65, 66, 67]);
writer.write(data1);

Hãy xem bài viết Thử nghiệm với WebTransport trên web.dev để biết đầy đủ thông tin chi tiết.

Phát hiện tính năng loại tập lệnh

Hiện nay, chúng ta có thể dùng thuộc tính nomodule để phát hiện tính năng hỗ trợ cho các mô-đun JavaScript trong trình duyệt. Tuy nhiên, sẽ có một số đề xuất mới về tính năng đang trong quy trình, chẳng hạn như bản đồ nhập, quy tắc suy đoán và tải trước gói. Chúng ta cần biết cách để biết trình duyệt hỗ trợ tính năng nào.

Nhập HTMLScriptElement.supports(). Bạn có thể sử dụng đối tượng này để xác định loại tập lệnh bạn có thể sử dụng và gửi cho trình duyệt lựa chọn tốt nhất.

if (HTMLScriptElement.supports('importmap')) {
  // Use <script type="importmap" ...>
} else if (HTMLScriptElement.supports('module')) {
  // Use <script type="module" ...>
} else {
  // Use classic method...
}

Nguyên mẫu mảng mới

Tôi thích khi JavaScript trở nên dễ sử dụng hơn. Array và TypedArray hiện hỗ trợ các phương thức tĩnh findLast() và findLastIndex().

Các hàm này hoạt động giống như find() và findIndex(), nhưng tìm kiếm từ cuối một mảng thay vì từ đầu.

Ví dụ: để tìm số cuối cùng trong một mảng lớn hơn 10, hãy gọi findLast() bằng một hàm kiểm thử giúp kiểm tra xem giá trị đó có lớn hơn 10 hay không và bạn đã sẵn sàng.

const array1 = [5, 12, 8, 130, 44, 3, 6];

function greaterThanTen(val) {
  return val > 10;
}

const last = array1.findLast(greaterThanTen);
// 44

const lIdx = array1.findLastIndex(greaterThanTen);
// 4

Mô phỏng Chrome 100 trong chuỗi UA

Chỉ sau vài tháng nữa, chúng tôi sẽ chạm mốc Chrome 100, số phiên bản gồm ba chữ số. Bất kỳ mã nào kiểm tra số phiên bản hoặc phân tích cú pháp chuỗi UA, đều phải được kiểm tra để đảm bảo mã đó xử lý 3 chữ số.

Có một cờ tên là #force-major-version-to-100 sẽ thay đổi số phiên bản hiện tại thành 100 để bạn có thể đảm bảo rằng mọi thứ hoạt động như mong đợi.

Trang cờ Chrome làm nổi bật tuỳ chọn #force-major-version-to-100 mới

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

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

Các dòng mới trong các mục nhập trong biểu mẫu hiện được chuẩn hoá theo cách tương tự như Gecko và WebKit, cải thiện khả năng tương tác giữa các trình duyệt.

Chúng tôi đang chuẩn hoá tên gợi ý của ứng dụng khách bằng cách thêm tiền tố sec-ch vào các tên này. Ví dụ: dpr trở thành sec-ch-dpr. Chúng tôi sẽ tiếp tục hỗ trợ các phiên bản hiện tại của các gợi ý này, nhưng bạn nên có kế hoạch về việc ngừng sử dụng và xoá các phiên bản cuối cùng của các gợi ý này.

Đã đóng các phần tử <details> hiện có thể tìm kiếm và có thể được liên kết. Các phần tử ẩn này sẽ tự động mở rộng khi sử dụng tính năng tìm trong trang, ScrollToTextFragment và điều hướng trong mảnh phần tử.

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 97.

Đăng ký

Để 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à Pete LePage. Ngay sau khi Chrome 98 đượ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!