可使用 Worker 后台检测站点可用性并上报心跳，需处理跨域限制（同源 fetch、跨源用 image/script 打点或代理接口）、周期性任务设计（定时器、指数退避、状态缓存）、安全通信（postMessage 验证配置）、异常容错（try/catch、IndexedDB 持久化、错误监听重建）。
可以使用 Worker 在后台持续检测站点可用性并上报心跳，但需注意跨域限制、资源隔离和通信机制的设计。
Worker 中发起跨源可用性探测的限制与绕过
Worker 无法直接用 fetch 检测任意第三方站点（如 https://api.example.com）的可用性，除非目标服务明确允许跨域（返回 Access-Control-Allow-Origin: *）。否则会触发 CORS 错误，且无法捕获网络层失败（如 DNS 解析失败、连接超时）。
- 对同源地址（如当前页面的
/health或/api/ping）可直接fetch，配合signal: AbortSignal.timeout(ms)控制超时 - 对跨源服务，改用
Image或script标签“打点”方式（无 CORS 限制），但仅能判断 HTTP 200 响应，无法区分超时或 5xx - 更可靠的做法是将探测逻辑后移至同源代理接口（如
/proxy/health?url=https%3A%2F%2Fapi.example.com），由服务端完成真实探测并返回结构化结果
用 Worker 实现周期性心跳与状态聚合
Worker 可独立于主线程运行，适合长期维持心跳任务。关键在于避免重复请求、合理退避、缓存最近状态。
- 使用
setInterval启动定时器，间隔建议 ≥ 10s（太短易被节流，太长影响感知） - 每次上报前检查上一次响应是否成功，若连续失败，可指数退避（如 10s → 30s → 60s）
- 在 Worker 内部用
self.status = { lastSuccess: Date.now(), consecutiveFailures: 0 }维护轻量状态，无需外部存储 - 上报数据建议包含：
timestamp、url、latencyMs、status（"up"/"down"/"timeout"）、consecutiveFailures
主线程与 Worker 的安全通信模式
主线程不应直接暴露敏感信息（如 API 密钥、内部服务地址）给 Worker；所有配置应通过 postMessage 显式传入，且 Worker 应校验输入合法性。
- 初始化时主线程发送配置对象：
worker.postMessage({ endpoint: '/api/heartbeat', targets: ['/health', '/api/status'] }) - Worker 收到后验证
endpoint是否为相对路径或白名单域名，拒绝非法值 - Worker 上报结果时，用
self.postMessage({ type: 'report', data: {...} })，主线程监听并更新 UI 或日志 - 如需动态调整策略（如暂停检测），主线程可发
{ type: 'control', action: 'pause' }，Worker 内部clearInterval并等待恢复指令
异常处理与降级策略
Worker 本身可能被浏览器终止（如内存压力、长时间空闲），需设计容错逻辑。
- 在
fetch外层包裹try/catch，捕获网络异常、AbortError、TypeError - 若
fetch报TypeError: Failed to fetch，大概率是网络中断或跨域拦截，归为 “network_down” 状态 - Worker 内不依赖
localStorage（主线程可能已修改），如需持久化失败记录，改用IndexedDB（需在 Worker 中打开） - 主线程可通过
worker.onmessageerror捕获序列化失败，通过worker.onerror监听未捕获异常，必要时重建 Worker
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
