Web Share Target 演示 - 将 PWA 注册为分享目标

Web Share Target 是一项 Web 标准，允许渐进式 Web 应用（PWA）注册为操作系统级别的分享目标。当用户在手机或其他设备上发起分享操作时，安装了对应 PWA 的浏览器应用会出现在系统的分享面板中，用户可以选择将内容分享到该 Web 应用。与传统 Web 应用不同，具备 Web Share Target 能力的 PWA 可以像原生应用一样接收来自系统分享面板的内容，包括文本、链接和文件等。这项技术通过在 manifest.json 中配置 share_target 字段，并在 Service Worker 中实现请求处理逻辑来实现。

GET 方法将分享数据编码为 URL 查询参数传递，例如 ?title=标题&text=内容&url=链接。这种方式实现简单，适合传递简单的文本数据，但 URL 长度有限制（通常 2048 字符左右），且无法传递二进制文件。POST 方法将分享数据放在 HTTP 请求体中传递，没有 URL 长度限制，支持 multipart/form-data 编码格式，能够传递文件等二进制数据。对于纯文本分享场景，GET 方法更为简便；对于需要传递文件或大量数据的场景，POST 方法更为合适。在 manifest.json 中，通过 method 字段指定使用哪种方法。

测试 Web Share Target 需要以下步骤：首先，确保你的 PWA 已正确配置 manifest.json 中的 share_target 字段和 Service Worker 处理逻辑。其次，将 PWA 部署到 HTTPS 服务器上，并在 Android 设备的 Chrome 浏览器中访问并安装该 PWA（添加到主屏幕）。安装完成后，在任意支持分享的应用中（如 Chrome 浏览器、微信等），分享一个链接或文本，在弹出的分享面板中查找你的 PWA 图标。选择你的 PWA 进行分享，检查 Service Worker 是否正确接收并处理了分享数据。iOS Safari 也支持 Web Share Target，但配置方式略有不同。

Web Share Target API 在 Android 平台上有较好的支持。Android Chrome 从 75 版本开始完全支持该 API，Android Firefox 也提供了完整支持。在 Android 平台上，PWA 安装后即可作为分享目标出现。iOS Safari 从 iOS 15.4 开始提供部分支持，但功能和行为可能与 Android 平台有所不同，例如需要特定的 manifest.json 配置方式。桌面浏览器的支持情况较为有限，Chrome 桌面版在某些操作系统版本中提供了实验性支持。建议开发者在实际部署前，针对目标平台和浏览器进行充分的兼容性测试，可以使用本工具的模拟功能来验证不同配置下的行为表现。

share_target 的 action 字段指定了接收分享内容的页面路径，它必须满足以下限制：首先，action 路径必须在 PWA 的 scope 范围内。manifest.json 中的 scope 字段定义了 PWA 的作用域，action 路径不能超出这个范围，否则浏览器将无法正确处理分享请求。其次，action 路径应该是一个有效的 URL 路径，通常是一个相对路径（如 /share-receiver）。如果 action 路径指向一个不存在的页面，Service Worker 仍然可以拦截请求，但用户体验可能会受到影响。此外，同一个 PWA 只能注册一个 share_target，如果需要处理多种分享类型，可以通过 Service Worker 中的逻辑判断来区分。

Web Share API 和 Web Share Target 是两项不同但互补的 Web 标准。Web Share API（通过 navigator.share() 方法）允许 Web 应用主动发起分享操作，调用系统的原生分享面板，将内容分享到其他应用。它是一个「发送方」角色，让 Web 应用能够像原生应用一样触发系统分享。Web Share Target 则是「接收方」角色，它让 Web 应用能够出现在系统的分享面板中，接收来自其他应用的分享内容。两者通常配合使用：应用通过 Web Share API 分享内容，其他支持 Web Share Target 的应用接收这些内容。本工具主要演示 Web Share Target 的接收端功能，同时也提供了 Web Share API 的测试入口。

当使用 POST 方法并配置了 multipart/form-data 格式时，Service Worker 可以接收文件类型的分享数据。处理流程如下：在 manifest.json 的 share_target 配置中，将 method 设置为 POST，并在 params 中添加 files 字段，指定文件字段的名称（如 files）。在 Service Worker 的 fetch 事件处理器中，检测请求是否为分享请求，然后使用 FormData API 解析请求体：const formData = await request.formData()。通过 formData.get('files') 获取上传的文件对象，该对象是一个 File 实例，包含文件名、类型、大小和内容等信息。工具中展示了完整的文件处理代码示例，包括文件类型验证、大小检查和内容读取等操作。

是的，Web Share Target API 要求 PWA 必须已安装到设备上才能作为分享目标工作。这是因为只有已安装的 PWA 才会被操作系统识别为可注册的分享目标，浏览器才会将其纳入系统的分享面板列表中。未安装的普通网页不会出现在分享目标列表中。PWA 的安装方式包括：在 Android Chrome 中，访问 PWA 页面后点击地址栏的「安装」按钮或通过浏览器菜单的「添加到主屏幕」选项；在 iOS Safari 中，通过分享菜单的「添加到主屏幕」选项。安装完成后，PWA 可以从主屏幕启动，并作为独立的应用出现在系统的分享面板中。

在 share_target 的 params 配置中，除了必填的 title 和 text 字段外，还可以配置 url 字段作为可选参数。url 字段指定了分享链接在接收端数据中的参数名称。此外，share_target 还支持 optional 配置项，用于声明可选的分享参数。如果某个分享源不提供某个参数（如未分享标题），Service Worker 在解析时需要处理该参数可能为空的情况。合理配置可选参数能够提升 PWA 对不同类型分享源的兼容性，确保在各种分享场景下都能正确接收数据。

在 Service Worker 中，可以通过检查请求的 method 属性来区分 GET 和 POST 分享请求：event.request.method === 'GET' 表示 GET 请求，event.request.method === 'POST' 表示 POST 请求。GET 请求的数据包含在 URL 的查询参数中，使用 URL 和 URLSearchParams 对象解析：const url = new URL(event.request.url); const title = url.searchParams.get('title')。POST 请求的数据在请求体中，使用 request.formData() 或 request.text() 读取。在实际实现中，建议为两种方法编写独立的处理分支，确保数据解析的准确性和健壮性。工具中展示了完整的分支处理代码。