使用Share Target API时无法获取文件的技术求助

你的核心问题是：PWA通过系统分享图片时，仅Response.redirect生效，waitUntil内的表单解析、消息广播、文件缓存逻辑都未执行，但表单上传完全正常。结合代码和场景，主要问题点及修复方案如下：

1. 优先修复BroadcastChannel未初始化的问题 #

你在service-worker.js中直接使用broadcastChannel但未初始化，这会触发ReferenceError，直接终止waitUntil内的所有后续代码（但respondWith的跳转不受影响，因为它是独立执行的）。

修复代码： #

在service-worker.js最顶部添加广播通道初始化：

// 初始化广播通道，通道名需和前端页面使用的保持一致
const broadcastChannel = new BroadcastChannel('share-file-channel');

2. 添加错误捕获，定位隐藏问题 #

系统分享的请求可能存在表单结构差异或其他异常，添加try-catch可以捕获错误并输出，即使手机端调试困难，也能通过广播把错误消息发送到前端页面。

修改waitUntil内的代码： #

event.waitUntil(
  (async function () {
    try {
      console.log("[SW WAIT UNTIL]");

      const formData = await event.request.formData();
      // 打印表单所有字段名，验证是否和预期一致
      console.log("[FORM DATA KEYS]", Array.from(formData.keys()));
      
      const filesReceived = formData.getAll("data");
      const fileReceived = filesReceived[0];

      console.log("[BROADCASTING]", fileReceived);
      broadcastChannel.postMessage({ file: fileReceived });

      // 先注释这行，验证前面的逻辑是否正常执行
      // await handleCacheFile(fileReceived);
    } catch (err) {
      console.error("[SW SHARE ERROR]", err);
      broadcastChannel.postMessage({ error: err.message });
    }
  })()
);

3. 验证表单字段名是否匹配 #

虽然manifest.json中配置了name: "data"，但部分系统可能存在字段名差异。通过上面的console.log("[FORM DATA KEYS]")可以查看实际的字段名，如果不是data，需要同步修改manifest.json的params.files.name或formData.getAll()的参数。

4. 确保Service Worker已更新生效 #

手机端PWA可能缓存旧的Service Worker，修改后需要：

• 在PWA页面中触发Service Worker更新（比如添加更新按钮，调用registration.update()）
• 卸载重新安装PWA，确保加载最新的Service Worker

5. 检查handleCacheFile函数的实现 #

如果前面的逻辑恢复正常，但缓存仍有问题，需要验证handleCacheFile函数是否正确处理Promise，是否存在未捕获的错误。可以先注释掉该函数调用，确认基础逻辑正常后再逐步调试。

内容的提问来源于stack exchange，提问作者Jackson D