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:

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

Chrome 100

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

Biểu trưng Chrome và Firefox

Chrome 100 đã có sẵn và Firefox 100 sẽ sớm xuất hiện. Những số phiên bản gồm ba chữ số này có thể gây ra vấn đề trên các trang web dựa vào việc xác định phiên bản trình duyệt theo một cách nào đó. Trong vài tháng qua, nhóm Firefox và nhóm Chrome đã chạy các thử nghiệm trong đó trình duyệt báo cáo số phiên bản 100, mặc dù phiên bản này không được báo cáo.

Điều này dẫn đến một vài 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 trợ giúp.

  • Nếu bạn là một đơn vị bảo trì trang web, hãy kiểm tra 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 User-Agent, hãy thêm các bài kiểm thử để phân tích cú pháp các phiên bản lớn hơn hoặc bằng 100.

Hãy tham khảo Chrome và Firefox sẽ sớm có phiên bản lớn 100 trên web.dev để biết thêm thông tin chi tiết.

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

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

Thật thú vị khi xem web phát triển và thấy tất cả những điều tuyệt vời mà bạn đã tạo ra trong 100 bản phát hành Chrome gần đây. Chúng tôi nghĩ rằng sẽ rất vui khi được nhìn lại và tôn vinh #100CoolWebKhoảnh khắc đã xảy ra trong 14 năm qua.

Hãy cho chúng tôi biết khoảnh khắc bạn yêu thích nhất. Nếu chúng tôi bỏ lỡ đ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 #100CoolWebMoments. Chúc bạn học vui!

Giảm chuỗi 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 bị rút gọn theo mặc định. Đây là một phần của chiến lược thay thế việc sử dụng chuỗi User-Agent bằng API Gợi ý cho ứng dụng tác nhân người dùng mới.

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

Hãy xem bài viết Thời gian và bản dùng thử theo nguyên gốc về việc giảm thông tin trong trường tác nhân người dùng trên [blog Chromium][crblog] để tìm hiểu thêm về những thông tin 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ửa sổ mới và đặt các cửa sổ đó ở những 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 ở chế độ toàn màn hình trên màn hình chính và ghi chú của người nói xuất hiện trên màn hình còn lại.

API vị trí cửa sổ nhiều màn hình cho phép 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ể nhanh chóng kiểm tra 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ề 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 thành phần ở 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);
}

Đồng thời, lớp này cung cấp một cách để theo dõi các thay đổi, chẳng hạn như nếu màn hình mới được cắm hoặc tháo ra, độ phân giải 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 Quản lý nhiều màn hình bằng API vị trí cửa sổ nhiều màn hình trên web.dev để tìm hiểu sâu hơn.

Và nhiều tính năng khác!

Tất nhiên còn nhiều tính năng 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();

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

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

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

Nội dung 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 100.

Đă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 101 đượ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!