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

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

Pete LePage

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

Các PWA đã cài đặt có thể đăng ký là trình xử lý tệp, giúp người dùng dễ dàng mở tệp ngay từ ổ đĩa.
Thuộc tính inert cho phép bạn đánh dấu các phần của DOM là quán tính.
API Điều hướng giúp các ứng dụng một trang xử lý việc điều hướng và cập nhật cho URL dễ dàng hơn
Và còn nhiều tính năng khác.

Tôi là Pete LePage. Hãy cùng tìm hiểu kỹ hơn và xem có gì mới dành cho nhà phát triển trong Chrome 102.

API Xử lý tệp

API Xử lý tệp cho phép các PWA đã cài đặt đăng ký với hệ điều hành làm trình xử lý tệp. Sau khi đăng ký, người dùng có thể nhấp vào một tệp để mở tệp đó bằng PWA đã cài đặt. Đây là lựa chọn hoàn hảo cho các PWA tương tác với tệp, chẳng hạn như trình chỉnh sửa hình ảnh, IDE, trình chỉnh sửa văn bản, v.v.

Để thêm chức năng xử lý tệp vào PWA, bạn cần cập nhật tệp kê khai ứng dụng web, thêm một mảng file_handlers có thông tin chi tiết về các loại tệp mà PWA của bạn có thể xử lý. Bạn cần chỉ định URL cần mở, loại Mime, biểu tượng cho loại tệp và loại khởi chạy. Loại khởi chạy xác định xem nên mở nhiều tệp trong một ứng dụng hay trong nhiều ứng dụng.

"file_handlers": [
  {
    "action": "/open-csv",
    "accept": {"text/csv": [".csv"]},
    "icons": [
      {
        "src": "csv-icon.png",
        "sizes": "256x256",
        "type": "image/png"
      }
    ],
    "launch_type": "single-client"
  }
]

Sau đó, để truy cập vào các tệp đó khi PWA chạy, bạn cần chỉ định đối tượng sử dụng cho đối tượng launchQueue. Các lượt khởi chạy sẽ được đưa vào hàng đợi cho đến khi được người tiêu dùng xử lý.

// Access from Window.launchQueue.
launchQueue.setConsumer((launchParams) => {
  if (!launchParams.files.length) {
    // Nothing to do when the queue is empty.
    return;
  }
  for (const fileHandle of launchParams.files) {
    // Handle the file.
    openFile(fileHandle);
  }
});

Hãy xem bài viết Cho phép các ứng dụng web được cài đặt làm trình xử lý tệp để biết tất cả thông tin chi tiết.

Thuộc tính `inert`

Thuộc tính inert là một thuộc tính HTML chung yêu cầu trình duyệt bỏ qua các sự kiện do người dùng nhập vào một phần tử, bao gồm cả sự kiện tiêu điểm và sự kiện từ các công nghệ hỗ trợ.

Điều này có thể hữu ích khi xây dựng giao diện người dùng. Ví dụ: với hộp thoại phương thức, bạn muốn "bóp" tiêu điểm bên trong phương thức khi tiêu điểm đó hiển thị. Hoặc đối với một ngăn không phải lúc nào người dùng cũng nhìn thấy, việc thêm inert sẽ đảm bảo rằng trong khi ngăn nằm ngoài màn hình, người dùng bàn phím không thể vô tình tương tác với ngăn.

<div>
  <label for="button1">Button 1</label>
  <button id="button1">I am not inert</button>
</div>
<div inert>
  <label for="button2">Button 2</label>
  <button id="button2">I am inert</button>
</div>

Ở đây, inert đã được khai báo trên phần tử <div> thứ hai. Vì vậy, mọi nội dung bên trong, bao gồm cả <button> và <label>, đều không thể nhận tiêu điểm hoặc nhấp vào được.

inert được hỗ trợ trong Chrome 102 và sẽ có trên cả Firefox và Safari.

Hãy xem phần Giới thiệu inert để biết thêm chi tiết.

Nhiều ứng dụng web phụ thuộc vào khả năng cập nhật URL mà không cần điều hướng trang. Hiện nay, chúng tôi sử dụng API Lịch sử, nhưng API này rườm rà và không phải lúc nào cũng hoạt động như mong đợi. Thay vì cố gắng vá các cạnh thô của API Lịch sử, API Điều hướng sẽ kiểm tra toàn bộ không gian này.

Để sử dụng Navigation API, hãy thêm trình nghe navigate trên đối tượng navigation chung.

navigation.addEventListener('navigate', (navigateEvent) => {
  switch (navigateEvent.destination.url) {
    case 'https://example.com/':
      navigateEvent.transitionWhile(loadIndexPage());
      break;
    case 'https://example.com/cats':
      navigateEvent.transitionWhile(loadCatsPage());
      break;
  }
});

Về cơ bản, sự kiện này được tập trung ở một nơi tập trung và sẽ kích hoạt cho mọi loại thao tác, cho dù người dùng thực hiện một thao tác (chẳng hạn như nhấp vào đường liên kết, gửi biểu mẫu hay quay lại và đi), ngay cả khi thao tác điều hướng được kích hoạt theo phương thức lập trình. Trong hầu hết các trường hợp, chính sách này sẽ cho phép mã của bạn ghi đè hành vi mặc định của trình duyệt cho thao tác đó.

Hãy xem bài viết Định tuyến phía máy khách hiện đại: API Điều hướng để biết đầy đủ thông tin chi tiết và bản minh hoạ bạn có thể dùng thử.

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

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

API Sanitizer mới hướng đến việc xây dựng một bộ xử lý mạnh mẽ để chèn các chuỗi tuỳ ý vào trang một cách an toàn.
Thuộc tính hidden=until-found giúp trình duyệt có thể tìm kiếm văn bản ở các khu vực ẩn và hiển thị phần đó nếu tìm thấy kết quả trùng khớp.

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

Để 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 và ngay sau khi Chrome 103 đượ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 trong Chrome!

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

API Xử lý tệp

Thuộc tính inert

API điều hướng

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

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

Đăng ký

Thuộc tính `inert`