将文件与您的 PWA 关联

在设备上，文件通常与应用关联，因此当用户打开文件时，操作系统会启动相应的应用并将文件传递给它。例如，HTML 文件通常在 Web 浏览器中打开，文本文件在文本编辑器中打开，视频文件在视频播放器中打开。

渐进式 Web 应用可以参与此功能，因此当用户点击特定类型的文件时，可能会启动 PWA 来处理它。

添加文件处理支持分为两个部分

使用 file_handlers Web 应用清单成员声明对某些文件类型的支持。
使用 LaunchQueue 接口处理文件。

注意：目前，此功能仅在基于 Chromium 的浏览器上可用，并且仅在桌面操作系统上可用。

声明对文件类型的支持

要声明对特定文件类型的支持，请在您的清单文件中包含 file_handlers 成员。

file_handlers 成员是文件处理程序对象的数组。每个文件处理程序对象都有两个必填属性，action 和 accept。

accept 属性包含 MIME 类型和与文件处理程序知道如何处理的文件关联的文件扩展名。
action 属性是当用户打开文件时 PWA 将导航到的 URL。此页面必须在 PWA 的范围内。

下面的清单文件包含一个 file_handlers 成员，其中包含一个处理程序，该处理程序可以处理 JPEG 和 PNG 文件，并且当用户点击这些文件之一时，将导航到 PWA 的根页面。

json

{
  "name": "File handling demo",
  "icons": [
    {
      "src": "icons/lightbulb.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ],
  "start_url": "/",
  "display": "standalone",
  "file_handlers": [
    {
      "action": "/",
      "accept": {
        "image/jpeg": [".jpg", ".jpeg"],
        "image/png": [".png"]
      }
    }
  ]
}

使用此清单，一旦安装了 PWA，当用户打开这些类型的文件时，就可以打开它。

通常，多个应用可以打开任何给定类型的文件，因此操作系统通常提供一个功能，使用户能够选择使用哪个应用打开文件，并设置默认处理程序。例如，在 macOS 上，用户可以右键单击文件，选择“获取信息”，并在生成的对话框中配置默认处理程序

Selecting the default handler on macOS

请求权限

浏览器首次准备启动您的 PWA 以处理用户打开的一个或多个文件时，它会询问用户是否确认他们希望使用您的 PWA 打开它。例如，Chrome 对话框如下所示

Chrome warning dialog for launching PWA to handle a file

处理文件

当浏览器启动您的 PWA 并导航到您在 file_handlers 清单成员的 action 属性中指定的页面时，您需要运行一些代码来处理该文件。此代码将在 action 属性中指定的页面中运行。

这里的关键接口是 LaunchQueue，它作为全局 Window 对象的属性可用。

LaunchQueue 接口有一个方法，setConsumer()，它将回调函数作为参数，当浏览器使用一个或多个文件启动 PWA 以进行处理时，将调用该回调函数。

回调传递一个 LaunchParams 对象，其中包含一个 files 属性，该属性包含一个 FileSystemHandle 对象的数组，每个对象都表示用户打开的文件之一。

例如，以下代码读取文件并将它们的内容分配给 <img> 元素，然后将其添加到页面中

const imageContainer = document.querySelector("#container");

if ("launchQueue" in window) {
  launchQueue.setConsumer(async (launchParams) => {
    for (const file of launchParams.files) {
      const img = document.createElement("img");
      img.src = URL.createObjectURL(await file.getFile());
      imageContainer.appendChild(img);
    }
  });
}

请注意，代码在使用 launchQueue 之前检查它是否存在，以确保应用在不支持该 API 的浏览器中正常运行。

另请参阅

file_handlers 清单成员
LaunchQueue 接口
文件系统 API
文件 API
让已安装的 Web 应用成为文件处理程序在 developer.chrome.com 上 (2022)
在渐进式 Web 应用中处理文件在 learn.microsoft.com 上 (2023)