操作系统集成

Web 应用覆盖面广。可在多个平台上运行。用户可通过链接轻松分享这些内容。但一直以来，这些应用都未与操作系统集成。不久以前，它们甚至还无法安装。幸运的是，情况已经改变，现在我们可以利用这种集成向 PWA 添加实用功能。我们来了解一下其中一些选项。

使用文件系统

使用文件的典型用户工作流程如下所示：

• 从设备中选择文件或文件夹，并直接打开。
• 然后更改这些文件或文件夹，然后直接保存回原来的内容。
• 创建新的文件和文件夹。

在 File System Access API 之前，Web 应用无法执行此操作。打开文件需要上传文件，保存更改需要用户下载文件，而网络根本没有权限在用户的文件系统中创建新文件和文件夹。

打开文件

如需打开文件，请使用 window.showOpenFilePicker() 方法。请注意，此方法需要用户手势，例如按钮点击。下面介绍了打开文件所需的其余设置：

1. 从文件系统访问权限的文件选择器 API 中捕获文件句柄。这为您提供了有关该文件的基本信息。
2. 使用该句柄的 getFile() 方法，您会获得一种称为 File 的特殊 Blob，其中包含文件的其他只读属性（例如名称和上次修改日期）。由于它是 Blob，因此可以对其调用 Blob 方法（例如 text()），以获取其内容。

// Have the user select a file.
const [ handle ] = await window.showOpenFilePicker();
// Get the File object from the handle.
const file = await handle.getFile();
// Get the file content.
// Also available, slice(), stream(), arrayBuffer()
const content = await file.text();

正在保存更改

若要保存对文件的更改，您还需要一个用户手势，然后执行以下操作：

1. 使用文件句柄创建 FileSystemWritableFileStream。
2. 更改数据流。这不会就地更新文件，而是通常会创建一个临时文件。
3. 最后，完成更改后，关闭流，将更改从临时变为永久。

我们来看一下代码：

// Make a writable stream from the handle.
const writable = await handle.createWritable();
// Write the contents of the file to the stream.
await writable.write(contents);
// Close the file and write the contents to disk.
await writable.close();

注意 ：Safari 会实现 File System Access API（并非用于公共系统），而是作为源私有沙盒实现的。您只能使用此 API 在该虚拟文件系统中读取和写入文件。

文件处理

File System Access API 可让您从应用内打开文件，但反之呢？用户希望将自己最喜爱的应用设置为打开文件的默认应用。文件处理 API 是一个实验性 API，可让已安装的 PWA 注册为用户设备上的文件处理程序，并在 Web 应用清单中指定 PWA 支持的 MIME 类型和文件扩展名。您可以为支持的扩展程序指定自定义文件图标。

注册后，您安装的 PWA 会作为选项显示在用户文件系统中，以便用户直接打开该文件。 以下是 PWA 读取文本文件的清单设置示例：

...
"file_handlers": [
     {
         "action": "/open-file",
         "accept": {
             "text/*": [".txt"]
         }
     }
]
...

网址处理

通过网址处理功能，PWA 可以从操作系统捕获属于其作用域的链接，并在 PWA 窗口中（而不是默认浏览器的标签页）呈现这些链接。例如，如果您收到链接到 PWA 的消息，或点击 PWA 中的深层链接（指向特定内容的网址），相应内容将在独立的窗口中打开。

使用 WebAPK 时（例如当用户通过 Chrome 安装 PWA 时），Android 上会自动支持此行为。在 iOS 和 iPadOS 上安装的 PWA 上，无法从 Safari 捕获网址。

对于桌面浏览器，网络浏览器社区制定了一个新的规范。该规范目前处于实验阶段；它添加了一个新的清单文件成员：url_handlers。此属性需要 PWA 想要捕获的源站数组。系统会自动授予 PWA 的来源，并且其他来源都必须接受通过名为 web-app-origin-association 的文件执行的该处理操作。 例如，如果您的 PWA 清单托管在 web.dev 上，并且您想要添加 app.web.dev 来源，则目录如下所示：

"url_handlers": [
    {"origin": "https://app.web.dev"},
]

在这种情况下，浏览器将检查 app.web.dev/.well-known/web-app-origin-association 中是否存在某个文件，从而接受来自 PWA 范围网址的网址处理。此文件必须由开发者创建。在以下示例中，该文件如下所示：

{
    "web_apps": [
        {
            "manifest": "/mypwa/app.webmanifest",
            "details": {
                "paths": [ "/*" ]
            }
        }
    ]
}

在采用 WebAPK 的 Android 上，PWA 会自动通过 Android intent 过滤器注册为清单范围的处理程序，并且无法向其中添加更多来源或范围。对于 iOS 和 iPadOS，您只能处理在 AppStore 中发布的 PWA 的网址，例如使用 PWABuilder 创建的网址。

网址协议处理

网址处理支持标准 https 协议网址，但也可以使用自定义 URI 架构，例如 pwa://。在某些操作系统中，已安装的应用通过注册其架构的应用获得这种能力。

对于 PWA，此功能需使用网址协议处理程序 API 才能启用（仅适用于桌面设备）。您只能通过在应用商店中分发您的 PWA 来允许移动设备使用自定义协议。

注意 ：对于使用网址协议处理程序 API 的 PWA，协议名称必须是安全名单方案之一，或必须使用 web+ 前缀。因此，在我们的示例中，应该有一个指向 web+pwa:// 的链接以打开我们的 PWA。

如要注册，您可以使用 registerProtocolHandler() 方法，或使用清单中的 protocol_handlers 成员、所需的架构以及要在 PWA 上下文中加载的网址，例如：

