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à chụp ảnh 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 91!

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

Một trong những API yêu thích của tôi ra mắt từ 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, các ứng dụng có thể tương tác với 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 ra trải nghiệm người dùng tự nhiên hơn.

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

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

Điều này cũng áp dụng với thư mục bắt đầu mặc định. Ví dụ: một trình chỉnh sửa văn bản có thể muốn bắt đầu lưu tệp hoặc hộp thoại mở tệp trong thư mục documents. Trong khi đó, trình chỉnh sửa hình ảnh nên bắt đầu từ 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 về Quyền truy cập hệ thống tệp của Tom để biết đầy đủ chi tiết.

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

Có một API mới thú vị khác để tương tác với các tệp chuyển đến 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 các tệp từ bảng nhớ tạm đã có trong Safari kể 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 một trình nghe sự kiện paste. Sau đó, trong trình xử lý sự kiện, bạn có thể truy cập vào 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 đó dùng chung một 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 của mình với một trang web khác, cho phép người dùng lưu thông tin đăng nhập một lần và yêu cầu trình quản lý mật khẩu của Chrome đề xuất các trang web đó cho mọi trang web liên kết.

Điều này rất lý tưởng khi trang web của bạn được phân phát từ các miền cấp cao nhất khác nhau, 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 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ả hai miền .com và .co.uk đều có liên quan với nhau và có thể dùng chung thông tin đăng nhập.

[{
  "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 từng miền.

Chức năng này sẽ bắt đầu ra mắt dần trong Chrome 91 và có thể không hoạt động vào ngày đầu tiên. Vì vậy, hãy xem bài viết Bật Chrome để chia sẻ thông tin đăng nhập giữa các trang web liên kết để biết thông tin mới nhất.

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

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

Tất cả video của I/O 2021 đều đang trực tuyến. Ở đó có một số nội dung tuyệt vời, nên hãy khám phá ngay!

Web Transport (trước đây gọi là Quic Transport) đã trải qua một số thay đổi và đang bắt đầu một bản dùng thử theo nguyên gốc mới.

Web hội SIMD đã kết thúc giai đoạn dùng thử theo nguyên gốc và được cung cấp 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 đã có mặt trên Android, giúp 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 áp dụng 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 các truy vấn nội dung nghe nhìn. Ví dụ: các biểu tượng khác nhau cho chế độ tối và sáng.

<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

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

Đăng ký

Để 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 sau khi Chrome 92 đượ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!