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 những tính năng mới dành cho nhà phát triển trong Chrome 97.

Web Transport

Nếu bạn đ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 tính năng nhắn tin hai chiều, độ trễ thấp giữa máy khách và máy chủ.

API này có độ trễ thấp hơn WebSocket và không giống như API Kênh dữ liệu RTC được thiết kế để nhắn tin ngang hàng, API Truyền tải web được thiết kế riêng cho việc nhắn tin máy khách-máy chủ.

API này hỗ trợ gửi dữ liệu một cách đáng tin cậy bằng API luồng và không đáng tin cậy bằng API gói dữ liệu. Phương thức này được hỗ trợ trong trình chạy web. Và vì hiển thị giao diện tuân thủ Luồng, nên lớp này hỗ trợ các hoạt động tối ưu hoá liên quan đến áp lực ngược.

Để sử dụng giao thức này, bạn cần có một máy chủ hỗ trợ HTTP/3. Việc này thường 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, đợi thực thể này 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 thông tin đầy đủ.

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

Hôm nay, chúng ta có thể sử 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, chúng tôi đang triển khai một số đề xuất tính năng mới, 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 một cách để biết trình duyệt hỗ trợ gì.

Nhập HTMLScriptElement.supports(). Bạn có thể sử dụng thuộc tính 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 tuỳ 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...
}

Mẫu nguyên mẫu mảng mới

Tôi rất thích khi JavaScript trở nên dễ 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 hiệu quả giống như find() và findIndex(), nhưng tìm kiếm từ cuối mảng thay vì đầu mảng.

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ử để kiểm tra xem giá trị có lớn hơn 10 hay khô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ỉ trong vài tháng nữa, chúng tôi sẽ ra mắt Chrome 100, phiên bản có số ba chữ số. Bạn nên kiểm tra mọi mã kiểm tra số phiên bản hoặc phân tích cú pháp chuỗi UA để đảm bảo mã đó xử lý được ba chữ số.

Có một cờ có tên là #force-major-version-to-100 sẽ thay đổi số phiên bản hiện tại thành 100, nhờ đó bạn có thể đảm bảo 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 tính năng khác!

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

Các dòng mới trong mục nhập biểu mẫu hiện được chuẩn hoá theo cách tương tự như Gecko và WebKit, giúp 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 ý cho ứng dụng bằng cách thêm tiền tố sec-ch vào tên. 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 có của các gợi ý này, nhưng bạn nên lên kế hoạch để ngừng sử dụng và xoá các gợi ý này.

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

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

Phần này chỉ đề cập đến 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 các thay đổi trong Chrome 97.

Đă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à Pete LePage. Ngay khi Chrome 98 được phát hành, tôi sẽ quay lại đây để giới thiệu cho bạn những tính năng mới trong Chrome!