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 tiếp theo theo logic là cho phép nhà phát triển khai báo các ứ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 làm chính việc này. Sau khi đăng ký ứng dụng chỉnh sửa văn bản làm trình xử lý tệp và sau khi cài đặt, bạn có thể nhấp chuột phải vào tệp .txt trên macOS rồi chọn "Get Info" (Nhận thông tin) để sau đó hướng dẫn hệ điều hành rằng ứng dụng phải luôn mở tệp .txt bằng ứng dụng này làm mặc định.

Các trường hợp sử dụng được đề xuất cho API Xử lý tệp

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

  • Các ứng dụng văn phòng 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 độ trò chơi điện tử.

Cách sử dụng API Xử lý tệp

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

Mỗi API Xử lý tệp không thể được điền bằng polyfill. Tuy nhiên, bạn có thể thực hiện chức năng mở tệp bằng ứng dụng web thông qua hai phương thức khác:

  • Web Share Target API (API Mục tiêu chia sẻ trên web) 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ở tệp từ trang chia sẻ của hệ điều hành.
  • Bạn có thể tích hợp File System Access API (API Truy cập hệ thống tệp) với tính năng kéo và thả tệp để 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

Hỗ trợ trình duyệt

  • Chrome: 102.
  • Edge: 102.
  • Firefox: không được hỗ trợ.
  • Safari: không được hỗ trợ.

Nguồn

Phát hiện tính nă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

Trước tiên, ứng dụng web cần mô tả rõ ràng trong tệp kê khai ứng dụng web loại tệp mà ứng dụ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 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:

  • Thuộc tính "action" trỏ đến một URL trong phạm vi của ứng dụng làm giá trị của thuộc tính đó.
  • Thuộc tính "accept" có một đối tượng thuộc loại MIME làm khoá và danh sách đuôi tệp làm giá trị.
  • 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.
  • Thuộc tính "launch_type" xác định xem có nên mở nhiều tệp 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à dành 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, tệp đồ hoạ vectơ có thể mở rộng (.svg) tại /open-svg và định dạng tệp Grafr được tạo bằng bất kỳ .grafr, .graf hoặc .graph nào làm phần mở rộng tại /open-graf. Hai cửa sổ đầu tiên sẽ mở trong một ứng dụng, cửa sổ cuối cùng sẽ mở trong nhiều ứng dụng nếu nhiều tệp đang được xử lý.

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à nó có thể xử lý tại URL nào trong phạm vi theo lý thuyết, nên ứng dụng cần phải làm gì đó với các tệp đến trong thực tế. Đây là lúc launchQueue phát huy tác dụng. Để truy cập vào các tệp đã chạy, trang web cần chỉ định đối tượng sử dụng cho đối tượng window.launchQueue. Các lần khởi chạy được đưa vào hàng đợi cho đến khi được người dùng đã chỉ định xử lý. Lệnh gọi này được gọi đúng 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ể thời điểm người dùng được chỉ định.

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 hỗ trợ tính năng này, 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ẽ kiểu hoạt hình. Để kiểm thử, trước tiên, bạn cần cài đặt Excalidraw. Sau đó, khi tạo một tệp bằng tệp đó và lưu trữ tệp đó ở một nơi 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ổ trình tìm kiếm macOS có 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 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 API Xử lý tệp bằng các nguyên tắc cốt lõi được xác định trong bài viết 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 cả quyền kiểm soát của người dùng, tính minh bạch và tính công thái học.

Quyền, việc lưu trữ cố định quyền và cập nhật trình xử lý tệp

Để đảm bảo người dùng tin tưởng và sự an toàn của tệp của người dùng, khi API Xử lý tệp mở một tệp, một lời nhắc cấp quyền sẽ xuất hiện trước khi PWA có thể xem 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ở tệp, nhờ đó, quyền này được liên kết chặt chẽ với thao tác mở 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ẽ luôn xuất hiện cho đến khi người dùng nhấp vào Cho phép hoặc Chặn 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ẽ vẫn tồn tại khi đóng và mở lại PWA.

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

Có rất nhiều vectơ tấn công được mở ra bằng cách cho phép các trang web truy cập vào các 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. Chức năng liên quan đến bảo mật bổ sung mà API Xử lý tệp cung cấp so với API Truy cập hệ thống tệp 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 bộ chọn tệp do ứng dụng web hiển thị.

Vẫn có rủi ro người dùng có thể vô tình cấp quyền truy cập vào tệp cho một ứng dụng web bằng cách mở tệp đó. Tuy nhiên, thông thường, việc mở tệp 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à tín hiệu đủ tin cậy đối với ứng dụng.

Thử thách 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 lưu trữ có thể tự động quảng bá trình xử lý mới đăng ký thành trình xử lý mặc định cho loại tệp đó mà 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 đó, tệp đó sẽ tự động mở trong ứng dụng web đã đăng ký. Trên các hệ điều hành 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 phải có lời nhắc cấp quyền rõ ràng để tránh vô tình gửi nội dung của 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 nêu rõ 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 đó, việc đăng ký xử lý tệp phải được kiểm soát sau quá trình cài đặt và không bao giờ diễn ra nếu người dùng không xác nhận rõ ràng, đặc biệt là khi một trang web trở thành trình xử lý mặc định. Thay vì xâm nhập vào 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 riêng.

Sự minh bạch

Tất 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 có. Việc 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 ý kiến của bạn về trải nghiệm của bạn với API Xử lý tệp.

Giới thiệu cho chúng tôi về thiết kế API

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

  • Gửi vấn đề về thông số kỹ thuật 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 sự cố về triển khai

Bạn có phát hiện lỗi khi triển khai Chrome không? Hay cách triển khai có khác với thông số kỹ thuật không?

  • Gửi lỗi tại new.crbug.com. Hãy 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 lỗi và nhập UI>Browser>WebAppInstalls>FileHandling vào hộp Components (Thành phần). Glitch rất hữu ích để chia sẻ các bản tái hiện nhanh chóng và dễ dàng.

Hỗ trợ 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 đó.

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

Xác nhận

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