2025年9月7日中文

解锁您网页应用中弹性、可续传的下载功能。本综合指南涵盖背景提取 API、Service Worker 及实际操作，助您实现无缝大文件传输，即便网络中断也不怕。

精通前端背景提取：构建弹性、可续传的下载功能

在我们这个联系日益紧密的世界里，网络不再仅仅是静态文档的存放地。它已成为一个平台，承载着丰富的交互式应用，从高清视频内容到复杂的商业软件和沉浸式游戏，无所不包。这一演变带来了一个全球开发者都必须面对的重大挑战：在通常并不可靠的网络上可靠地传输大文件。无论是首尔通勤列车上的用户，南美洲偏远地区的学生，还是迪拜酒店里使用不稳定 Wi-Fi 的专业人士，连接中断都可能意味着下载失败、用户沮丧和体验破碎。正是在这种情况下，背景提取 API (Background Fetch API) 应运而生，成为一个改变游戏规则的解决方案。

像 `fetch()` 或 `XMLHttpRequest` 这样的传统方法功能强大，但它们本质上与网页的生命周期绑定。如果用户关闭标签页或导航到别处，下载就会被终止。没有内置机制能让它在页面会话结束后继续存在。背景提取 API 从根本上改变了这一模式。它允许网页应用将大型下载（和上传）任务交由浏览器本身处理，然后浏览器会在后台管理传输，独立于任何单个浏览器标签页。这意味着即使用户关闭了页面，下载也可以继续进行，更重要的是，当网络连接发生变化时，它们可以自动暂停和恢复。这是在网络上构建真正具有弹性、类似原生体验的下载功能的关键。

什么是背景提取 API？一个全球化的视角

从核心上讲，背景提取 API 是一项现代 Web 标准，旨在将大型网络请求委托给浏览器引擎。它使开发者能够启动在应用程序可见窗口生命周期之外持续存在的下载或上传。这不仅仅是一个小小的便利；它是一项旨在构建更强大、功能更丰富的网络的基础技术。

从全球的角度来看其影响。在世界许多地方，高速、稳定的互联网是一种奢侈品，而非必然。移动数据可能昂贵且按流量计费。一个应用要真正做到全球化，就必须考虑到这些多样化的网络条件。背景提取是一项促进公平的技术。它允许一个连接时断时续地区的用户开始下载教育视频或关键的软件更新，并相信它会在网络允许的情况下在后台完成，而不会因文件下载失败而浪费宝贵的数据。

背景提取的主要优势

弹性和续传： 这是其最核心的功能。浏览器底层的下载管理器能优雅地处理网络中断。如果连接丢失，下载会暂停。当连接恢复时，它会自动从上次中断的地方继续。这一切都无需编写复杂的 JavaScript 逻辑来处理 HTTP `Range` 头部。
离线持久性： 由于下载由浏览器进程管理并由 Service Worker 处理，它不与打开的标签页绑定。用户可以开始下载，合上笔记本电脑，通勤回家，再次打开，然后发现下载已经完成或取得了进展。
资源效率： 浏览器最擅长优化资源使用。它可以安排传输以利用 Wi-Fi 连接，从而节省移动数据，并管理进程以优化电池寿命，这对全球移动用户来说是一个至关重要的问题。
集成的用户体验： 浏览器可以为正在进行的下载提供一个原生的、系统级的用户界面。用户在管理来自原生应用的下载的地方，也能看到和管理这些网页下载，从而创造出一种无缝且熟悉的用户体验。这包括进度、完成和失败的通知。

核心组件：Service Worker 与 BackgroundFetchManager

要理解背景提取，你必须首先熟悉它的两个主要组件。它们协同工作：一个从网页发起请求，另一个在后台管理结果。

无名英雄：Service Worker

Service Worker 是一种 Web Worker，本质上是浏览器在后台运行的一个 JavaScript 脚本，完全独立于任何网页。它充当一个可编程的网络代理，拦截和处理网络请求、管理缓存并启用推送通知。因为它独立运行，所以即使你的网站没有在浏览器标签页中打开，它也可以执行任务。对于背景提取来说，Service Worker 是一个持久的环境，它监听下载的最终成功或失败，处理结果文件，并更新 UI 或缓存资产以供离线使用。

指挥家：BackgroundFetchManager

`BackgroundFetchManager` 是一个接口，可以从你的主网页的 JavaScript 中访问，用于启动和配置背景提取。你可以通过 Service Worker 注册对象来访问它：`navigator.serviceWorker.ready.then(swReg => swReg.backgroundFetch)`。它的主要方法是 `fetch()`，该方法接受一个 ID、一个要下载的文件列表以及一组选项。这个方法就像发令枪；一旦你调用它，浏览器就会接管，而你的 Service Worker 则在终点线等待。

分步实践指南

