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

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

Pete LePage

Twitter GitHub Sự cố Bảng tin Trang chủ

Chrome 86 hiện đang bắt đầu ra mắt bản ổn định.

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

File System Access API (API Truy cập hệ thống tệp) hiện có sẵn trong phiên bản ổn định.
Hiện có bản dùng thử theo nguyên gốc mới cho Web HID và API Vị trí cửa sổ nhiều màn hình.
CSS có một số nội dung mới và nhiều nội dung khác.

Tôi là Pete LePage, làm việc và quay video tại nhà. 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 86!

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

Hiện nay, bạn có thể sử dụng phần tử <input type="file"> để đọc một tệp trên ổ đĩa. Để lưu các thay đổi, hãy thêm download vào một thẻ ký tự liên kết. Thẻ 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 bạn đã mở. Quy trình công việc đó gây khó chịu.

Với API Truy cập hệ thống tệp (trước đây là API Hệ thống tệp gốc), bắt nguồn từ bản dùng thử theo nguyên gốc và hiện đang hoạt động ổn định, bạn có thể gọi showOpenFilePicker() để cho thấy một bộ chọn tệp, sau đó trả về một tên người dùng 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 một tệp vào ổ đĩa, bạn có thể sử dụng tên người dùng xử lý tệp đã tải trước đó hoặc gọi showSaveFilePicker() để lấy tên người dùng xử lý tệp mới.

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 lời nhắc cấp quyền — Nhắc người dùng yêu cầu 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 chưa, nếu quyền ghi chưa được cấp thì Chrome sẽ nhắc người dùng trước.

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

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

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

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

API WebHID, hiện có sẵn dưới dạng bản dùng thử theo nguyên gốc, giải quyết vấn đề này bằng cách cung cấp một 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 nền tảng 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, điều kiện kích hoạt, đèn LED, gói dữ liệu nhanh, v.v.

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 nền tảng web có thể 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 âm thanh và làm nhiều việc khác.

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 API đó một cách rõ ràng.

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

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

Hiện nay, bạn có thể lấy các thuộc tính của màn hình đang bật cửa sổ trình duyệt bằng cách gọi window.screen(). Nếu bạn thiết lập chế độ 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 bật.

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ổ đa màn hình, bắt đầu bản dùng thử theo nguyên gốc trong Chrome 86, cho phép bạn liệt kê các màn hình được kết nối với máy và đặt cửa sổ trên màn hình cụ thể. Việc có thể đặt cửa sổ trên màn hình cụ thể rất quan trọng đối với những ứng dụng như ứng dụng trình bày, ứng dụng dịch vụ tài chính, v.v.

Để có thể sử dụng API, bạn cần yêu cầu cấp quyền. Nếu bạn chưa, trình duyệt sẽ nhắc người dùng khi bạn lần đầu tiên bạn sử dụng.

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 sẽ 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ổ đa 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 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 lấy 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ố hay dấu đầu dòng cho danh sách bằng Phần tử giả mạo ::marker của CSS.

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

Ngoài ra, Hội nghị Nhà phát triển Chrome sẽ diễn ra tại một màn hình gần đây. Vì vậy, hãy chú ý 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

Phần này chỉ đề cập đến một số điểm 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 trong Chrome 86.

Bạn muốn luô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 và bạn sẽ nhận được thông báo qua email bất cứ khi nào chúng tôi ra mắt video mới hoặc thêm nguồn cấp dữ liệu RSS vào trình đọc nguồn cấp dữ liệu của bạn.

Tôi là Pete LePage và ngay sau khi Chrome 87 được phát hành, tôi sẽ sẵn sàng cho bạn biết -- những điểm mới trong Chrome!