Cho phép các ứng dụng web đã cài đặt trở thành trình xử lý tệp

Đăng ký một ứng dụng làm trình xử lý tệp với hệ điều hành.

Thomas Steiner

Giờ đây, các ứng dụng web có thể đọc và ghi tệp, bước hợp lý tiếp theo là cho phép nhà phát triển khai báo chính những ứng dụng web này làm trình xử lý tệp cho các tệp mà ứng dụng của họ có thể tạo và xử lý. API Xử lý tệp cho phép bạn thực hiện chính xác việc này. Sau khi đăng ký một ứng dụng trình chỉnh sửa văn bản làm trình xử lý tệp và sau khi cài đặt ứng dụng đó, bạn có thể nhấp chuột phải vào một tệp .txt trên macOS rồi chọn "Get Info" (Lấy thông tin) để hướng dẫn hệ điều hành rằng hệ điều hành phải luôn mở tệp .txt bằng ứng dụng này theo mặc định.

Các trường hợp sử dụng được đề xuất cho File Handling API

Ví dụ về các trang web có thể sử dụng API này:

Các ứng dụng Office như trình chỉnh sửa văn bản, ứng dụng bảng tính và trình tạo bản trình bày.
Trình chỉnh sửa đồ hoạ và công cụ vẽ.
Công cụ chỉnh sửa cấp độ trong trò chơi điện tử.

Cách sử dụng File Handling API

Cải tiến tăng dần

Bản thân API Xử lý tệp không thể được polyfill. Tuy nhiên, bạn có thể mở tệp bằng một ứng dụng web thông qua 2 cách khác:

Web Share Target API cho phép nhà phát triển chỉ định ứng dụng của họ làm mục tiêu chia sẻ để có thể mở các tệp từ bảng chia sẻ của hệ điều hành.
Bạn có thể tích hợp API Truy cập hệ thống tệp với tính năng kéo và thả tệp, nhờ đó, nhà phát triển có thể xử lý các tệp đã thả trong ứng dụng đã mở.

Hỗ trợ trình duyệt

Browser Support

Source

Phát hiện đối tượng

Để kiểm tra xem API Xử lý tệp có được hỗ trợ hay không, hãy sử dụng:

if ('launchQueue' in window && 'files' in LaunchParams.prototype) {
  // The File Handling API is supported.
}

Phần khai báo của API Xử lý tệp

Bước đầu tiên, các ứng dụng web cần mô tả một cách khai báo trong tệp kê khai ứng dụng web loại tệp mà chúng có thể xử lý. API Xử lý tệp mở rộng tệp kê khai ứng dụng web bằng một thuộc tính mới có tên là "file_handlers". Thuộc tính này chấp nhận một mảng gồm các trình xử lý tệp. Trình xử lý tệp là một đối tượng có các thuộc tính sau:

Một thuộc tính "action" trỏ đến một URL trong phạm vi của ứng dụng làm giá trị.
Một thuộc tính "accept" có đối tượng gồm các loại MIME làm khoá và danh sách các đuôi tệp làm giá trị.
Một thuộc tính "icons" có một mảng biểu tượng ImageResource. Một số hệ điều hành cho phép liên kết loại tệp để hiển thị một biểu tượng không chỉ là biểu tượng ứng dụng được liên kết, mà còn là một biểu tượng đặc biệt liên quan đến việc sử dụng loại tệp đó với ứng dụng.
Một thuộc tính "launch_type" xác định xem nhiều tệp có nên được mở trong một ứng dụng hay trong nhiều ứng dụng. Giá trị mặc định là "single-client". Nếu người dùng mở nhiều tệp và nếu trình xử lý tệp đã được chú thích bằng "multiple-clients" làm "launch_type", thì sẽ có nhiều lần khởi chạy ứng dụng và đối với mỗi lần khởi chạy, mảng LaunchParams.files (xem phần bên dưới) sẽ chỉ có một phần tử.

Ví dụ bên dưới (chỉ cho thấy đoạn trích có liên quan của tệp kê khai ứng dụng web) sẽ giúp bạn hiểu rõ hơn:

{
  "file_handlers": [
    {
      "action": "/open-csv",
      "accept": {
        "text/csv": [".csv"]
      },
      "icons": [
        {
          "src": "csv-icon.png",
          "sizes": "256x256",
          "type": "image/png"
        }
      ],
      "launch_type": "single-client"
    },
    {
      "action": "/open-svg",
      "accept": {
        "image/svg+xml": ".svg"
      },
      "icons": [
        {
          "src": "svg-icon.png",
          "sizes": "256x256",
          "type": "image/png"
        }
      ],
      "launch_type": "single-client"
    },
    {
      "action": "/open-graf",
      "accept": {
        "application/vnd.grafr.graph": [".grafr", ".graf"],
        "application/vnd.alternative-graph-app.graph": ".graph"
      },
      "icons": [
        {
          "src": "graf-icon.png",
          "sizes": "256x256",
          "type": "image/png"
        }
      ],
      "launch_type": "multiple-clients"
    }
  ]
}

