一個能處理檔案的漸進式網頁應用程式 (PWA) ，對使用者來說更原生，也更能整合進作業系統。
網站已經可以透過拖放功能上傳檔案<input type="file">，但 PWA 更進一步，可以在作業系統上註冊為檔案處理程式。
當 PWA 被註冊為特定檔案類型的檔案處理器時，作業系統可在使用者開啟這些檔案時自動啟動該應用程式，類似 Microsoft Word 處理.docx檔案的方式。
定義你的應用程式能處理哪些檔案
第一步是宣告你的應用程式能處理哪些類型的檔案。 這是在你的應用程式清單檔案中，透過陣 file_handlers 列成員完成的。 陣列中的 file_handlers 每個項目需要具備兩個屬性：
-
action作業系統啟動 PWA 時應該導向的網址。 -
accept：一個被接受的檔案類型的物件。 鍵是 MIME 類型 (部分類型，使用萬用字元符號*，) 接受，值則是接受的檔案副檔名陣列。
請考慮下列範例：
{
"file_handlers": [
{
"action": "/openFile",
"accept": {
"text/*": [
".txt"
]
}
}
]
}
在此範例中，應用程式註冊一個接受文字檔的單一檔案處理器。 當 .txt 使用者透過雙擊桌面圖示開啟檔案時，作業系統會使用該 /openFile 網址啟動應用程式。
另請參閱:
- 在 MDN > References > Progressive 網頁應用程式中，將您的檔案與 PWA 關聯。
- file_handlers MDN > 參考網頁 > 應用程式清單。
偵測檔案處理 API 是否可用
在處理檔案之前，你的應用程式需要先確認裝置和瀏覽器是否支援檔案處理 API。
要檢查檔案處理 API 是否可用，請測試該物件是否 launchQueue 存在，方法如下：
if ('launchQueue' in window) {
console.log('File Handling API is supported!');
} else {
console.error('File Handling API is not supported!');
}
啟動時處理檔案
當作業系統在檔案開啟後啟動你的應用程式時，你可以用這個 launchQueue 物件來存取檔案內容。
請使用以下 JavaScript 程式碼來處理文字內容：
if ('launchQueue' in window) {
console.log('File Handling API is supported!');
launchQueue.setConsumer(launchParams => {
handleFiles(launchParams.files);
});
} else {
console.error('File Handling API is not supported!');
}
async function handleFiles(files) {
for (const file of files) {
const blob = await file.getFile();
blob.handle = file;
const text = await blob.text();
console.log(`${file.name} handled, content: ${text}`);
}
}
物件會 launchQueue 排隊所有已啟動的檔案，直到消費者被設定為 setConsumer。 想了解更多關於 和 launchParams 物件的launchQueue資訊，請前往檔案處理說明。
PWA 檔案處理器示範應用程式
PWA 檔案處理器示範應用程式：
- /pwa-file-handlers/ - 說明文件與原始碼。
- PWA 檔案處理器示範 - 現場示範。
使用示範版：
請在新視窗或分頁中進入 PWA 檔案處理工具的示範 。
安裝示範應用程式：
在地址欄中，點擊 可用應用程式。安裝 PWA 檔案處理工具示範 (應用程式
) 按鈕。Edge會開啟 安裝PWA檔案處理器示範應用程式 的對話框。
點擊 安裝 按鈕。
打開 了 PWA 檔案處理器的示範 應用程式視窗。 應用程式 安裝 對話框會打開。
點擊 允許 按鈕。
Windows 應用程式 對話框會提示你是否要將示範置選到工作列。
點擊 「是」 按鈕。
關閉 PWA 檔案處理工具的示範 應用程式。
建立文字檔：
如果你有現有的文字檔，就可以使用。 接下來的步驟，我們將使用 Visual Studio Code 建立一個資料夾名稱
test.txt的Documents文字檔。開啟 Visual Studio Code。
點選 檔案 選單，然後點 選新文字檔。
在檔案中新增文字，例如：
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. * Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. * Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.點選 檔案 選單，然後點 選儲存。
[另存新檔] 對話方塊會隨即開啟。
請瀏覽至像
C:\Users\localAccount\Documents\。在 檔案名稱 組合框中輸入
test。在 「另存為類型 組合」框中，選擇 純文字 (*.txt) 。
點擊 儲存 按鈕。
對話結束。
在 test.txt 分頁，點擊 關閉 (
) 按鈕。打開文字檔並指定「與 Open With」應用程式：
在 Windows 工作列，點選開始按鈕，輸入檔案總管，然後點選「開啟」。
檔案總管開啟。
導覽到包含該文字檔的目錄，例如
C:\Users\localAccount\Documents\。右鍵點擊文字檔 (如
test.txt) ，然後選擇「以PWA 檔案處理工具示範開啟>」。或者，雙擊文字檔。
會跳出一個 Microsoft Edge 對話框，詢問是否要開啟並編輯這個網頁應用程式中的文字檔：
點擊 開啟 按鈕。
打開 PWA 檔案處理器示範 應用程式，顯示
.txt檔名及檔案文字內容：