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

Web Share Target测试 - PWA分享接收

44
0
0
0

Web Share Target 测试工具

测试和调试 PWA 的分享接收(Share Target)功能,解析分享参数,验证 Manifest 配置。

Web Share API Service Worker 分享参数检测
URL 参数解析(GET 方式)
GET
参数名 解码值 原始值(URL编码) 类型
当前 URL 中未检测到分享参数
手动模拟分享数据
发送测试分享

使用浏览器的原生 Web Share API 触发分享面板,测试发送端功能。

Manifest 配置参考 (manifest.json)
GETGET 方式(简单文本/链接分享)
{
  "name": "我的PWA应用",
  "short_name": "PWA",
  "start_url": "/",
  "display": "standalone",
  "share_target": {
    "action": "/share-receiver",
    "method": "GET",
    "params": {
      "title": "title",
      "text": "text",
      "url": "url"
    }
  }
}

GET 方式特点:

  • 参数通过 URL 查询字符串传递
  • 适合分享标题、文本和链接
  • 不支持文件分享
  • 数据长度受 URL 长度限制
POSTPOST 方式(支持文件分享)
{
  "name": "我的PWA应用",
  "short_name": "PWA",
  "start_url": "/",
  "display": "standalone",
  "share_target": {
    "action": "/share-receiver",
    "method": "POST",
    "enctype": "multipart/form-data",
    "params": {
      "title": "title",
      "text": "text",
      "url": "url",
      "files": [
        {
          "name": "attachments",
          "accept": ["image/*", "video/*", "application/pdf"]
        }
      ]
    }
  }
}

POST 方式特点:

  • 数据通过 multipart/form-data 提交
  • 支持接收文件(图片、视频、PDF等)
  • 需要在 Service Worker 中解析 formData
  • 无数据长度限制
Service Worker 处理代码示例
// service-worker.js - 处理分享数据
self.addEventListener('fetch', (event) => {
  const url = new URL(event.request.url);
  
  // 检测是否为分享目标请求
  if (url.pathname === '/share-receiver') {
    
    if (event.request.method === 'POST') {
      // POST 方式:解析 formData
      event.respondWith(
        (async () => {
          const formData = await event.request.formData();
          const title = formData.get('title');
          const text = formData.get('text');
          const url = formData.get('url');
          const files = formData.getAll('attachments');
          
          // 处理分享数据...
          // 重定向到展示页面
          const params = new URLSearchParams({ title, text, url });
          return Response.redirect(`/share-preview?${params}`, 303);
        })()
      );
    } else {
      // GET 方式:从 URL 参数中提取
      const title = url.searchParams.get('title');
      const text = url.searchParams.get('text');
      const shareUrl = url.searchParams.get('url');
      
      // 直接响应或重定向
      return fetch(event.request);
    }
  }
});
浏览器 API 支持检测
API / 功能 支持状态 说明
navigator.share() 检测中... Web Share API - 发送分享
navigator.canShare() 检测中... 检测是否可分享特定数据
Service Worker 检测中... PWA 核心,处理分享接收
URLSearchParams 检测中... 解析 GET 方式分享参数
FormData 检测中... 解析 POST 方式分享数据
navigator.clipboard 检测中... 剪贴板 API(辅助调试)
常见问题与知识点 (FAQ)

Web Share Target 是 PWA(渐进式Web应用)的一项功能,允许您的 Web 应用注册为系统级分享目标。当用户在手机或其他设备上点击"分享"按钮时,您的 PWA 可以出现在分享列表中,接收来自其他应用分享的链接、文本、图片和文件。这是通过 manifest.json 中的 share_target 字段配置实现的。

GET 方式:分享数据通过 URL 查询参数(?title=xxx&text=xxx&url=xxx)传递。实现简单,适合纯文本和链接分享。缺点是不支持文件,且 URL 长度有限制(通常约2048字符)。

POST 方式:数据通过 HTTP POST 请求的 multipart/form-data 体传递。支持文件分享(图片、视频、PDF等),无数据大小限制。需要在 Service Worker 中使用 event.request.formData() 解析数据。

