🖼️
从相册选择照片
支持 JPG、PNG、GIF、WebP,可多选
📁 选择照片
我的照片
0 张
📷

还没有照片,快来上传吧~

📖 相册分享说明

从手机相册直接分享照片到毅建相册
完整使用说明与技术实现过程记录

1如何使用手机分享功能

  • 1 首次访问:用手机 Chrome 浏览器打开 https://cs.yijiansh.top
  • 2 安装 PWA:点击顶部横幅的「安装」按钮,将毅建相册添加到手机桌面(安装后分享功能才能生效)
  • 3 从相册分享:打开手机相册 → 选中照片 → 点「分享」→ 在分享列表中找到「毅建相册」→ 点击
  • 4 自动导入:App 自动打开,图片会自动出现在相册中,无需手动操作
  • 5 离线可用:已上传的照片存在手机本地(IndexedDB),断网后仍可浏览
💡 提示:如果分享后没有看到图片,请尝试:① 清除网站缓存后重新访问 ② 在 Chrome 设置→站点设置→cs.yijiansh.top→清除数据,然后重新安装 PWA

2技术实现:完整分享链路

手机相册
POST /share-target
Service Worker 拦截
存入 Cache Storage
重定向 /?share-target=1
页面加载
发送 GET_SHARE_FILES
SW 返回 ArrayBuffer
IndexedDB 存储 + 显示

Web Share Target API 要求 PWA 已安装到桌面,且浏览器支持 Service Worker。Android Chrome 79+ 支持,iOS Safari 暂不支持此功能。

3踩坑经验:修复了哪些问题

已修复 Bug 1:消息类型不匹配

问题:Service Worker 发送消息类型为 SHARE_FILES_RAW,但页面监听的是 SHARE_FILES,导致页面完全收不到通知。
修复:统一消息协议,SW 和页面都使用 SHARE_FILES

已修复 Bug 2:重定向后 postMessage 消息丢失

问题:原方案是 SW 先通过 postMessage 发消息,再重定向。但重定向会导致页面重载,新页面启动时 SW 的消息已经发完了,新页面接收不到。
修复:改为「存取分离」模式——SW 拦截 POST 后把文件存入 Cache Storage,然后重定向。页面加载完成后主动向 SW 发 GET_SHARE_FILES 消息,SW 再从 Cache 取出文件返回。

已修复 Bug 3:Nginx 拦截 POST 返回 405

问题:Nginx 静态文件服务天然不允许 POST 方法,/share-target 的 POST 请求直接返回 405 Method Not Allowed,Service Worker 根本收不到请求。
修复:在 Nginx 配置中加入 error_page 405 =200 /index.html,将 405 重写为 200 并返回 index.html。PWA 安装后 SW 会在浏览器端优先拦截 POST,Nginx 只在 SW 未安装时兜底。

关键设计

Service Worker 的优先级高于网络请求。PWA 安装并激活后,浏览器在发出 POST /share-target 之前,SW 的 fetch 事件会先被触发,因此 Nginx 根本收不到真实的分享 POST。error_page 405 只是为了处理 SW 尚未安装时的第一次分享场景。

4关键配置文件

manifest.json Web Share Target 声明

必须在 manifest.json 中声明 share_target,字段名 photos 和 Service Worker 中的 formData.getAll('photos') 必须完全一致。

sw.js v2 Service Worker 缓存版本

Service Worker 升级到 v2,添加了 yijian-share-inbox Cache Storage。缓存名称变更会触发浏览器自动安装新 SW,旧版会在页面关闭后被替换。

🔌 TCP 测试工具

通过 WebSocket 桥接,与设备建立 TCP 连接,发送注册包完成握手对联

TCP 连接 1

目标 IP 地址
端口
未连接

TCP 连接 2

目标 IP 地址
端口
未连接

📤 发送数据(HEX)

📋 通信日志