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

Pete LePage

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

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

Tên được đề xuất cho API Truy cập hệ thống tệp

Một trong những API mà tôi yêu thích nhất trong dự án Fugu năm nay là API truy cập hệ thống tệp. Sau khi người dùng cấp quyền, ứng dụng có thể tương tác với các tệp trên thiết bị cục bộ của người dùng, giống như cách các ứng dụng đã cài đặt khác thực hiện, cho phép bạn tạo trải nghiệm người dùng tự nhiên hơn.

Kể từ Chrome 91, bạn có thể đề xuất tên và vị trí của một tệp hoặc thư mục để tương tác. Để thực hiện việc này, hãy truyền thuộc tính suggestedName vào các tuỳ chọn showSaveFilePicker.

const fileHandle = await self.showSaveFilePicker({
  suggestedName: 'Untitled Text.txt',
  types: [{
    description: 'Text documents',
    accept: {
      'text/plain': ['.txt'],
    },
  }],
});

Tương tự như vậy với thư mục khởi động mặc định. Ví dụ: một trình chỉnh sửa văn bản có thể sẽ bắt đầu hộp thoại lưu tệp hoặc mở tệp trong thư mục documents. Trong khi đó, trình chỉnh sửa hình ảnh có thể muốn bắt đầu trong thư mục pictures. Bạn có thể đề xuất thư mục bắt đầu mặc định bằng cách truyền thuộc tính startIn.

const fileHandle = await self.showOpenFilePicker({
  startIn: 'documents'
});

Hãy xem bài đăng của Tom về Quyền truy cập vào hệ thống tệp để biết toàn bộ thông tin chi tiết.

Đọc tệp từ bảng nhớ tạm

Còn một API mới thú vị khác để tương tác với các tệp trong Chrome 91. Trên máy tính, các ứng dụng web hiện có thể đọc tệp từ bảng nhớ tạm. (Tính năng đọc tệp từ bảng nhớ tạm đã có trong Safari từ năm 2018.)

Tất nhiên, bạn không có quyền truy cập không hạn chế vào bảng nhớ tạm, vì vậy, bạn cần thiết lập trình nghe sự kiện paste. Sau đó, trong trình xử lý sự kiện, bạn có thể truy cập nội dung của từng tệp trên bảng nhớ tạm.

window.addEventListener('paste', onPaste);

async function onPaste(e) {
  const file = e.clipboardData.files[0];
  const contents = await file.text();
  ...
}

Chia sẻ thông tin đăng nhập trên các trang web liên kết

Nếu trang web của bạn có nhiều miền và các miền này dùng chung phần phụ trợ quản lý tài khoản, thì giờ đây, bạn có thể liên kết các trang web với nhau, cho phép người dùng lưu thông tin xác thực một lần và trình quản lý mật khẩu của Chrome sẽ đề xuất thông tin xác thực đó cho bất kỳ trang web liên kết nào của bạn.

Đây là cách lý tưởng khi trang web của bạn được phân phát từ nhiều miền cấp cao nhất, như google.com và google.ca. Hoặc có thể bạn có nhiều tên miền.

Để liên kết các trang web, bạn cần tạo tệp assetlinks.json. Tệp này xác định mối quan hệ giữa các miền. Trong ví dụ bên dưới, tôi sẽ cho trình duyệt biết rằng cả miền .com và .co.uk đều liên quan và có thể chia sẻ thông tin xác thực.

[{
  "relation": ["delegate_permission/common.get_login_creds"],
  "target": {
    "namespace": "web",
    "site": "https://www.example.com"
  }
 },
{
  "relation": ["delegate_permission/common.get_login_creds"],
  "target": {
    "namespace": "web",
    "site": "https://www.example.co.uk"
  }
 }]

Sau đó, hãy lưu trữ tệp assetlinks.json trong thư mục .well-known cho mỗi miền.

Chức năng này sẽ bắt đầu được triển khai dần trong Chrome 91 và có thể chưa hoạt động từ ngày đầu tiên. Vì vậy, hãy xem bài viết Cho phép Chrome chia sẻ thông tin đăng nhập trên các trang web liên kết để biết thông tin chi tiết mới nhất.

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

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

Tất cả video từ sự kiện I/O 2021 đều đã có trên mạng. Hãy xem những nội dung tuyệt vời đó!

Web Transport (Trước đây gọi là Quic Transport) đã trải qua một số thay đổi và đang bắt đầu thử nghiệm nguồn gốc mới.

SIMD lắp ráp web đã kết thúc bản dùng thử theo nguyên gốc và có sẵn cho tất cả người dùng.

Các thành phần biểu mẫu được làm mới cuối cùng đã ra mắt trên Android, cải thiện trải nghiệm người dùng.

Và thuộc tính media của phần tử <link> sẽ được tuân thủ cho link rel="icon", nghĩa là bạn có thể xác định các biểu tượng khác nhau dựa trên truy vấn nội dung nghe nhìn. Ví dụ: biểu tượng khác nhau cho chế độ sáng và tối.

<link
  rel="icon"
  media="(prefers-color-scheme: dark)"
  href="/icons/dark.png">
<link
  rel="icon"
  media="(prefers-color-scheme: light)"
  href="/icons/light.png">

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

Đăng ký

Để cập nhật thông tin, 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 mỗi khi chúng tôi ra mắt video mới.

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