允許安裝的網頁應用程式成為檔案處理常式

使用作業系統,將應用程式註冊為檔案處理常式。

現在網路應用程式已能夠讀取及寫入檔案, 做法是讓開發人員宣告這些網路應用程式的檔案處理常式,為應用程式 建立與處理File Handling API 可以用來達成目的。註冊文字之後 編輯器應用程式做為檔案處理常式,並在安裝完成後,在 macOS 的 .txt 檔案上按一下滑鼠右鍵, 選取「取得資訊」然後指示 OS 一律使用這個應用程式開啟 .txt 檔案,如 預設值。

File Handling API 建議用途

以下列舉可能使用此 API 的網站:

  • 辦公室應用程式,例如文字編輯器、試算表應用程式和投影播放製作工具。
  • 圖形編輯器和繪圖工具。
  • 電玩遊戲關卡編輯器工具。

如何使用 File Handling API

漸進增強

每個 File Handling API 不能為聚合。透過網頁開啟檔案的功能 但也可以透過兩種方法完成:

  • Web Share Target API 可讓開發人員將應用程式指定為共用目標 才能透過作業系統的共用工作表開啟檔案。
  • File System Access API 可以與檔案拖曳功能整合, 開發人員可以處理已開啟應用程式中的拖放檔案。

瀏覽器支援

瀏覽器支援

  • Chrome:102。
  • Edge:102。
  • Firefox:不支援。
  • Safari:不支援。

資料來源

特徵偵測

如要檢查系統是否支援 File Handling API,請使用:

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

File Handling API 的宣告部分

首先,網頁應用程式必須在網頁應用程式資訊清單中,以宣告的方式描述。 他們可以處理哪些類型的檔案File Handling API 會以新的 名為 "file_handlers" 的屬性,可接受檔案處理常式的陣列。檔案處理常式是 具有以下屬性的物件:

  • "action" 屬性,指向應用程式範圍內的網址做為值。
  • "accept" 屬性,其具有 MIME 類型的物件做為索引鍵,做為副檔名清單 輕鬆分配獎金
  • 包含 ImageResource 陣列的 "icons" 屬性 圖示。部分作業系統可讓檔案類型關聯顯示圖示,而不只 關聯應用程式圖示,而是與該檔案類型使用相關的特殊圖示 。
  • "launch_type" 屬性,定義是否要在單一單一檔案中開啟多個檔案 各個用戶端或多個用戶端預設為 "single-client"。如果使用者 會開啟多個檔案,如果檔案處理常式已加上 "multiple-clients" 註解, "launch_type",就會啟動多個應用程式。每次啟動時, LaunchParams.files 陣列 (請參閱向下) 只有一個元素

以下範例 (僅顯示網頁應用程式資訊清單相關摘錄) 應將其設為 更清楚:

{
  "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"
    }
  ]
}

這是一款假想的應用程式,可處理以半形逗號分隔值 (.csv) 的檔案 /open-csv、可擴充向量圖形 (.svg) 檔案 (位於 /open-svg),以及建構的 Grafr 檔案格式 使用任何 .grafr.graf.graph 做為 /open-graf 的副檔名。前兩個會開啟 當處理多個檔案時,最後一個用戶端會位於多個用戶端。

File Handling API 是必備部分

現在,應用程式已宣告適用範圍內網址可處理的檔案,接下來必須 在實務上對收到的檔案執行操作此時 launchQueue 就能派上用場 。如要存取已啟動的檔案,網站必須指定 window.launchQueue 的用戶端 物件。啟動作業會排入佇列,直到指定的用戶處理 (叫用的用戶端) 為止 但每次啟動只會執行一次如此一來,無論何時 已指定消費者。

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.
    }
  });
}

開發人員工具支援

撰寫本文時我們尚未提供開發人員工具,但我已提交 功能要求,支援 已新增。

示範

我已為卡通風格的繪圖應用程式 Excalidraw 新增檔案處理支援功能。如要進行測試, 必須先安裝 Excalidraw日後當您透過該檔案建立檔案,並將檔案儲存在 請按一下按兩下開啟檔案,或按一下滑鼠右鍵,然後選取 「Excalidraw」顯示在內容選單中請參閱原始碼的實作 再也不是件繁重乏味的工作