让我们一步步实现一个可续传的大型视频文件下载功能。这个例子具有普遍适用性，无论是美国的媒体平台、印度的电子学习网站，还是德国的企业培训门户网站。

第 1 步：检查浏览器支持情况

在做任何其他事情之前，你必须确保用户的浏览器支持背景提取 API。这种被称为渐进增强的做法，确保了每个人都能获得功能性的体验，即使他们无法使用最先进的功能。

在你的主应用脚本中，你可以检查 `BackgroundFetchManager` 是否存在：

if ('BackgroundFetchManager' in self) { // API受支持，我们可以显示增强的下载按钮 } else { // API不受支持，提供备用方案（例如，一个标准链接） }

第 2 步：注册 Service Worker

背景提取从根本上依赖于 Service Worker。如果你的渐进式网络应用（PWA）还没有 Service Worker，你需要创建一个并注册它。在你的项目根目录中创建一个名为 `service-worker.js` 的文件。然后，从你的主 JavaScript 文件中注册它：

async function registerServiceWorker() { if ('serviceWorker' in navigator) { try { const registration = await navigator.serviceWorker.register('/service-worker.js'); console.log('Service Worker registered successfully:', registration); } catch (error) { console.error('Service Worker registration failed:', error); } } } registerServiceWorker();

第 3 步：从前端启动背景提取

现在，让我们创建一个函数，当用户点击按钮时启动下载。这个函数将获取活动的 Service Worker 注册对象，然后调用 `backgroundFetch.fetch()`。

让我们来分解一下 `swReg.backgroundFetch.fetch()` 的参数：

ID (`'course-video-download-01'`)：此特定下载任务的唯一字符串标识符。你稍后将使用此 ID 来引用该任务。
Requests (`[videoUrl]`)：要提取的 URL 数组。你可以在一个分组的任务中下载多个文件。
Options (`{...}`)：用于配置下载的对象。`title` 和 `icons` 被浏览器用来创建原生的 UI 通知。`downloadTotal` 是所有文件合计的预期总大小（以字节为单位）；提供此项对于浏览器显示准确的进度条至关重要。

第 4 步：在 Service Worker 中处理事件

一旦下载任务被交给了浏览器，你前端代码的工作暂时就完成了。剩下的逻辑位于 `service-worker.js` 中，当任务完成或失败时，浏览器会唤醒它。

你需要监听两个关键事件：`backgroundfetchsuccess` 和 `backgroundfetchfail`。

// 在 service-worker.js 中 self.addEventListener('backgroundfetchsuccess', (event) => { const bgFetch = event.registration; event.waitUntil(async function () { console.log(`背景提取 '${bgFetch.id}' 已成功完成。`); // 打开我们将存储已下载文件的缓存 const cache = await caches.open('downloaded-assets-v1'); // 获取所有已下载文件的记录 const records = await bgFetch.matchAll(); // 对每条记录，将响应存储到缓存中 const promises = records.map(async (record) => { const response = record.response.clone(); await cache.put(record.request, response); }); await Promise.all(promises); // 可选：更新下载通知中的 UI 标题 await event.updateUI({ title: '下载完成，随时可用！' }); }()); }); self.addEventListener('backgroundfetchfail', (event) => { const bgFetch = event.registration; console.error(`背景提取 '${bgFetch.id}' 失败了。`); // 可选：更新 UI 以反映失败情况 event.updateUI({ title: '下载失败。请重试。' }); });

在成功处理器中，我们打开缓存存储 (Cache Storage)，使用 `bgFetch.matchAll()` 检索所有已下载的文件，然后将每个文件放入缓存中。这使得你的网页应用可以离线播放该视频。

第 5 步：监控进度和用户交互

一个好的用户体验需要提供反馈。当用户点击浏览器提供的下载通知时，我们应该将他们带到我们应用中的相关页面。我们通过 Service Worker 中的 `backgroundfetchclick` 事件来处理这个问题。

// 在 service-worker.js 中 self.addEventListener('backgroundfetchclick', (event) => { const bgFetch = event.registration; if (bgFetch.id === 'course-video-download-01') { event.waitUntil( clients.openWindow('/downloads') ); } });

这段代码告诉浏览器，当用户点击这个特定下载任务的通知时，打开你网站的 `/downloads` 页面。在该页面上，你可以显示下载进度或已完成的下载列表。

续传的魔力：它究竟是如何工作的？

背景提取最强大也可能是最被误解的方面是其自动续传能力。无需你编写任何特殊代码，它是如何工作的呢？

答案是，你已将责任委托给了一个高度优化的系统级进程：浏览器自身的下载管理器。当你启动一个背景提取时，你并没有直接管理网络上的字节流。是浏览器在做这件事。

以下是网络中断期间的事件序列：

用户正在下载文件，他们的设备失去了网络连接（例如，他们进入了隧道）。
浏览器的下载管理器检测到网络故障，并优雅地暂停传输。它会记录已成功接收的字节数。
用户的设备稍后重新获得网络连接。
浏览器会自动尝试恢复下载。它向服务器发送一个针对同一文件的新 HTTP 请求，但这次它包含了一个 `Range` 头部，实际上是在告诉服务器：“我已经有了前 'X' 个字节，请从第 'X+1' 个字节开始，把剩下的发给我。”
一个正确配置的服务器会以 `206 Partial Content` 状态响应，并开始流式传输文件的剩余部分。
浏览器将这些新数据附加到部分下载的文件上。

整个过程对你的 JavaScript 代码是透明的。你的 Service Worker 只有在最后，当文件完全下载并成功拼接在一起，或者当过程最终失败时（例如，文件已不在服务器上）才会被通知。这种抽象非常强大，将开发者从构建复杂且脆弱的下载续传逻辑中解放出来。

高级概念与面向全球受众的最佳实践

提供准确的 `downloadTotal`

`downloadTotal` 选项不仅仅是一个锦上添花的功能。没有它，浏览器只能显示一个不确定的进度指示器（例如，一个旋转的图标）。有了它，浏览器就可以显示一个精确的进度条并计算预计剩余时间。这极大地改善了用户体验。要获取这个值，你可能需要事先对文件 URL 发起一个 `HEAD` 请求来检查 `Content-Length` 头部，或者你的 API 可以将文件大小作为其元数据的一部分提供。

在单次提取中管理多个文件

当对相关资产进行分组时，这个 API 的优势就显现出来了。想象一下一个用户正在下载一个相册、一个带有其文档的软件包，或者一个包含所有纹理和音频文件的视频游戏关卡。你可以将一个 URL 数组传递给 `backgroundFetch.fetch()`。浏览器会将其视为一个单一的原子任务，为整个捆绑包提供一个通知和一个进度条。在你的 `backgroundfetchsuccess` 处理器中，`bgFetch.matchAll()` 将返回一个记录数组，然后你可以单独处理它们。

错误处理和失败场景

下载失败的原因有很多：服务器返回 404 错误，用户磁盘空间不足，或者用户从浏览器的 UI 中手动取消了下载。你的 `backgroundfetchfail` 事件处理器是你的安全网。你可以用它来清理任何部分数据，在你的应用内通知用户，并可能提供一个重试按钮。理解失败的可能性是构建一个健壮系统的关键。

使用 Cache API 存储已下载的资产

存储已下载的网页资产最常用和有效的地方是 Cache API。它是一种专门为 `Request` 和 `Response` 对象设计的存储机制。通过将下载的文件放入缓存中，你以后可以在用户尝试访问它们时直接从 Service Worker 提供服务，使你的应用真正具备离线能力。

跨行业的应用案例

背景提取的应用非常广泛，遍及众多全球性行业：

媒体与娱乐： 基于 Web 的流媒体服务可以提供离线模式，允许任何国家的用户下载电影或音乐，以便在航班或通勤途中欣赏，就像它们的原生应用一样。
教育与电子学习： 非洲的一所大学可以提供一个网络门户，让学生下载大型视频讲座和互动课程材料，确保即使是家庭网络不佳的学生也能获得教育资源。
企业与现场服务： 一家全球制造公司可以为其现场工程师配备一个 PWA，让他们在前往没有互联网接入的偏远地区之前，下载大型 3D 原理图和机械技术手册。
旅游观光： 一个旅游应用可以允许用户下载他们目的地的离线地图、城市指南和票务信息，为他们节省昂贵的国际数据漫游费用。

浏览器兼容性与未来展望

在撰写本文时，背景提取 API 主要在基于 Chromium 的浏览器中得到支持，如 Google Chrome 和 Microsoft Edge。检查像 CanIUse.com 或 MDN Web Docs 这样的资源以获取最新的兼容性信息非常重要。虽然尚未被普遍采用，但它在主流浏览器中的出现标志着一个重要的进步。随着 Web 平台的不断发展，像这样的 API 正在缩小 Web 应用和原生应用之间的能力差距，为新一代强大、弹性和全球可访问的 PWA 铺平了道路。

结论：为每个人构建一个更具弹性的网络

背景提取 API 不仅仅是一个下载文件的工具。它代表了我们想要构建的那种网络：一个有弹性、以用户为中心、并且为每个人服务的网络，无论他们的设备或网络连接质量如何。通过将大型传输任务卸载给浏览器，我们让用户从盯着进度条的焦虑中解放出来，我们节省了他们的数据和电池，并且我们提供了一种强大而可靠的体验。

当你规划下一个涉及大文件传输的 Web 项目时，请超越传统的 `fetch`。考虑你用户的全球背景，并拥抱背景提取的力量来构建一个真正现代化的、离线优先的应用。网络的未来是持久和弹性的，现在，你的下载也可以如此。