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

Pete LePage

Chrome 86 hiện đang bắt đầu được triển khai phiên bản ổn định.

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

Tôi là Pete LePage, đang làm việc và quay video tại nhà, hãy cùng tìm hiểu về các tính năng mới dành cho nhà phát triển trong Chrome 86!

Quyền truy cập vào hệ thống tệp

Hôm nay, bạn có thể sử dụng phần tử <input type="file"> để đọc tệp từ ổ đĩa. Để lưu các thay đổi, hãy thêm download vào thẻ neo. Thao tác này sẽ hiển thị bộ chọn tệp, sau đó lưu tệp. Không có cách nào để ghi vào cùng một tệp mà bạn đã mở. Quy trình làm việc đó thật phiền phức.

Với API Truy cập hệ thống tệp (trước đây là API Hệ thống tệp gốc), đã hoàn tất giai đoạn thử nghiệm ban đầu và hiện đã có phiên bản ổn định, bạn có thể gọi showOpenFilePicker() để hiển thị bộ chọn tệp, sau đó trả về một tay cầm tệp mà bạn có thể dùng để đọc tệp.

async function getFileHandle() {
  const opts = {
    types: [
      {
        description: 'Text Files',
        accept: {
          'text/plain': ['.txt', '.text'],
          'text/html': ['.html', '.htm']
        }
      }
    ]
  };
  return await window.showOpenFilePicker(opts);
}

Để lưu tệp vào ổ đĩa, bạn có thể sử dụng tên người dùng tệp mà bạn đã nhận trước đó hoặc gọi showSaveFilePicker() để nhận một tên người dùng mới cho tệp.

async function saveFile(fileHandle) {
  if (!fileHandle) {
    fileHandle = await window.showSaveFilePicker();
  }
  const writable = await fileHandle.createWritable();
  await writable.write(contents);
  await writable.close();
}
ảnh chụp màn hình nhắc cấp quyền
Yêu cầu người dùng cấp quyền ghi vào tệp.

Trước khi ghi, Chrome sẽ kiểm tra xem người dùng đã cấp quyền ghi hay chưa. Nếu chưa cấp quyền ghi, Chrome sẽ nhắc người dùng trước.

Việc gọi showDirectoryPicker() sẽ mở một thư mục, cho phép bạn lấy danh sách tệp hoặc tạo tệp mới trong thư mục đó. Phù hợp với các IDE hoặc trình phát nội dung nghe nhìn tương tác với nhiều tệp. Tất nhiên, trước khi bạn có thể viết bất cứ nội dung gì, người dùng phải cấp quyền ghi.

API này còn có nhiều tính năng khác, vì vậy, hãy xem bài viết về Quyền truy cập vào hệ thống tệp trên web.dev.

Bản dùng thử theo nguyên gốc: WebHID

Tay điều khiển trò chơi
Tay điều khiển trò chơi.

Thiết bị giao diện người dùng, thường được gọi là HID, nhận dữ liệu đầu vào từ hoặc cung cấp dữ liệu đầu ra cho... con người. Có rất nhiều thiết bị giao diện người dùng quá mới, quá cũ hoặc quá hiếm gặp để trình điều khiển thiết bị của hệ thống có thể truy cập được.

API WebHID (hiện có dưới dạng bản dùng thử gốc) giải quyết vấn đề này bằng cách cung cấp cách truy cập vào các thiết bị này trong JavaScript. Với WebHID, các trò chơi dựa trên web có thể tận dụng tối đa tay điều khiển trò chơi, bao gồm tất cả các nút, cần điều khiển, cảm biến, trình kích hoạt, đèn LED, gói âm thanh và nhiều thứ khác.

butOpenHID.addEventListener('click', async (e) => {
  const deviceFilter = { vendorId: 0x0fd9 };
  const opts = { filters: [deviceFilter] };
  const devices = await navigator.hid.requestDevice(opts);
  myDevice = devices[0];
  await myDevice.open();
  myDevice.addEventListener('inputreport', handleInpRpt);
});

Các ứng dụng trò chuyện video dựa trên web có thể sử dụng các nút điện thoại trên loa chuyên dụng, để bắt đầu hoặc kết thúc cuộc gọi, tắt tiếng và làm nhiều việc khác.

