Fetch keepalive：卸载场景的可靠传输

概述

fetch(url, { keepalive: true }) 允许在页面卸载后继续发送请求，适用于统计上报与短数据写入。请求体大小存在约 64KiB 限制，应避免长传输。

用法/示例

addEventListener('visibilitychange', () => {
  if (document.visibilityState === 'hidden') {
    fetch('/rum', { method: 'POST', body: JSON.stringify(metrics), keepalive: true, headers: { 'Content-Type': 'application/json' } })
  }
})

工程建议

• 控制请求体大小并压缩；失败时在下次会话补偿上报。
• 对关键数据优先使用前台发送或 Background Sync；校验服务端的幂等与去重。
• 与 navigator.sendBeacon 比较并按场景选型；keepalive 支持更多方法与头部。

参考与验证

• MDN：fetch() keepalive — https://developer.mozilla.org/docs/Web/API/fetch#keepalive
• web.dev：Backgrounding — https://web.dev/articles/page-lifecycle-api