如何利用HTML的Share Target API使PWA接收来自其他应用的分享内容-html教程-PHP中文网

PWA接收外部分享需通过manifest.json的share_target字段声明并配合服务端POST路由实现，缺一不可；未安装、非HTTPS、scope越界或字段拼写错误均会导致分享目标注册失败且无提示。

如何利用html的share target api使pwa接收来自其他应用的分享内容

navigator.share 是用来“发”内容的，而接收分享必须靠 Share Target API —— 它不是 JavaScript API，而是通过 Web App Manifest 的 share_target 字段声明 + 服务端路由配合实现的。不配 manifest、不处理 POST 请求，PWA 永远收不到外部应用传来的数据。

manifest.json 里必须写对 `share_target` 结构

浏览器只认 manifest 里的声明，JS 层完全不参与注册过程。常见错误是字段名拼错（比如写成 shareTarget 或 share-target），或漏掉必填字段。

action：必须是相对路径（如 /share），且该路径要能响应 POST 请求；不能是绝对 URL 或带查询参数的路径
method：只能是 POST；设成 GET 会静默失败
enctype：若要接收文件，必须设为 multipart/form-data；仅传文本/链接时可省略（默认 application/x-www-form-urlencoded）
params：必须包含 title、text、url、files 中至少一个键，且键名要和实际提交字段一致

示例正确配置：

{
  "share_target": {
    "action": "/share",
    "method": "POST",
    "enctype": "multipart/form-data",
    "params": {
      "title": "title",
      "text": "text",
      "url": "url",
      "files": ["file"]
    }
  }
}

服务端必须能解析 POST 提交的三种数据格式

操作系统在调用 Share Target 时，会根据内容类型自动选择编码方式：纯文本走 application/x-www-form-urlencoded，含文件走 multipart/form-data，而某些安卓厂商定制系统可能用 application/json（虽非标准但真实存在）。只支持一种格式的服务端大概率收不到部分设备的分享。

收到 application/x-www-form-urlencoded 时，检查 req.body.title、req.body.text 等字段
收到 multipart/form-data 时，用 busboy 或 multer 解析 file 字段（注意 manifest 中 files 数组里写的字段名就是表单字段名）
遇到 application/json，直接 JSON.parse(req.body)，结构通常为 { title, text, url, files: [...] }

Node.js Express 示例片段（需 multer 和 body-parser）：

Wechat Article Html

将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。

下载

app.post('/share', upload.fields([{ name: 'file', maxCount: 10 }]), (req, res) => {
  const title = req.body.title || '';
  const text = req.body.text || '';
  const url = req.body.url || '';
  const files = req.files?.file || [];
  // 处理逻辑...
});

Chrome/Edge 对 PWA 安装状态有硬性要求

即使 manifest 配得完全正确，如果用户没把 PWA “添加到主屏幕” 或没完成安装流程（即没触发 beforeinstallprompt 并调用 prompt()），Share Target 不会被系统识别。这不是 bug，是规范强制行为 —— 只有已安装的 PWA 才能注册为系统级分享目标。

检查是否已安装：在 Chrome DevTools Application → Manifest 标签页中看 “Installability” 是否显示 “Installed”
未安装时调用 navigator.share 会成功，但反过来——其他 App 尝试分享给你的 PWA——会直接跳过它，不会报错也不会提示
Android 上还额外要求 PWA 必须有 display: "standalone" 或 "minimal-ui"，否则系统不将其视为可分享目标

调试时最容易忽略的是 HTTPS + 作用域边界

Share Target 要求整个流程都在 HTTPS 下进行，连重定向都不能跳到 HTTP。更隐蔽的问题是作用域（scope）设置：如果 manifest 的 scope 是 /app/，那 share_target.action 就必须在 /app/ 下，比如 /app/share；设成 /share 会导致注册失败且无提示。