选择建议:如果只需要接收链接和文本,用 GET;如果需要接收文件,必须用 POST。

  1. 使用本工具:在上方"手动模拟分享数据"区域输入测试数据,生成测试URL并打开,查看参数是否正确解析。
  2. 实际设备测试:将 PWA 安装到手机,从浏览器或其他应用(如相册、文件管理器)触发分享,选择您的 PWA 作为目标。
  3. Chrome DevTools:在桌面 Chrome 中,可以通过 chrome://webapks/ 查看已安装的 PWA 信息。
  4. 检查 manifest:确保 manifest.json 中的 share_target.action 指向正确的路径。

在 manifest.json 的 share_target.params.files 数组中配置:

"files": [{"name": "attachments", "accept": ["image/*", "video/*", "application/pdf"]}]

常见 accept 类型:

  • image/* - 所有图片格式(JPEG, PNG, GIF, WebP等)
  • video/* - 所有视频格式
  • audio/* - 所有音频格式
  • application/pdf - PDF 文件
  • text/plain - 纯文本文件

多个类型用逗号分隔,如 image/png,image/jpeg。注意:实际支持的文件类型还取决于操作系统和分享来源应用。

Web Share Target 需要 PWA 被安装后才能生效。主流支持情况:

  • Android Chrome:✅ 完全支持(最成熟)
  • Android Edge:✅ 支持
  • iOS Safari (PWA):✅ iOS 14+ 开始支持
  • 桌面 Chrome/Edge:⚠️ 有限支持(部分版本支持)
  • 桌面 Firefox/Safari:❌ 暂不支持

注意:PWA 必须通过 HTTPS 提供,且需要有效的 manifest.json 和 Service Worker。

可以。在 manifest.json 的 share_target.params 中,您可以自定义映射关系。左侧是 Web Share 标准字段,右侧是您希望在 URL 参数或表单字段中使用的名称:

"params": {
  "title": "subject",    // 使用 "subject" 作为参数名
  "text": "body",        // 使用 "body" 作为参数名
  "url": "link"          // 使用 "link" 作为参数名
}

这样 URL 中就变成了 ?subject=xxx&body=xxx&link=xxx。这在需要与后端接口保持一致时非常有用。

在 Service Worker 的 fetch 事件中拦截分享请求,使用 event.request.formData() 解析:

self.addEventListener('fetch', (event) => {
  if (event.request.method === 'POST' && 
      event.request.url.includes('/share-receiver')) {
    event.respondWith(
      (async () => {
        const formData = await event.request.formData();
        const title = formData.get('title');
        const files = formData.getAll('attachments');
        // 处理文件...
        return Response.redirect('/share-success', 303);
      })()
    );
  }
});

关键点:使用 303 See Other 重定向,避免浏览器重复提交表单。

常见原因及排查步骤:

  1. PWA 未安装:Web Share Target 仅在 PWA 被安装(添加到主屏幕)后生效。
  2. Manifest 配置错误:检查 share_target 字段的 JSON 格式是否正确。
  3. HTTPS 要求:PWA 必须通过 HTTPS 提供服务(localhost 除外)。
  4. Service Worker 未注册:确保 Service Worker 已正确注册并激活。
  5. 分享内容类型不匹配:如果配置了文件类型限制(accept),分享的文件类型必须匹配。
  6. 浏览器不支持:部分浏览器或版本可能不支持 Web Share Target。

建议先在 Android Chrome 上测试,这是支持最完善的平台。

这是两个相关但方向相反的功能:

  • Web Share API (navigator.share()):发送端。允许网页调用系统原生分享面板,将内容分享到其他应用。这是"分享出去"。
  • Web Share Target:接收端。允许 PWA 注册为分享目标,接收来自其他应用的分享内容。这是"接收进来"。

两者配合使用可以实现完整的分享闭环:一个 PWA 可以通过 Web Share Target 接收内容,也可以通过 Web Share API 分享内容给其他应用。

调试技巧:

  • 使用本工具:通过生成的测试URL模拟GET分享,验证参数解析逻辑。
  • Chrome DevTools:连接 Android 设备,在 chrome://inspect 中调试已安装的 PWA。
  • Service Worker 日志:在 SW 中添加 console.log,通过 DevTools 查看。
  • 监控网络请求:在 DevTools Network 面板中查看分享请求的实际参数。
  • 验证 Manifest:使用 Chrome DevTools 的 Application > Manifest 面板检查配置。

提示:可以在 Service Worker 中使用 event.request.clone() 来多次读取请求体,便于调试。