Đây là cho một ứng dụng giả định xử lý các tệp giá trị được phân tách bằng dấu phẩy (.csv) tại /open-csv, các tệp đồ hoạ vectơ có thể mở rộng (.svg) tại /open-svg và một định dạng tệp Grafr do người dùng tạo với bất kỳ .grafr, .graf hoặc .graph nào làm phần mở rộng tại /open-graf. Hai tệp đầu tiên sẽ mở trong một ứng dụng, tệp cuối cùng sẽ mở trong nhiều ứng dụng nếu bạn đang xử lý nhiều tệp.

Phần bắt buộc của API Xử lý tệp

Giờ đây, ứng dụng đã khai báo những tệp mà ứng dụng có thể xử lý tại URL trong phạm vi nào về lý thuyết, thì trên thực tế, ứng dụng cần phải làm gì đó một cách bắt buộc với các tệp đến. Đây là lúc launchQueue phát huy tác dụng. Để truy cập vào các tệp đã khởi chạy, một trang web cần chỉ định một đối tượng sử dụng cho đối tượng window.launchQueue. Các lần khởi chạy được xếp hàng đợi cho đến khi được người dùng chỉ định xử lý. Người dùng này sẽ được gọi chính xác một lần cho mỗi lần khởi chạy. Bằng cách này, mọi lần khởi chạy đều được xử lý, bất kể người dùng được chỉ định vào thời điểm nào.

if ('launchQueue' in window && 'files' in LaunchParams.prototype) {
  launchQueue.setConsumer((launchParams) => {
    // Nothing to do when the queue is empty.
    if (!launchParams.files.length) {
      return;
    }
    for (const fileHandle of launchParams.files) {
      // Handle the file.
    }
  });
}

Hỗ trợ Công cụ cho nhà phát triển

Tại thời điểm viết bài này, DevTools chưa được hỗ trợ, nhưng tôi đã gửi một yêu cầu về tính năng để thêm tính năng hỗ trợ.

Bản minh hoạ

Tôi đã thêm tính năng hỗ trợ xử lý tệp vào Excalidraw, một ứng dụng vẽ theo phong cách hoạt hình. Để kiểm thử tính năng này, trước tiên, bạn cần cài đặt Excalidraw. Sau đó, khi tạo một tệp bằng ứng dụng này và lưu trữ tệp đó ở một nơi nào đó trên hệ thống tệp, bạn có thể mở tệp đó bằng cách nhấp đúp hoặc nhấp chuột phải rồi chọn "Excalidraw" trong trình đơn theo bối cảnh. Bạn có thể xem cách triển khai trong mã nguồn.

Cửa sổ Finder của macOS có một tệp Excalidraw. — Nhấp đúp hoặc nhấp chuột phải vào một tệp trong trình khám phá tệp của hệ điều hành.

Trình đơn theo bối cảnh xuất hiện khi bạn nhấp chuột phải vào một tệp có mục Mở bằng… Excalidraw được đánh dấu. — Excalidraw là trình xử lý tệp mặc định cho các tệp `.excalidraw`.

Bảo mật

Nhóm Chrome đã thiết kế và triển khai File Handling API bằng cách sử dụng các nguyên tắc cốt lõi được xác định trong Kiểm soát quyền truy cập vào các tính năng mạnh mẽ của nền tảng web, bao gồm quyền kiểm soát của người dùng, tính minh bạch và tính tiện dụng.

Quyền, quyền duy trì và nội dung cập nhật về trình xử lý tệp

Để đảm bảo người dùng tin tưởng và sự an toàn cho các tệp của người dùng, khi File Handling API mở một tệp, lời nhắc cấp quyền sẽ xuất hiện trước khi PWA có thể xem một tệp. Lời nhắc cấp quyền này sẽ xuất hiện ngay sau khi người dùng chọn PWA để mở một tệp, do đó, quyền này được liên kết chặt chẽ với hành động mở một tệp bằng PWA, giúp người dùng dễ hiểu và phù hợp hơn.

Quyền này sẽ xuất hiện mỗi lần cho đến khi người dùng nhấp vào Cho phép hoặc Chặn việc xử lý tệp cho trang web, hoặc bỏ qua lời nhắc 3 lần (sau đó Chromium sẽ cấm và chặn quyền này). Chế độ cài đặt đã chọn sẽ được duy trì khi bạn đóng rồi mở lại PWA.

Khi phát hiện thấy tệp kê khai cập nhật và thay đổi trong phần "file_handlers", các quyền sẽ được đặt lại.

