Fetch Range 请求与断点下载持久化实践

`title: Fetch Range 请求与断点下载持久化实践``categories: Web 开发/前端/数据管理``keywords: Fetch,Range,部分内容,断点下载,OPFS,分块``description: 使用 HTTP Range 请求实现断点下载与续传，将分块内容写入 OPFS 并在完成后合并，提升大型文件的下载可靠性。`计算块与请求async function fetchChunk(url, start, end) { const res = await fetch(url, { headers: { Range: `bytes=${start}-${end}` } }); if (!res.ok && res.status !== 206) throw new Error('Range not supported'); return new Uint8Array(await res.arrayBuffer()); } 写入 OPFS（分块）async function writeChunk(name, idx, bytes) { const root = await navigator.storage.getDirectory(); const handle = await root.getFileHandle(`${name}.part${idx}`, { create: true }); const w = await handle.createWritable(); await w.write(bytes); await w.close(); } 合并块async function mergeChunks(name, count) { const root = await navigator.storage.getDirectory(); const out = await root.getFileHandle(name, { create: true }); const w = await out.createWritable(); for (let i = 0; i < count; i++) { const h = await root.getFileHandle(`${name}.part${i}`); const file = await h.getFile(); await w.write(await file.arrayBuffer()); } await w.close(); } 续传策略记录已完成块索引与大小到 IndexedDB；失败重试仅请求缺失块；合并后清理分块。