處理漸進式Web Apps中的檔案

可處理檔案的漸進式Web Apps對使用者而言更具有原生性，而且在作業系統中更妥善地整合。

網站已經可以讓使用者 使用 <input type="file"> 或 拖放來上傳檔案，但 PWA 會更進一步，並可在作業系統上註冊為檔案處理常式。

當 PWA 註冊為特定檔案類型的檔處理常式時，作業系統可以在使用者開啟這些檔案時自動啟動應用程式，類似于 Microsoft Word處理 .docx 檔案的方式。

定義應用程式處理的檔案

第一件事是宣告應用程式處理的檔案類型。 這會在您的應用程式 資訊清單檔案中使用 file_handlers 陣列成員來完成。

陣列中的 file_handlers 每個專案都必須有兩個屬性：

• action：啟動 PWA 時，作業系統應該巡覽至的 URL。
• accept：接受的檔案類型物件。 索引鍵是 MIME 類型， (部分型別使用萬用字元符號 * ，可接受) ，而值則是可接受副檔名的陣列。

請考慮下列範例：

{
    "file_handlers": [
        {
            "action": "/openFile",
            "accept": {
                "text/*": [
                    ".txt"
                ]
            }
        }
    ]
}

在此範例中，應用程式會註冊接受文字檔的單一檔案處理常式。 .txt例如，當使用者開啟檔案時，按兩下桌面上的圖示，作業系統就會使用 /openFile URL 啟動應用程式。

偵測檔案處理 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 者為止。 若要 launchQueue 深入瞭解 和 launchParams 物件，請移至 檔案處理解譯器。

示範

「我的曲目」是使用檔案處理功能來處理 .gpx 檔案的 PWA 示範應用程式。 若要嘗試使用此示範應用程式的功能：

• 移至 [我的曲目 ] 並安裝應用程式。
• 在您的電腦上下載 GPX 檔案。 您可以使用此 測試 GPX 檔案。
• 開啟下載的 GPX 檔案。

請注意，應用程式會自動啟動，而且 Microsoft Edge 會要求您處理此檔案的許可權。

如果您允許應用程式處理檔案，應用程式的提要欄位中會出現新的專案，而且您可以按一下旁邊的核取方塊，將對應的 GPS 播放軌視覺化。

您可以在 My Tracks GitHub 存放庫上存取此應用程式的原始程式碼。

• manifest.json來源檔案會使用 數 file_handlers 組來要求處理 .gpx 檔案。
• file.js來源檔案會使用 launchQueue 物件來處理傳入檔案。