无需登录 数据私有 本地保存

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

PWA 开发工具 PWA Web Share Target 分享 演示
3
0
0
0

Web Share Target 演示

将你的 PWA 注册为系统分享目标，接收来自其他应用的内容

GET 方法 POST 方法 文件分享 PWA Manifest
1 📤 分享发送端（模拟） 模拟其他应用分享内容
当前浏览器不支持 Web Share API，请使用上方模拟功能
2 📥 分享目标接收端 PWA 接收并解析数据

等待分享数据...

填写左侧表单并点击"模拟分享"，或通过系统分享打开此页面

请求方法:
解析后的分享数据：
title -
text -
url -
POST方法请求体 (application/x-www-form-urlencoded)：
manifest.json 配置 
{
  "name": "我的分享PWA",
  "short_name": "分享PWA",
  "start_url": "/",
  "display": "standalone",
  "share_target": {
    "action": "/share-receiver",
    "method": "GET",
    "params": {
      "title": "title",
      "text": "text",
      "url": "url"
    }
  }
}
关键点：action 必须在PWA的scope范围内；GET方法参数通过URL传递
Service Worker 处理逻辑 
// sw.js - Service Worker
self.addEventListener('fetch', (event) => {
  const url = new URL(event.request.url);
  
  // 检测是否为分享目标请求
  if (url.pathname === '/share-receiver') {
    
    if (event.request.method === 'GET') {
      // GET: 从URL参数解析
      const params = url.searchParams;
      const shareData = {
        title: params.get('title'),
        text: params.get('text'),
        url: params.get('url')
      };
      // 存储或处理分享数据...
      
    } else if (event.request.method === 'POST') {
      // POST: 从表单数据解析
      event.respondWith(
        event.request.formData().then(formData => {
          const shareData = {
            title: formData.get('title'),
            text: formData.get('text'),
            url: formData.get('url')
          };
          // 重定向到展示页面...
        })
      );
    }
  }
});
注意：POST文件分享需设置 "enctype": "multipart/form-data"
📎 文件分享配置（高级） 
// manifest.json 中添加文件分享支持
"share_target": {
  "action": "/share-receiver",
  "method": "POST",
  "enctype": "multipart/form-data",
  "params": {
    "title": "title",
    "text": "text",
    "url": "url",
    "files": [
      {
        "name": "sharedFiles",
        "accept": ["image/*", "video/*"]
      }
    ]
  }
}
文件分享必须使用 POST 方法 + multipart/form-data 编码。Service Worker中通过 event.request.formData() 获取文件。

常见问题 FAQ

Web Share Target 是 PWA（渐进式Web应用）的一项功能，允许你的Web应用注册为系统的分享目标。当用户在手机或电脑上使用"分享"功能时，你的PWA会出现在分享目标列表中，就像原生应用一样。通过在 manifest.json 中配置 share_target 字段实现。这是让Web应用获得原生体验的关键API之一。

  • GET 方法：分享数据通过URL查询参数（query string）传递。例如 /share-receiver?title=标题&text=内容&url=https://...。优点是简单、易于调试，缺点是URL长度有限制，不适合大量文本。
  • POST 方法：分享数据通过HTTP请求体传递，使用 application/x-www-form-urlencoded 或 multipart/form-data 编码。优点是支持更大数据量和文件分享，缺点是需要Service Worker处理。
  • 文件分享必须使用POST + multipart/form-data。

  1. 确保PWA已安装到设备（添加到主屏幕/安装为应用）
  2. 打开任意支持分享的应用（如浏览器、相册、笔记应用）
  3. 点击分享按钮，查看分享目标列表中是否出现你的PWA
  4. 选择你的PWA，检查是否正确接收并显示了分享数据
  5. 使用Chrome DevTools的Application面板检查Manifest和Service Worker状态
  6. 可以在地址栏手动添加参数测试GET方法：?title=测试&text=hello&url=https://test.com

  • Android Chrome：✅ 完全支持（最广泛使用的平台）
  • Android Firefox：✅ 支持
  • Samsung Internet：✅ 支持
  • iOS Safari (PWA)：⚠️ 从iOS 14开始部分支持，体验有限
  • 桌面 Chrome/Edge：⚠️ PWA安装后支持，但桌面分享场景有限
  • 桌面 Firefox/Safari：❌ 不支持

主流使用场景在Android移动端，这也是大多数用户使用分享功能的环境。

action 指定的URL路径必须在PWA的scope范围内。例如：
  • 如果 scope 是 /，action可以是 /share-receiver
  • 如果 scope 是 /app/，action必须是 /app/ 下的路径
  • action不能指向外部域名（跨域不允许）
  • 建议使用简短路径，避免与其他路由冲突

特性Web Share APIWeb Share Target
方向📤 发送分享📥 接收分享
功能调用系统分享对话框，分享内容到其他应用注册为分享目标，接收来自其他应用的内容
配置JavaScript调用 navigator.share()在 manifest.json 中配置
典型场景网页上的"分享"按钮PWA作为内容接收器（如笔记、收藏夹）

两者互补：Web Share API让网页分享出去，Web Share Target让PWA接收分享。一个完整的PWA可以同时使用两者。

文件分享使用POST + multipart/form-data。在Service Worker中：

  1. 拦截fetch请求，检测是否为分享目标路径
  2. 使用 event.request.formData() 解析multipart数据
  3. 从FormData中获取文件：formData.get('sharedFiles')（对应manifest中配置的name）
  4. 文件可以存储到IndexedDB、Cache Storage，或通过postMessage传递给页面
  5. 处理完成后重定向到展示页面

注意：Service Worker中的文件处理受存储空间限制，大文件需谨慎处理。

是的。Web Share Target 功能需要PWA被安装（添加到主屏幕/通过浏览器安装）后才能生效。普通的网页浏览不会触发share_target注册。这是因为：
  • 系统需要在安装时读取manifest.json中的share_target配置
  • 操作系统将PWA注册为可用的分享目标
  • 安装后的PWA才会出现在系统分享菜单中
  • 用户卸载PWA后，分享目标也会被移除

此工具用于演示和教学 Web Share Target 的工作原理。实际使用需要将PWA安装到设备上。

参考文档： MDN Web Docs · web.dev · Chrome Developers

🔧 相关工具