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, khi 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 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 thực hiện chính xác 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) để hướng dẫn hệ điều hành rằng ứng dụng luôn mở các 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 API Xử lý tệp

Ví dụ về những 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 chiếu.
• 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 lần, API xử lý tệp không thể được điền bằng ô tô. 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 2 phương thức khác:

• Web Share Target API cho phép nhà phát triển chỉ định ứng dụng của mình làm mục tiêu chia sẻ để có thể mở tệp qua trang tính 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 bị thả trong ứng dụng đã mở.

Hỗ trợ trình duyệt

Hỗ trợ trình duyệt

• 102
• 102
• x
• x

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 dùng:

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

Lưu ý: Tính năng Xử lý tệp hiện chỉ có trong các hệ điều hành máy tính.

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ả rõ ràng trong tệp kê khai ứng dụng web về 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 với một thuộc tính mới có tên là "file_handlers" chấp nhận một loạt 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:

• Thuộc tính "action" trỏ đến một URL trong phạm vi của ứng dụng dưới dạng giá trị.
• Một thuộc tính "accept" có một đối tượng loại MIME làm khoá và danh sách các đuôi tệp làm giá trị.
• Thuộc tính "icons" có một loạt các biểu tượng ImageResource. Một số hệ điều hành cho phép mối 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 cho thấy 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 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" dưới dạng "launch_type", thì sẽ có nhiều lần khởi chạy ứng dụng xảy ra và đối với mỗi lần khởi chạy, mảng LaunchParams.files (xem tiếp theo) sẽ chỉ có một phần tử.

Ví dụ bên dưới (chỉ cho thấy phần trích dẫn có liên quan của tệp kê khai ứng dụng web) sẽ giúp cho ví dụ này rõ ràng 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"
    }
  ]
}

Điều này là dành cho một ứng dụng giả định, xử lý các tệp có 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 tạo sẵn với bất kỳ .grafr, .graf hoặc .graph nào làm đuôi tại /open-graf. Hai ứng dụng đầu tiên sẽ mở trong một ứng dụng, ứng dụng cuối cùng trong nhiều ứng dụng nếu đang xử lý nhiều tệp.

Lưu ý: Để khai báo này có hiệu lực, bạn phải cài đặt ứng dụng. Bạn có thể tìm hiểu thêm trong một loạt bài viết trên chính trang web này về cách giúp ứng dụng dễ cài đặt.

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

Theo lý thuyết, ứng dụng hiện đã khai báo tệp nào có thể xử lý tại URL trong phạm vi đó. Trong thực tế, ứng dụng cần thực hiện thao tác nào đó với các tệp được gửi đế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, trang web cần chỉ định đối tượng sử dụng cho đối tượng window.launchQueue. Các lượt khởi chạy được đưa vào hàng đợi cho đến khi được đối tượng tiêu dùng được chỉ định xử lý, lệnh này đượ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 hoạt động khởi chạy đều được xử lý, bất kể đối tượng tiêu 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

Không có hỗ trợ Công cụ cho nhà phát triển tại thời điểm viết bài này nhưng tôi đã gửi yêu cầu về tính năng để được thêm 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ử ứng dụ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 tệp đó và lưu trữ ở đâu đó 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 phần triển khai trong mã nguồn.

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.

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 theo 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 nền tảng web mạnh mẽ, bao gồm quyền kiểm soát của người dùng, độ trong suốt và hiệu quả.

Nội dung cập nhật về quyền, tính bền vững của quyền và trình xử lý tệp

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

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

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

Những 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 yêu cầu này được nêu trong bài viết về API Truy cập hệ thống tệp. Khả năng liên quan đến bảo mật bổ sung mà API Xử lý tệp cung cấp đối 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 nhất định thông qua giao diện người dùng tích hợp sẵn 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ị.

Người dùng vẫn có nguy cơ vô tình cấp cho ứ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 ta thường hiểu rằng việc mở một tệp sẽ cho phép ứng dụng được 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 về việc 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 đọc là tín hiệu đủ tin cậy đối với ứng dụng đó.

Thử thách trình xử lý mặc định

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 của máy chủ lưu trữ có thể tự động quảng bá trình xử lý mới đăng ký cho trình xử lý mặc định cho loại tệp đó một cách tự động 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 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 khi chưa có sự đồng ý của người dùng.

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

Thông số kỹ thuật này nêu rõ rằng trình duyệt không nên đăng ký mọi trang web có thể xử lý tệp làm trình xử lý tệp. Thay vào đó, bạn phải kiểm soát quy trình đăng ký xử lý tệp 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à khi một trang web trở thành trình xử lý mặc định. Thay vì xâm nhập các tiện ích hiện có như .json mà người dùng có thể đã đăng ký một trình xử lý mặc định, các trang web nên cân nhắ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 liên kết tệp hiện tại. Việc này nằm ngoài phạm vi của trình duyệt.

Ý kiến phản hồi

Nhóm Chrome muốn biết trải nghiệm của bạn khi dùng API Xử lý tệp.

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

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

• 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 vào vấn đề hiện có.

Báo cáo sự cố với quá trình triển khai

Bạn có phát hiện thấy lỗi khi triển khai Chrome không? Hay cách triển khai có khác với quy cách không?

• Gửi lỗi tại new.crbug.com. Hãy nhớ cung cấp nhiều thông tin chi tiết nhất có thể, hướng dẫn đơn giản để tái tạo và nhập UI>Browser>WebAppInstalls>FileHandling vào hộp Components (Thành phần). Sự cố giúp bạn chia sẻ các bản sửa lại nhanh chóng và dễ dàng.

Hỗ trợ API

Bạn có định sử dụng API Xử lý tệp không? Sự hỗ trợ 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 biết tầm quan trọng của việc hỗ trợ các tính năng đó.

• Chia sẻ cách bạn dự định sử dụng tính năng này trên chuỗi bài đăng WICG Discourse.
• Hãy gửi một dòng tweet đến @ChromiumDev bằng hashtag #FileHandling và cho chúng tôi biết vị trí cũng như cách thức bạn sử dụng bài đăng này.

Các đường liên kết hữu ích

• Nội dung giải thích công khai
• Bản minh hoạ API xử lý tệp | Nguồn minh hoạ API xử lý tệp
• Lỗi theo dõi Chromium
• Mục ChromeStatus.com
• Thành phần nhấp nháy: UI>Browser>WebAppInstalls>FileHandling
• Xem xét TAG
• Quan điểm về tiêu chuẩn của Mozilla

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 do Joe Medley xem xét.