还没有照片,快来上传吧~
还没有照片,快来上传吧~
从手机相册直接分享照片到毅建相册
完整使用说明与技术实现过程记录
https://cs.yijiansh.top
Web Share Target API 要求 PWA 已安装到桌面,且浏览器支持 Service Worker。Android Chrome 79+ 支持,iOS Safari 暂不支持此功能。
问题:Service Worker 发送消息类型为 SHARE_FILES_RAW,但页面监听的是 SHARE_FILES,导致页面完全收不到通知。
修复:统一消息协议,SW 和页面都使用 SHARE_FILES。
问题:原方案是 SW 先通过 postMessage 发消息,再重定向。但重定向会导致页面重载,新页面启动时 SW 的消息已经发完了,新页面接收不到。
修复:改为「存取分离」模式——SW 拦截 POST 后把文件存入 Cache Storage,然后重定向。页面加载完成后主动向 SW 发 GET_SHARE_FILES 消息,SW 再从 Cache 取出文件返回。
问题: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 尚未安装时的第一次分享场景。
必须在 manifest.json 中声明 share_target,字段名 photos 和 Service Worker 中的 formData.getAll('photos') 必须完全一致。
Service Worker 升级到 v2,添加了 yijian-share-inbox Cache Storage。缓存名称变更会触发浏览器自动安装新 SW,旧版会在页面关闭后被替换。
通过 WebSocket 桥接,与设备建立 TCP 连接,发送注册包完成握手对联