含有 Excalidraw 檔案的 macOS 尋找工具視窗。
在作業系統的檔案總管中,按兩下或按一下滑鼠右鍵。
,瞭解如何調查及移除這項存取權。
在檔案上按一下滑鼠右鍵,並且以方框特別標出「開啟方式... 擴展」項目,即可顯示內容選單。
Excalidraw 是 .excalidraw 檔案的預設檔案處理常式。

安全性

Chrome 團隊根據 Google 定義的核心原則,設計並實作 File Handling API 「控管強大的網路平台功能存取權」,包括使用者控制項 以及資訊透明度以及人體工學

權限、權限持續性和檔案處理常式更新

為確保使用者信任並能維護使用者安全檔案,在 File Handling API 開啟檔案時, 在 PWA 檢視檔案前,會先顯示權限提示。此權限提示會顯示 使用者選取 PWA 開啟檔案後,權限會與 動作,讓檔案更容易理解與關聯性。

系統每次都會顯示這項權限,直到使用者點選「允許」或「封鎖」檔案處理為止 或是忽略提示三次 (之後 Chromium 將禁用並封鎖 權限)。所選設定會在 PWA 關閉及重新開啟時保留。

當系統偵測到資訊清單更新及「"file_handlers"」區段中的變更時,就會授予相關權限 將會重設。

藉由允許網站存取檔案而打開的大量攻擊媒介。 相關內容會在 File System Access API 一文。 File Handling API 可透過檔案系統提供的其他安全性相關功能 Access API 可透過作業系統的內建功能授予特定檔案的存取權 而不是透過網頁應用程式顯示的檔案選擇器。

使用者可能還是會有以下風險: 打開它。不過,整體來說,開啟檔案可讓應用程式 來讀取和/或操控該檔案。因此,由使用者明確選擇開啟檔案 在已安裝的應用程式中,例如透過「選擇開啟工具...」而且內容選單足夠清楚 信任信號

預設處理常式驗證問題

例外狀況是,在主機系統上沒有特定檔案類型的應用程式時。於 在此情況下,部分主機作業系統可能會自動將新註冊的處理常式升級到 預設處理常式,且使用者不必採取任何行動。這會導致 換言之,只要使用者按兩下該類型的檔案,該檔案就會在已註冊的 網頁應用程式。在這類主機作業系統上,使用者代理程式判定目前沒有 預設處理常式,可能就需要明確權限提示以避免 未經使用者同意,擅自將檔案內容傳送到網頁應用程式。

使用者控制項

這項規格要求瀏覽器不應註冊所有可將檔案處理為檔案的網站註冊 處理常式。請改為在安裝後限制檔案處理註冊,而且一律不進行 不需使用者明確確認,尤其是當網站成為預設處理常式時。與其 比起綁架現有擴充功能 (例如 .json),使用者可能已有預設處理常式 網站應考慮自行設計擴充功能。

透明度

所有作業系統都可讓使用者變更目前的檔案關聯。此內容不在範圍內 網址。

意見回饋

Chrome 團隊想瞭解您使用 File Handling API 的體驗,

請與我們分享 API 設計

您覺得這個 API 有什麼不如預期的運作方式?或者缺少某些方法 需要實現什麼構想?對安全性有任何疑問或意見 以及模型

  • 在對應的 GitHub 存放區上提出規格問題,或將您的想法新增至現有的 問題。

回報導入問題

您發現 Chrome 實作錯誤嗎?還是採用與規格不同?

  • 前往 new.crbug.com 回報錯誤。請務必盡量附上詳細資料 可以提供重現重現的簡單指示,然後在此輸入 UI>Browser>WebAppInstalls>FileHandling 勾選「元件」方塊Glitch 可讓你輕鬆快速地分享檔案 Repros。

顯示對 API 的支援

您是否打算使用 File Handling API?您的公開支援可幫助 Chrome 團隊: 優先開發功能,並向其他瀏覽器廠商說明支援這些功能的重要性。

實用連結

特別銘謝

File Handling API 是由 Eric Willigers 指定, Jay HarrisRaymes Khoury。本文評論者: Joe Medley