Trình chọn thiết bị HID
Bộ chọn thiết bị HID.

Tất nhiên, các API mạnh mẽ như thế này chỉ có thể tương tác với thiết bị khi người dùng chọn cho phép một cách rõ ràng.

Hãy xem bài viết Kết nối với các thiết bị HID không phổ biến để biết thêm thông tin, ví dụ, cách bắt đầu và một bản minh hoạ thú vị.


Bản dùng thử theo nguyên gốc: API Vị trí cửa sổ trên nhiều màn hình

Hiện nay, bạn có thể gọi window.screen() để xem các thuộc tính của màn hình đang mở cửa sổ trình duyệt. Nhưng nếu bạn thiết lập nhiều màn hình thì sao? Rất tiếc, trình duyệt sẽ chỉ cho bạn biết về màn hình mà trình duyệt đang hiển thị.

const screen = window.screen;
console.log(screen);
// {
//   availHeight: 1612,
//   availLeft: 0,
//   availTop: 23,
//   availWidth: 3008,
//   colorDepth: 24,
//   orientation: {...},
//   pixelDepth: 24,
//   width: 3008
// }

API vị trí cửa sổ nhiều màn hình bắt đầu một bản dùng thử gốc trong Chrome 86. API này cho phép bạn liệt kê các màn hình được kết nối với máy của bạn và đặt cửa sổ trên các màn hình cụ thể. Việc đặt cửa sổ trên các màn hình cụ thể là rất quan trọng đối với những ứng dụng trình bày, ứng dụng dịch vụ tài chính, v.v.

Bạn cần yêu cầu cấp quyền thì mới có thể sử dụng API này. Nếu không, trình duyệt sẽ nhắc người dùng khi bạn cố gắng sử dụng lần đầu.

async function getPermission() {
  const opt = { name: 'window-placement' };
  try {
    const perm = await navigator.permissions.query(opt);
    return perm.state === 'granted';
  } catch {
    return false;
  }
}

Sau khi người dùng cấp quyền, lệnh gọi window.getScreens() sẽ trả về một lời hứa phân giải bằng một mảng các đối tượng Screen.

const screens = await window.getScreens();
console.log(screens);
// [
//   {id: 0, internal: false, primary: true, left: 0, ...},
//   {id: 1, internal: true, primary: false, left: 3008, ...},
// ]

Sau đó, tôi có thể sử dụng thông tin đó khi gọi requestFullScreen() hoặc đặt cửa sổ mới. Tom có tất cả thông tin chi tiết trong bài viết Quản lý một số màn hình bằng API Vị trí cửa sổ nhiều màn hình trên web.dev.

Và các dữ liệu khác

Bộ chọn CSS mới, :focus-visible, cho phép bạn chọn sử dụng cùng một phương pháp phỏng đoán mà trình duyệt sử dụng khi quyết định có hiển thị chỉ báo tiêu điểm mặc định hay không.

/* Focusing the button with a keyboard will
   show a dashed black line. */
button:focus-visible {
  outline: 4px dashed black;
}

/* Focusing the button with a mouse, touch,
   or stylus will show a subtle drop shadow. */
button:focus:not(:focus-visible) {
  outline: none;
  box-shadow: 1px 1px 5px rgba(1, 1, 0, .7);
}

Bạn có thể tuỳ chỉnh màu sắc, kích thước hoặc loại số hoặc dấu đầu dòng cho danh sách bằng Thành phần mô phỏng ::marker CSS.

li::marker {
  content: '😍';
}
li:last-child::marker {
  content: '🤯';
}

Và Chrome Dev Summit sẽ được phát sóng trên màn hình gần bạn. Hãy theo dõi kênh YouTube của chúng tôi để biết thêm thông tin!

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

Đăng ký

Nếu muốn cập nhật video của chúng tôi, 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 hoặc thêm nguồn cấp dữ liệu RSS của chúng tôi vào trình đọc nguồn cấp dữ liệu.

Tôi là Pete LePage. Ngay khi Chrome 87 đượ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!