Vue项目用Background Fetch API传S3文件触发失败事件，求排查

我在Vue项目中实现Background Fetch API，用于向S3存储桶上传文件，目标是让用户关闭屏幕后上传仍能继续（对移动Web应用很重要）。但测试上传时触发了backgroundfetchfail事件，相关代码如下：

service-worker.js 代码 #

self.addEventListener("install", (event) => {
  event.waitUntil(console.log("Service worker installing"));
});

self.addEventListener("activate", (event) => {
  console.log("Service Worker activating.");
});

self.addEventListener("fetch", (event) => {
  console.log("This is fetch");
});

self.addEventListener("backgroundfetchsuccess", async (event) => {
  const bgFetch = event.registration;
  const records = await bgFetch.matchAll();
  for (const record of records) {
    const response = await record.responseReady;
    if (!response.ok) {
      throw new Error(`Error response status: ${response.status}`);
    }
    console.log(`File uploaded successfully: ${response.status}`);
  }
  console.log("Background fetch success:", event);
});

self.addEventListener("backgroundfetchfail", async (event) => {
  console.log("Background fetch fail:", event);
});

self.addEventListener("backgroundfetchabort", async (event) => {
  console.log("Background fetch abort:", event);
});

上传函数代码 #

const uploadFile = async () => {
  if (!selectedFile.value) {
    message.value = "No file selected";
    return;
  }

  message.value = "Generating presigned URL...";
  let presignedUrl;

  try {
    const s3Client = new S3Client({
      region: s3Config.region,
      credentials: {
        accessKeyId: s3Config.accessKeyId,
        secretAccessKey: s3Config.secretAccessKey,
      },
    });

    const command = new PutObjectCommand({
      Bucket: s3Config.bucketName,
      Key: selectedFile.value.name,
      ContentType: selectedFile.value.type,
    });

    presignedUrl = await getSignedUrl(s3Client, command, { expiresIn: 3600 });
  } catch (error) {
    message.value = `Error generating presigned URL: ${error.message}`;
    return;
  }

  message.value = "Uploading...";

  if ("BackgroundFetchManager" in self) {
    try {
      const swReg = await navigator.serviceWorker.ready;
      console.log("Service Worker ready:", swReg);

      const bgFetch = await swReg.backgroundFetch.fetch(
        "upload-file-abc",
        [
          new Request(presignedUrl, {
            method: "PUT",
            body: selectedFile.value,
            headers: { "Content-Type": selectedFile.value.type },
          }),
        ],
        {
          title: "File Upload",
          downloadTotal: selectedFile.value.size,
        }
      );

      bgFetch.addEventListener("progress", (event) => {
        if (!event.uploadTotal || !event.uploaded) return;
        const percent = Math.round((event.uploaded / event.uploadTotal) * 100);
        console.log(`Upload progress: ${percent}%`);
      });

    } catch (error) {
      message.value = `Error uploading file: ${error.message}`;
    }
  } else {
    message.value = "Background Fetch API not supported";
  }
};

请问我是否遗漏了什么配置或代码？

排查方向 #

• 修正Background Fetch参数：当前使用的downloadTotal是针对下载任务的参数，上传任务应该替换为uploadTotal，参数值保持selectedFile.value.size。参数不匹配可能导致后台任务被系统判定为异常。

• 预签名URL与请求头的一致性：S3预签名URL会严格校验请求头，确保实际请求的所有头都在生成签名时被包含。检查是否有浏览器自动添加的额外头（如Origin），如果有，需要在生成PutObjectCommand时将这些头加入Headers字段，确保签名时包含它们。

• 增强错误日志排查：修改backgroundfetchfail事件处理，打印更详细的失败信息：

  self.addEventListener("backgroundfetchfail", async (event) => {
    console.log("Background fetch fail reason:", event.failureReason);
    const records = await event.registration.matchAll();
    for (const record of records) {
      const response = await record.responseReady;
      console.log("Failed record:", record, "Status:", response.status);
    }
  });
  

  这能帮你定位具体是请求失败还是任务被中止，以及失败的HTTP状态码。

• 验证HTTPS环境：Background Fetch API仅支持HTTPS环境（localhost开发环境除外），如果测试环境是HTTP，会直接触发失败。

• 检查S3 CORS配置：确保S3桶的CORS策略允许PUT请求，并且允许你的前端Origin访问，同时允许Content-Type等请求头。示例CORS配置：

  {
    "CORSRules": [
      {
        "AllowedOrigins": ["你的前端域名"],
        "AllowedMethods": ["PUT"],
        "AllowedHeaders": ["Content-Type"],
        "MaxAgeSeconds": 3000
      }
    ]
  }
  

• 确认请求体有效性：确保selectedFile.value是标准的File对象，Background Fetch对请求体的序列化有要求，避免传递非标准的Blob或自定义对象。

内容的提问来源于stack exchange，提问作者Bimal Kafle