Thách thức liên quan đến tệp

Có một danh mục lớn các vectơ tấn công được mở bằng cách cho phép các trang web truy cập vào tệp. Những điều này được nêu trong bài viết về API Truy cập hệ thống tệp. Khả năng bảo mật bổ sung mà File Handling API cung cấp so với File System Access API là khả năng cấp quyền truy cập vào một số tệp thông qua giao diện người dùng tích hợp của hệ điều hành, thay vì thông qua một trình chọn tệp do ứng dụng web hiển thị.

Người dùng vẫn có thể vô tình cấp cho một ứng dụng web quyền truy cập vào tệp bằng cách mở tệp đó. Tuy nhiên, người dùng thường hiểu rằng việc mở một tệp sẽ cho phép ứng dụng mở tệp đó đọc và/hoặc thao tác với tệp đó. Do đó, lựa chọn rõ ràng của người dùng để mở một tệp trong một ứng dụng đã cài đặt, chẳng hạn như thông qua trình đơn theo bối cảnh "Mở bằng...", có thể được coi là một tín hiệu đủ để tin tưởng ứng dụng.

Các thách thức về trình xử lý mặc định

Trường hợp ngoại lệ là khi không có ứng dụng nào trên hệ thống lưu trữ cho một loại tệp nhất định. Trong trường hợp này, một số hệ điều hành máy chủ có thể tự động thăng cấp trình xử lý mới đăng ký thành trình xử lý mặc định cho loại tệp đó một cách âm thầm và không cần người dùng can thiệp. Điều này có nghĩa là nếu người dùng nhấp đúp vào một tệp thuộc loại đó, thì tệp sẽ tự động mở trong ứng dụng web đã đăng ký. Trên các hệ điều hành máy chủ lưu trữ như vậy, khi tác nhân người dùng xác định rằng không có trình xử lý mặc định hiện có cho loại tệp, thì có thể cần một lời nhắc rõ ràng về quyền để tránh vô tình gửi nội dung của một tệp đến một ứng dụng web mà không có sự đồng ý của người dùng.

Quyền kiểm soát của người dùng

Quy cách này quy định rằng trình duyệt không được đăng ký mọi trang web có thể xử lý tệp dưới dạng trình xử lý tệp. Thay vào đó, quá trình đăng ký xử lý tệp phải được giới hạn sau khi cài đặt và không bao giờ xảy ra nếu không có sự xác nhận rõ ràng của người dùng, đặc biệt là nếu một trang web sẽ trở thành trình xử lý mặc định. Thay vì chiếm đoạt các tiện ích hiện có như .json mà người dùng có thể đã đăng ký trình xử lý mặc định, các trang web nên cân nhắc việc tạo tiện ích của riêng mình.

Sự minh bạch

Tất cả các hệ điều hành đều cho phép người dùng thay đổi các mối liên kết tệp hiện tại. Điều này nằm ngoài phạm vi của trình duyệt.

Phản hồi

Nhóm Chrome muốn biết trải nghiệm của bạn khi sử dụng File Handling API.

Cho chúng tôi biết về thiết kế API

Có vấn đề gì về API mà bạn không mong muốn không? Hoặc có phương thức hay thuộc tính nào bị thiếu mà bạn cần triển khai ý tưởng của mình không? Bạn có câu hỏi hoặc nhận xét về mô hình bảo mật?

Báo cáo vấn đề về quy cách trên kho lưu trữ GitHub tương ứng hoặc thêm ý kiến của bạn vào một vấn đề hiện có.

Báo cáo vấn đề về việc triển khai

Bạn có phát hiện thấy lỗi trong quá trình triển khai của Chrome không? Hoặc việc triển khai có khác với quy cách không?

Báo cáo lỗi tại new.crbug.com. Nhớ cung cấp càng nhiều thông tin chi tiết càng tốt, hướng dẫn đơn giản để tái hiện và nhập UI>Browser>WebAppInstalls>FileHandling vào hộp Components (Thành phần).

Thể hiện sự ủng hộ đối với API

Bạn có dự định sử dụng API Xử lý tệp không? Sự ủng hộ công khai của bạn giúp nhóm Chrome ưu tiên các tính năng và cho các nhà cung cấp trình duyệt khác thấy tầm quan trọng của việc hỗ trợ các tính năng này.

Chia sẻ cách bạn dự định sử dụng tính năng này trên chuỗi thảo luận WICG Discourse.
Gửi một tweet đến @ChromiumDev bằng thẻ bắt đầu bằng #FileHandling và cho chúng tôi biết bạn đang sử dụng ở đâu và như thế nào.

Đường liên kết hữu ích

Lời cảm ơn

API Xử lý tệp được chỉ định bởi Eric Willigers, Jay Harris và Raymes Khoury. Bài viết này được Joe Medley xem xét.