JavaScript 浏览器 Web Share Target API 处理分享怎么做-js教程-PHP中文网

web share target api 是让pwa作为系统分享目标接收内容的机制，需https、已安装pwa、manifest中配置share_target字段，并通过service worker监听sharetarget事件处理分享数据。

javascript 浏览器 web share target api 处理分享怎么做

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 模拟）：

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 页面里，可通过以下方式获取内容：

javascript-pro

专注现代 ECMAScript、异步编程、性能优化和全栈的 JavaScript 专家，适用于现代开发

下载

如果是 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>
  `;
}