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

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

Pete LePage

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

Chrome 100 có số phiên bản gồm ba chữ số
Dẫn lại dòng ký ức và ăn mừng #100CoolWebEvents kể từ bản phát hành đầu tiên của Chrome.
Có một số thay đổi quan trọng đối với chuỗi tác nhân người dùng.
API Vị trí cửa sổ đa màn hình giúp bạn có thể liệt kê các màn hình được kết nối với máy của người dùng và đặt cửa sổ trên các màn hình cụ thể.
Và còn nhiều tính năng khác.

Tôi là Pete LePage. 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 100.

Chrome 100

Khi các trình duyệt lần đầu đạt đến phiên bản 10, có một vài vấn đề xảy ra khi số phiên bản chính chuyển từ 1 chữ số lên 2 chữ số. Hy vọng là chúng ta đã học được vài điều giúp quá trình chuyển đổi dễ dàng từ 2 chữ số sang 3.

Chrome 100 hiện đã có sẵn và Firefox 100 sẽ sớm ra mắt. Các số phiên bản 3 chữ số này có khả năng gây ra sự cố trên những trang web dựa vào việc xác định phiên bản trình duyệt theo cách nào đó. Trong vài tháng qua, nhóm Firefox và nhóm Chrome đã chạy các thử nghiệm mà trình duyệt báo cáo số phiên bản 100, mặc dù trình duyệt không báo cáo số phiên bản đó.

Việc này dẫn đến một số vấn đề được báo cáo, nhiều vấn đề trong số đó đã được khắc phục. Tuy nhiên, chúng tôi vẫn cần bạn giúp đỡ.

Nếu bạn là nhà bảo trì trang web, hãy kiểm thử trang web bằng Chrome và Firefox 100.
Nếu bạn phát triển một thư viện phân tích cú pháp Tác nhân người dùng, hãy thêm các kiểm thử để phân tích cú pháp các phiên bản lớn hơn và bằng 100.

Hãy khám phá Chrome và Firefox để đạt được phiên bản lớn 100 trên web.dev để biết thêm chi tiết.

100 khoảnh khắc thú vị trên web

Hình ảnh quảng bá 100 khoảnh khắc thú vị trên web

Thật thú vị khi chứng kiến web phát triển và chứng kiến tất cả những thành quả tuyệt vời mà bạn đã xây dựng trong 100 bản phát hành Chrome gần đây nhất. Chúng tôi nghĩ sẽ rất thú vị khi được ôn lại kỷ niệm và tôn vinh sự kiện #100CoolWebEvents đã diễn ra trong vòng 14 năm qua.

Hãy cho chúng tôi biết những khoảnh khắc bạn yêu thích nhất. Nếu chúng tôi bỏ lỡ bất kỳ điều gì (và chúng tôi chắc chắn là có), hãy tweet cho chúng tôi @Chromiumdev kèm theo #100CoolWebEvents. Chúc bạn học vui!

Chuỗi rút gọn tác nhân người dùng

Nói về tác nhân người dùng, Chrome 100 sẽ là phiên bản cuối cùng hỗ trợ chuỗi tác nhân người dùng không giảm theo mặc định. Đây là một phần trong chiến lược thay thế việc sử dụng chuỗi User-Agent bằng User-Agent Client Hints API (API Gợi ý của ứng dụng User-Agent) mới.

Kể từ Chrome 101, tác nhân người dùng sẽ được giảm dần.

Hãy tham khảo bài viết Ngày dùng thử và ngày dùng thử theo nguyên gốc Giảm tác nhân người dùng trên [Blog Chromium][crblog] để tìm hiểu thêm về nội dung nào sẽ bị xoá và thời điểm xoá.

API vị trí cửa sổ nhiều màn hình

Đối với một số ứng dụng, việc mở các cửa sổ mới và đặt các cửa sổ đó vào các vị trí cụ thể hoặc màn hình cụ thể là một tính năng quan trọng. Ví dụ: khi sử dụng Trang trình bày để trình bày, tôi muốn các trang trình bày xuất hiện toàn màn hình trên màn hình chính và ghi chú của người thuyết trình sẽ xuất hiện trên màn hình còn lại.

API Vị trí cửa sổ đa màn hình giúp bạn có thể liệt kê các màn hình được kết nối với máy của người dùng và đặt cửa sổ trên các màn hình cụ thể.

Bạn có thể kiểm tra nhanh xem có nhiều màn hình được kết nối với thiết bị bằng window.screen.isExtended hay không.

const isExtended = window.screen.isExtended;
// returns true/false

Tuy nhiên, chức năng chính nằm trong window.getScreenDetails(), cung cấp thông tin chi tiết về các màn hình đính kèm.

const x = await window.getScreenDetails();
// returns
// {
//    currentScreen: {...}
//    oncurrentscreenchange: null
//    onscreenschange: null
//    screens: [{...}, {...}]
// }

Ví dụ: bạn có thể xác định màn hình chính, sau đó sử dụng requestFullscreen() để đặt một phần tử ở chế độ toàn màn hình trên màn hình đó.

try {
  const screens = await window.getScreenDetails();
  const primary = screens
         .filter((screen) => screen.primary)[0]
  await elem.requestFullscreen({ screen: primary });
} catch (err) {
  console.error(err);
}

Ngoài ra, tính năng này còn cung cấp cách theo dõi các thay đổi, chẳng hạn như nếu bạn cắm hoặc tháo màn hình mới, độ phân giải sẽ thay đổi, v.v.

const screens = await window.getScreenDetails();
let numScreens = screens.screens.length;
screens.addEventListener('screenschange', (event) => {
  if (screens.screens.length !== numScreens) {
    console.log('Screen count changed');
    numScreens = screens.screens.length;
  }
});

Hãy xem bài viết mới cập nhật của Tom về Quản lý một số màn hình bằng API Vị trí cửa sổ đa màn hình trên web.dev để tìm hiểu kỹ hơn.

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

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

Có một phương thức forget() mới cho Thiết bị HID cho phép bạn thu hồi quyền đối với Thiết bị HID mà người dùng đã cấp.

// Request an HID device.
const [device] = await navigator.hid.requestDevice(opts);


// Then later, revoke permission to the device.
await device.forget();

Đối với WebNFC, phương thức makeReadOnly() cho phép bạn đặt thẻ NFC vĩnh viễn ở chế độ chỉ có thể đọc.

const ndef = new NDEFReader();
await ndef.makeReadOnly();

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

Để 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 và ngay sau khi Chrome 101 đượ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!