Service Worker需显式缓存XML请求，因浏览器不自动缓存；离线时须用response.text()获取字符串再用DOMParser解析；后台上传XML需结合Background Sync与IndexedDB持久化，并注意编码声明与Content-Type匹配。
Service Worker 中拦截并缓存 XML 请求
XML 数据通常通过 fetch() 发起（如 fetch('/api/data.xml')），要离线可用，必须在 Service Worker 的 install 或 fetch 事件中显式缓存。不能依赖 Cache-Control 响应头自动缓存——浏览器默认不缓存非 GET 或非可缓存 MIME 类型的请求，而很多服务器返回 XML 时未设 Content-Type: application/xml 或 text/xml，导致缓存失败。
推荐在 fetch 事件中按 URL 模式或响应头判断后主动存入 Cache API：
self.addEventListener('fetch', event => {
const { request } = event;
if (request.destination === 'xml' || request.url.endsWith('.xml')) {
event.respondWith(
caches.open('xml-cache').then(cache =>
cache.match(request).then(cached => {
if (cached) return cached;
return fetch(request).then(response => {
// 确保响应可被缓存：需是 200 且有合法 Content-Type
if (response.status === 200 &&
(response.headers.get('content-type')?.includes('xml') ||
request.url.endsWith('.xml'))) {
cache.put(request, response.clone());
}
return response;
});
})
)
);
}
});
离线时读取缓存 XML 并解析为 DOM
XML 缓存后，前端 JS 无法直接用 DOMParser 解析 Response 对象；必须先调用 response.text() 获取字符串，再手动解析。常见错误是直接传 response 给 new DOMParser().parseFromString()，结果得到空文档。
正确流程：
- 用
caches.match()获取缓存的Response - 调用
response.text()得到 XML 字符串（注意：必须 await） - 用
new DOMParser().parseFromString(xmlStr, 'application/xml')解析 - 检查
parsererror元素判断是否解析失败（XML 格式错误时浏览器会注入该节点）
示例片段：
async function loadCachedXML(url) {
const cache = await caches.open('xml-cache');
const response = await cache.match(url);
if (!response) throw new Error('XML not found in cache');
const xmlText = await response.text();
const parser = new DOMParser();
const xmlDoc = parser.parseFromString(xmlText, 'application/xml');
if (xmlDoc.querySelector('parsererror')) {
throw new Error('Invalid XML structure');
}
return xmlDoc;
}
后台静默上传 XML 数据（使用 Background Sync）
用户提交 XML 数据（如表单导出、日志打包）后，若网络不可用，需暂存并等恢复后自动上传。不能只靠 fetch() 重试——页面关闭后 JS 停止执行。必须用 backgroundSync 配合 IndexedDB 持久化待上传数据。
关键点：
- Service Worker 必须在
register()后启用backgroundSync功能（Chrome ≥ 49，需 HTTPS） - 上传任务注册前，XML 内容必须先存入 IndexedDB（不能存
Blob或File，要转为string或Uint8Array） -
sync事件触发时，从 DB 读取一条未上传的 XML 记录，用fetch()提交，成功后标记为已上传 - 避免重复上传：每条记录加唯一
id和uploaded: boolean字段
注册 sync 的典型调用：
// 在主页面中
if ('serviceWorker' in navigator && 'sync' in ServiceWorkerRegistration.prototype) {
navigator.serviceWorker.ready.then(reg => {
reg.sync.register('upload-xml-pending');
});
}
IndexedDB 存储 XML 字符串的注意事项
XML 数据常含特殊字符、命名空间、CDATA 段，直接存字符串最稳妥。不要尝试序列化为 JSON 包裹（会丢失格式细节），也不要存 XMLDocument 实例（无法结构化克隆）。
存储建议：
- 字段设计至少包含：
id（UUID）、xmlContent（string）、url（目标接口）、method（通常 POST）、headers（JSON string）、uploaded（boolean） - 使用
transaction(..., 'readwrite')确保写入原子性 - 上传成功后，在
sync回调里用IDBKeyRange.only(id)精确删除或更新记录 - 避免在大量 XML 场景下阻塞主线程：用
indexedDB.open()的onupgradeneeded做 schema 初始化，后续操作全走异步事务
真正容易被忽略的是：XML 中的编码声明（如 ）必须与实际内容一致，否则后台服务解析失败——前端存之前不必移除它，但需确保 fetch() 提交时设置 headers: {'Content-Type': 'application/xml; charset=UTF-8'}，否则某些后端（如 Java Spring）会按 ISO-8859-1 解析。