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àm trình xử lý tệp, giúp người dùng dễ dàng mở tệp trực tiếp từ ổ đĩa.
  • Thuộc tính inert cho phép bạn đánh dấu các phần của DOM là không hoạt động.
  • Navigation API giúp các ứng dụng một trang dễ dàng xử lý việc điều hướng và cập nhật URL
  • Và còn nhiều tính năng khác.

Tôi là Pete LePage. 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 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 dưới dạng 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ó 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 nhiều tệp có được mở trong một ứng dụng hay trong nhiều ứng dụng hay khô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 khởi chạy, bạn cần chỉ định một thực thể tiêu thụ cho đối tượng launchQueue. Các lần khởi chạy được đưa vào hàng đợi cho đến khi được người 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 phần Cho phép ứng dụng web đã 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 đối với một phần tử, bao gồm cả sự kiện tiêu điểm và sự kiện từ công nghệ hỗ trợ.

Điều này có thể hữu ích khi tạo giao diện người dùng. Ví dụ: với hộp thoại phương thức, bạn muốn "bẫy" tiêu điểm bên trong phương thức khi hộp thoại đó hiển thị. Hoặc đối với ngăn không phải lúc nào cũng hiển thị với người dùng, 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, tất cả nội dung có trong đó, bao gồm cả <button> và <label>, đều không thể nhận được tiêu điểm hoặc được nhấp vào.

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 về trơ để 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 tại, chúng ta sử dụng History API, nhưng API này khá cồng kềnh 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ẽ thay đổi toàn bộ không gian này.

Để sử dụng API Điều hướng, hãy thêm trình nghe navigate vào đố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 và sẽ kích hoạt cho tất cả các loại thao tác điều hướng, cho dù người dùng đã thực hiện một hành động nào đó, chẳng hạn như nhấp vào một đường liên kết, gửi một biểu mẫu hoặc quay lại và chuyển tiếp, 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, tính năng này cho phép mã 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: Navigation API để biết thông tin chi tiết đầy đủ và bản minh hoạ mà bạn có thể dùng thử.

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

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

  • Sanitizer API mới nhằm mục đích xây dựng một bộ xử lý mạnh mẽ để chèn các chuỗi tuỳ ý vào một trang một cách an toàn.
  • Thuộc tính hidden=until-found cho phép trình duyệt tìm kiếm văn bản trong các vùng ẩ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

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

Đă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. Ngay khi Chrome 103 đượ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!