配了五年分享功能，今天发现浏览器自己会了——Web Share API 把这件事彻底变了

阿跨·跨端开发 内容创作者 2026-08-13 208 阅读

以前做分享功能，你要配 App 协议、调 native SDK、应付各种机型的碎片化。今天 Web Share API 把这一整条链路的答案都交给了浏览器，一行 JS 直接调起系统分享面板。

问题：分享这件事为什么一直在自己造轮子

手机浏览器打开一个网页，看到一段话想发给微信好友——以前你只能让用户复制链接、切到微信、粘贴。这条链路上产品经理和工程师都折腾了好多年，做了各种中间页、唤起协议、deeplink 桥接，每个平台各配一套，代码越叠越厚。

根本原因是：浏览器一直没给开发者一个「调系统分享面板」的原生能力。2026 年这个能力已经稳定了 5 年，但大多数前端团队还在用老方案。

方案一：navigator.share() 调起系统分享面板

这就是你需要的全部代码：

const shareButton = document.querySelector('.share-button');

shareButton.addEventListener('click', async () => {
  if (navigator.canShare && !navigator.canShare({ url: window.location.href })) {
    console.log('当前环境不支持分享该内容');
    return;
  }

  try {
    await navigator.share({
      title: document.title,
      text: '看看这个页面：',
      url: window.location.href,
    });
    console.log('分享成功');
  } catch (error) {
    if (error.name === 'AbortError') {
      return;
    }
    console.error('分享失败', error);
  }
});

这段代码做了什么：点击按钮后，浏览器弹出系统原生分享面板，用户选目标应用（微信、邮件、备忘录等），直接发出去。支持 text / title / url 三个字段，url 和 text 二选一必填一个。

支持情况：Android Chrome 81+、iOS Safari 13+、Desktop Chrome 89+ 均已支持，2026 年移动端覆盖率超过 95%，PC 端主要在 Chrome/Edge。

方案二：接收别人分享过来的内容——share_target

这只是故事的一半。

另一半是：别人从其他 App 分享一个链接、一段文字、或者一张图片到你的 PWA，你的应用要怎么接？

这靠的是 Web App Manifest 里的 share_target 字段。

在 manifest.json 里注册：

{
  "name": "我的 PWA",
  "start_url": "/",
  "display": "standalone",
  "share_target": {
    "action": "/receive-share/",
    "method": "GET",
    "params": {
      "title": "t",
      "text": "b",
      "url": "u"
    }
  }
}

当用户把内容分享给你的 PWA 时，浏览器会把参数拼成 query string 跳转到 /receive-share/?t=标题&b=正文&u=https%3A%2F%2Fexample.com，你在服务端或者 Service Worker 里读这些参数做后续处理。

GET vs POST 怎么选：

  • GET：纯文本、URL，不涉及文件，服务器直接读 query 参数
  • POST：包含二进制文件（图片、音视频），或者要创建数据（收藏夹、写数据库），用 enctype: 'multipart/form-data'

POST 传文件时 params 要写 files 字段：

{
  "share_target": {
    "action": "/upload/",
    "method": "POST",
    "enctype": "multipart/form-data",
    "params": {
      "files": [
        { "name": "attachment", "accept": ["image/*", ".pdf"] }
      ]
    }
  }
}

accept 可以是 MIME 类型或文件后缀，一个 share_target 可以接受多种文件类型。

Level 2 跨域传文件： 早期版本里 share_target 只能接收同源数据，Web Share Level 2 已经解除了这个限制，跨域分享文件到你的 PWA 现在是标准能力。

方案三：canShare() 先问再调——不要让用户白点

一个容易踩的坑：桌面浏览器打开你的页面，用户点分享按钮，浏览器报错。

navigator.canShare() 就是干这个的，在调 share 之前先问一句「能不能分享」：

const canShareText = navigator.canShare?.({ text: 'hello' });
const canShareUrl = navigator.canShare?.({ url: 'https://example.com' });
const canShareFiles = navigator.canShare?.({
  files: [new File(['🖼'], 'icon.png', { type: 'image/png' })]
});

桌面浏览器不支持 files（因为没有系统分享面板对应的 App），但 URL 和 text 在某些场景下仍然可用。加上这个判断，分享按钮在不支持的环境下直接隐藏或禁用，比让用户点完弹错体验好得多。

落地：你现在就能做的

第一步：基础分享能力

如果你的项目已经有 PWA 配置，在 manifest.json 加一行 navigator.share() 调用即可。没有 PWA 也行，直接在任意网页里用，浏览器会自动处理权限提示（iOS 第一次调起时会问用户授权）。

第二步：接收分享内容

如果你的应用是 PWA，在 manifest 里注册 share_target，对应的服务端路由接收参数处理即可。没有 PWA 的页面可以靠 Service Worker 的 launchQueue API 处理（Chrome 125+）。

第三步：判断支持情况再展示按钮

const isShareSupported = 'share' in navigator;
const isFileSharingSupported = navigator.canShare?.({ 
  files: [new File([''], 'test', { type: 'image/png' })] 
});

document.querySelector('.share-btn').style.display = isShareSupported ? '' : 'none';

判断标准： 如果你的用户主要在手机上，直接用。如果有桌面用户但不需要文件分享能力，canShare({ url }) 返回 true 就可以展示按钮。完全不需要为了兼容性再接各种 SDK。

Web Share API 不是一个新 API，它在浏览器里已经等了五年。今天如果你还在自己造分享的轮子，只需要重新评估一下这件事的账——一行代码换掉半年的维护成本，这个 ROI 没有理由不算清楚。

评论区

0 条评论

登录后可评论。

阿跨·跨端开发 208 阅读