如何实现文件后台上传至Firebase Storage，页面退出仍续传？

这个问题我之前帮不少开发者解决过，核心就是要把上传逻辑从当前页面的主线程中剥离出来，交给不受页面生命周期影响的后台执行环境。下面是几个靠谱的方案，按实用性和兼容性排序：

1. 用 Service Worker 接管上传请求 #

Service Worker 是独立于网页的后台脚本，它的生命周期和页面完全分离——哪怕你关闭页面、跳转标签，只要浏览器还在运行，它就能继续处理网络请求。

实现步骤大概是这样：

• 首先在你的页面中注册 Service Worker：

  if ('serviceWorker' in navigator) {
    window.addEventListener('load', async () => {
      try {
        await navigator.serviceWorker.register('/sw.js');
        console.log('Service Worker 注册成功');
      } catch (error) {
        console.error('Service Worker 注册失败:', error);
      }
    });
  }
  

• 在 Service Worker 文件（sw.js）中，拦截上传请求，用 Fetch API 重新发起上传：

  self.addEventListener('fetch', (event) => {
    const request = event.request;
    // 判断是不是上传请求，比如根据 URL 或请求方法
    if (request.method === 'POST' && request.url.includes('/upload')) {
      event.respondWith(
        fetch(request)
          .then(response => {
            // 上传完成后，可以把结果存到 IndexedDB，或者通过 postMessage 通知页面（如果页面还在的话）
            return response;
          })
          .catch(error => {
            // 处理上传失败，比如重试逻辑
            console.error('上传失败:', error);
            return new Response(JSON.stringify({ error: '上传失败' }), { status: 500 });
          })
      );
    }
  });
  

• 要注意：上传进度的跟踪需要额外处理，因为 Service Worker 里没法直接获取 XMLHttpRequest 的 progress 事件，你可以考虑把文件分片上传，或者用 ReadableStream 来监控进度；另外，上传结果可以存在 IndexedDB 里，等用户回到页面时再读取展示。

2. 使用 Background Fetch API（专门为后台上传设计） #

这个 API 是浏览器专门为后台下载/上传场景推出的，比 Service Worker 更贴合需求——它会自动在后台维持上传任务，哪怕页面关闭，完成后还能通过通知提醒用户。

示例代码：

• 在页面中发起 Background Fetch：

  if ('BackgroundFetchManager' in navigator) {
    async function startBackgroundUpload(file) {
      const formData = new FormData();
      formData.append('file', file);
      
      const fetchOptions = {
        method: 'POST',
        body: formData,
        headers: { 'Authorization': 'Bearer YOUR_TOKEN' }
      };
      
      try {
        const bgFetch = await navigator.backgroundFetch.fetch('upload-task', '/api/upload', fetchOptions);
        console.log('后台上传任务已启动:', bgFetch);
        
        // 监听任务完成
        bgFetch.addEventListener('success', () => {
          console.log('上传成功');
          // 可以显示通知
          new Notification('上传完成', { body: '你的文件已经上传成功' });
        });
        
        bgFetch.addEventListener('failure', () => {
          console.error('上传失败');
          new Notification('上传失败', { body: '文件上传遇到问题，请重试' });
        });
      } catch (error) {
        console.error('无法启动后台上传:', error);
      }
    }
  }
  

• 在 Service Worker 中监听后台任务的结果：

  self.addEventListener('backgroundfetchsuccess', (event) => {
    const bgFetch = event.registration;
    // 处理成功后的逻辑，比如更新缓存或通知用户
    event.waitUntil(
      bgFetch.matchAll()
        .then(responses => {
          return Promise.all(responses.map(response => response.json()));
        })
        .then(results => {
          console.log('后台上传结果:', results);
          return self.registration.showNotification('上传完成', { body: '文件已成功上传' });
        })
    );
  });
  
  self.addEventListener('backgroundfetchfailure', (event) => {
    self.registration.showNotification('上传失败', { body: '文件上传未完成，请检查网络后重试' });
  });
  

• 兼容性提醒：这个 API 目前在 Chrome、Edge 等 Chromium 系浏览器支持较好，Firefox 和 Safari 还在跟进，所以如果要兼容全浏览器，可能需要结合 Service Worker 做降级处理。

3. 后端队列配合分片上传（适合大文件场景） #

如果你的上传文件比较大，或者想彻底摆脱浏览器的限制，可以把上传逻辑拆分：

• 前端把文件分成多个小分片，依次把分片上传到后端；
• 后端接收到分片后，先存储到临时目录，同时记录上传进度；
• 当所有分片都上传完成后，后端再把分片拼接成完整文件；
• 前端只需要发起分片上传的请求，哪怕页面关闭，后端会继续处理拼接逻辑——等用户回到页面时，只需要查询后端的上传状态即可。

这种方案的好处是：即使浏览器崩溃，用户也可以从上次中断的分片继续上传，而且后台任务完全在后端执行，不受前端页面生命周期影响。

额外注意事项 #

• 进度跟踪与状态同步：不管用哪种方案，都需要考虑如何在用户返回页面时展示上传进度和结果，比如用 IndexedDB 存储上传状态，或者定期从后端查询；
• 错误重试：网络波动是常事，要给上传任务加上重试逻辑，比如 Service Worker 里监听失败后重新发起请求，或者后端分片上传时允许重复上传相同分片；
• 浏览器资源限制：有些浏览器会限制后台任务的资源使用，比如长时间无操作后暂停后台任务，所以尽量让上传任务简洁，避免占用过多资源。

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