...
{
  "protocol_handlers": [
    {
      "protocol": "web+pwa",
      "url": "/from-protocol?value=%s"
    },
  ]
}
...

您可以在 PWA 中将网址 from-protocol 路由到正确的处理程序并获取查询字符串 value。%s 是触发操作的转义网址的占位符，因此如果您在 <a href="web+pwa://testing"> 等位置添加了链接，您的 PWA 将打开 /from-protocol?value=testing。

呼叫其他应用

您可以在各种平台上使用 URI scheme 连接到用户设备中的任何其他安装式应用（无论是否为 PWA）。您只需创建一个链接或使用 navigator.href 并指向所需的 URI 架构，并以网址转义形式传递参数即可。

您可以使用大家熟知的标准架构，例如 tel: 表示拨打电话，mailto: 表示电子邮件，sms: 表示短信；或者你可以了解其他应用的网址架构，例如知名的消息服务、地图、导航、在线会议、社交网络和应用商店。

注意 ：您可以使用通用 Web Share API，而不是使用私有 URI scheme 与即时通讯应用和社交媒体应用通信

网络共享

浏览器支持

• 89
• 93
• 12.1

来源

借助 Web Share API，PWA 可以通过共享渠道将内容发送到设备中的其他已安装应用。

该 API 仅适用于具有 share 机制的操作系统，包括 Android、iOS、iPadOS、Windows 和 ChromeOS。您可以共享包含以下内容的对象：

• 文本（title 和 text 属性）
• 网址（url 项资源）
• 文件（files 属性）。

如需检查当前设备是否可以共享简单的数据（如文本），检查是否存在 navigator.share() 方法，以共享文件；检查是否存在 navigator.canShare() 方法。

您可以通过调用 navigator.share(objectToShare) 请求共享操作。该调用会返回使用 undefined 进行解析或拒绝并返回异常的 Promise。

网络共享目标

借助 Web Share Target API，您可以将 PWA 作为该设备上其他应用（无论是否为 PWA）共享操作的目标。您的 PWA 会收到其他应用共享的数据。

目前，只有通过 WebAPK 和 ChromeOS 在 Android 设备上使用，且只有在用户安装您的 PWA 后才能使用。安装应用时，浏览器会在操作系统中注册共享目标。

您可以与网络共享目标草稿规范中定义的 share_target 成员一起在清单中设置网络共享目标。share_target 设置为具有以下属性的对象：

action

将在预计会接收共享数据的 PWA 窗口中加载的网址。

method

操作将使用 HTTP 动词方法，例如 GET、POST 或 PUT。

enctype

（可选）参数的编码类型默认为 application/x-www-form-urlencoded，但也可以设置为 POST 等方法的 multipart/form-data。

params

一个对象，用于将共享数据（来自 Web Share 的 title、text、url 和 files 键）映射到浏览器将使用所选编码在网址（在 method: 'GET' 上）或请求正文中传递的参数。

注意 ：如果您希望避免访问网络，可以在服务器端或 Service Worker 中解析 POST 请求。如需了解详情，请查看此示例。

例如，通过在清单中添加以下内容，您可以为 PWA 定义您希望接收共享数据（仅限标题和网址）：

...
"share_target": {
   "action": "/receive-share/",
   "method": "GET",
   "params": {
      "title": "shared_title",
      "url": "shared_url"
   }
}
...

在上一个示例中，如果系统中的任何应用与标题共享网址，并且用户从对话框中选择您的 PWA，则浏览器会创建一个新的导航到源的 /receive-share/?shared_title=AAA&shared_url=BBB，其中 AAA 是共享标题，BBB 是共享网址。您可以使用 JavaScript 通过 URL 构造函数解析 window.location 字符串中的数据。

浏览器将使用您清单中的 PWA 名称和图标来馈送操作系统的共享条目。您无法选择其他用于此用途的集合。

注意 ：请确保处理共享数据的网页可离线访问。您一定不希望用户在选择您的应用后因暂时未连接到网络而看到错误消息。

如需查看更详细的示例以及如何接收文件，请参阅使用 Web Share Target API 接收共享数据。

联系人选取工具

浏览器支持

• x
• x
• x
• x

来源

借助 Contact Picker API，您可以请求设备呈现包含用户所有联系人的原生对话框，以便用户可以选择一个或多个联系人。然后，您的 PWA 就可以从这些联系人接收您需要的数据。

Contact Picker API 主要在移动设备上提供，并且在兼容平台上通过 navigator.contacts 接口完成所有工作。

您可以请求可用的属性以使用 navigator.contacts.getProperties() 进行查询，并请求选择一个或多个联系人以及所需属性的列表。

部分示例属性包括 name、email、address 和 tel。当您要求用户选择一位或多位联系人时，您可以调用 navigator.contacts.select(properties)，并传递一系列您希望获得的属性。

注意 ：该 API 不能保证返回的对象将包含所有请求的属性，因此您应该重新检查是否存在这些属性。

以下示例将列出选择器收到的联系人。

async function getContacts() {
   const properties = ['name', 'email', 'tel'];
   const options = { multiple: true };
   try {
     const contacts = await navigator.contacts.select(properties, options);
     console.log(contacts);
   } catch (ex) {
     // Handle any errors here.
   }
}

资源

• File System Access API：简化对本地文件的访问
• 允许已安装的 Web 应用作为文件处理程序
• 处理渐进式 Web 应用中的文件
• 通过 Web Share API 与操作系统共享界面集成
• 与其他应用共享内容
• 使用 Web Share Target API 接收分享的数据
• 网页版联系人选择器