Web 应用覆盖面广。可在多个平台上运行。用户可通过链接轻松分享这些内容。但一直以来,这些应用都未与操作系统集成。不久以前,它们甚至还无法安装。幸运的是,情况已经改变,现在我们可以利用这种集成向 PWA 添加实用功能。我们来了解一下其中一些选项。
使用文件系统
使用文件的典型用户工作流程如下所示:
- 从设备中选择文件或文件夹,并直接打开。
- 然后更改这些文件或文件夹,然后直接保存回原来的内容。
- 创建新的文件和文件夹。
在 File System Access API 之前,Web 应用无法执行此操作。打开文件需要上传文件,保存更改需要用户下载文件,而网络根本没有权限在用户的文件系统中创建新文件和文件夹。
打开文件
如需打开文件,请使用 window.showOpenFilePicker()
方法。请注意,此方法需要用户手势,例如按钮点击。下面介绍了打开文件所需的其余设置:
- 从文件系统访问权限的文件选择器 API 中捕获文件句柄。这为您提供了有关该文件的基本信息。
- 使用该句柄的
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();
正在保存更改
若要保存对文件的更改,您还需要一个用户手势,然后执行以下操作:
- 使用文件句柄创建
FileSystemWritableFileStream
。 - 更改数据流。这不会就地更新文件,而是通常会创建一个临时文件。
- 最后,完成更改后,关闭流,将更改从临时变为永久。
我们来看一下代码:
// 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();
文件处理
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": [ "/*" ]
}
}
]
}
网址协议处理
网址处理支持标准 https
协议网址,但也可以使用自定义 URI 架构,例如 pwa://
。在某些操作系统中,已安装的应用通过注册其架构的应用获得这种能力。
对于 PWA,此功能需使用网址协议处理程序 API 才能启用(仅适用于桌面设备)。您只能通过在应用商店中分发您的 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,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'
上)或请求正文中传递的参数。
例如,通过在清单中添加以下内容,您可以为 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 接收共享数据。
联系人选取工具
借助 Contact Picker API,您可以请求设备呈现包含用户所有联系人的原生对话框,以便用户可以选择一个或多个联系人。然后,您的 PWA 就可以从这些联系人接收您需要的数据。
Contact Picker API 主要在移动设备上提供,并且在兼容平台上通过 navigator.contacts
接口完成所有工作。
您可以请求可用的属性以使用 navigator.contacts.getProperties()
进行查询,并请求选择一个或多个联系人以及所需属性的列表。
部分示例属性包括 name
、email
、address
和 tel
。当您要求用户选择一位或多位联系人时,您可以调用 navigator.contacts.select(properties)
,并传递一系列您希望获得的属性。
以下示例将列出选择器收到的联系人。
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.
}
}