Web Share Target API 是让PWA作为系统分享目标接收内容的机制，需HTTPS、已安装PWA、manifest中配置share_target字段，并通过Service Worker监听sharetarget事件处理分享数据。
Web Share Target API 和 Web Share API 不是同一个东西，前者是“接收方”，后者是“发送方”。你问的是如何让自己的网页（比如一个 PWA）能作为系统分享菜单里的目标应用，被其他应用或网页“分享到”你这里——这属于 Web Share Target 的范畴。
确认你的网站支持作为分享目标
Web Share Target 是 Manifest 文件中的一项能力，它让浏览器知道：“当用户从别的地方选中内容并点击‘分享到…’时，我的这个网页可以接收文本、链接或文件”。它不靠 JavaScript 调用，而是靠 web app manifest 配置 + 后续的 Service Worker 拦截处理。
- 必须是已安装的 PWA（用户点击了“添加到主屏幕”或通过 prompt 安装）
- 站点需运行在 HTTPS 下（localhost 也允许）
- manifest.json 中需声明
share_target字段，并指定接收类型和对应页面路径 - 需要注册一个 Service Worker，并在其中监听
fetch或sharetarget事件（Chrome 支持sharetarget事件；其他浏览器可能需用fetch+ URL 参数解析模拟）
配置 manifest.json 的 share_target
在你的 manifest.json 中加入类似如下字段：
{
"share_target": {
"action": "/receive-share",
"method": "POST",
"enctype": "multipart/form-data",
"params": {
"title": "title",
"text": "text",
"url": "url",
"files": [{
"name": "my-file",
"accept": ["image/*", ".pdf"]
}]
}
}
}
说明：
– action 指用户选择“分享到本应用”后，系统将跳转或提交数据到该路径
– params 告诉系统你要接收哪些字段：标题、文字、链接，或指定名称的文件（如 my-file）
– 多个文件可定义多个 files 条目，但目前仅 Chrome on Android 稳定支持文件接收
在 Service Worker 中处理分享请求
Chrome 93+ 支持直接监听 sharetarget 事件（无需走 fetch 模拟）：
立即学习“Java免费学习笔记（深入）”；
self.addEventListener('sharetarget', (event) => {
const { title, text, url, files } = event.data;
// 可保存、展示或转发这些内容
event.respondWith(
Promise.resolve().then(() => {
console.log('收到分享:', { title, text, url, files });
// 例如：打开 /receive-share 页面并传参
clients.openWindow('/receive-share?title=' + encodeURIComponent(title));
})
);
});
注意：
– 此事件只在 PWA 已安装且用户从外部触发“分享到本应用”时触发
– event.data.files 是 FileList，可在页面 JS 中用 URL.createObjectURL() 预览
– 若未监听该事件，Chrome 会回退为导航到 action 路径并附带查询参数（如 ?text=xxx&url=yyy）
页面端接收并展示分享内容
比如你在 /receive-share 页面里，可通过以下方式获取内容：
- 如果是 POST 提交（配合 enctype），服务端需解析表单，再渲染或重定向
- 更常见的是前端处理：检查 URL searchParams，提取
title、text、url - 若含文件，需依赖 Service Worker 将文件传递给前台页面（例如用
postMessage）
示例（页面 JS）：
const urlParams = new URLSearchParams(window.location.search);
const title = urlParams.get('title');
const text = urlParams.get('text');
const url = urlParams.get('url');
if (title || text || url) {
document.querySelector('#shared-content').innerHTML = `
<h3>${title || '无标题'}</h3>
<p>${text || ''}</p>
<a href="https://www.php.cn/link/b85b19cea2f0268e105f30d78f668250">https://www.php.cn/link/b85b19cea2f0268e105f30d78f668250</a>
`;
}
兼容性与注意事项
目前 Web Share Target 支持非常有限：
- 仅 Chrome for Android（v71+）稳定支持完整功能（含文件）
- Edge for Android 有基础支持；Safari 和 Firefox 完全不支持
- 桌面端基本不可用（即使 PWA 已安装）
- 必须通过“添加到主屏幕”安装，仅标签页访问无法触发
- 不能绕过用户操作——必须由用户主动在系统分享菜单中选择你的应用
实际落地建议：把它当作增强体验的可选能力，而非核心流程。主站仍需提供常规的复制/手动分享入口。
