蘑菇影视官网夜里刷到离线播放如果只能做一件事：先改这里

蘑菇影视官网夜里刷到“离线播放”——如果只能做一件事，先改这里

半夜用户在蘑菇影视官网刷视频，突然页面提示“离线播放”或播放器直接进入离线模式，马上就流失了。这种体验对留存和口碑伤害非常直接。面对各种可能的后台原因、CDN 波动和用户网络差异，如果只允许你做一件事，那就先改：前端的“离线检测与回退逻辑”。

为什么先改这一点？

错误的离线判定会把本来能播放的用户变成“离线”用户，直接导致流失。
后端、CDN、调度等问题排查复杂，见效慢；前端判定逻辑改一处，立刻能改善用户感受。
这个改动能最小侵入性地防止误报，同时给工程上更充足的时间去修复深层问题。

要改什么？核心原则

不要只依赖 navigator.onLine 或 service worker 的简单失败作为“离线”判定。
用轻量、可靠的网络探针（health check）去验证流媒体端点是否可用。
将播放器的回退与整站的离线页面区分开：播放相关的请求优先走实时检测，不要直接走缓存的离线页。
给用户可操作的恢复路径：重试按钮、切换清晰度、小片段预缓存等。

实战步骤（可直接落地）

1) 增加“播放可用性探针”

创建一个轻量端点 /health/play 或对流媒体 manifest/首个小片段做 HEAD 请求，用来判定播放是否真正可用。该端点响应要简短（200 或 503），并且不应被 aggressive 缓存。
在前端，发起探针请求，并设置合理超时（例如 3–5 秒）。只在探针确认失败后才展示“离线播放”。

示例（前端 JS，替换掉单纯的 navigator.onLine 检测）：

async function checkPlayAvailable(url, timeout = 4000) {
  const controller = new AbortController();
  const timer = setTimeout(() => controller.abort(), timeout);
  try {
    const res = await fetch(url, { method: 'HEAD', cache: 'no-store', signal: controller.signal });
    clearTimeout(timer);
    return res.ok; // 200-299 为可用
  } catch (e) {
    clearTimeout(timer);
    return false;
  }
}

// 使用方式：在点击播放或加载播放器前调用
const healthUrl = '/health/play'; // 或直接指向 manifest/headurl
const available = await checkPlayAvailable(healthUrl);
if (available) {
  // 启动播放器，走正常流程
} else {
  // 显示友好提示（含重试）
}

2) 优化 Service Worker 与缓存策略

对播放器相关的网络请求（manifest、m3u8、ts/seg）使用“Network first”策略：优先尝试网络，请求失败再考虑缓存。不要把 HTML 的离线页用于这些请求。
在 fetch handler 中对 URL 做白名单判断（/play、/manifest、/media/），这些请求跳过缓存或使用短期 runtime cache。
避免缓存 503/500 响应：缓存前检查响应状态。

示例思路（service worker 中）：

fetch 事件：如果请求是播放资源，尝试 fetch；若失败返回已缓存的片段（如果支持离线播放），否则返回自定义错误 JSON，而不是整站离线 HTML。

3) 用户体验层的改动（小而有效）

离线提示改为“尝试恢复 + 说明原因”而非直接断言：例如“网络不稳定，正在尝试恢复（重试按钮）”。
提供“仅音频/低清”切换，让弱网用户仍有观看选择。
加入重试倒计时或手动重试，并清晰显示当前检测状态（检测中 / 可用 / 离线）。

4) 后端与监控联动（虽是前端优先，但别忘了）

后端暴露简洁的 health endpoint；在夜间部署或维护时设置告警和维护页。
在前端统计误报率：记录每次探针结果与最终播放结果，快速定位是否为偶发网络问题、CDN 或服务端问题。

简单测试清单（本地与线上）

模拟网络慢（浏览器 DevTools Throttling）、网络中断，确认“离线”提示仅在真实不可用时触发。
关闭 service worker 或清浏览器缓存，再测试播放；确认播放相关请求不被误落到离线页。
夜间运行压力或计划任务测试，观察 health endpoint 报告与前端探针的一致性。
记录用户体验指标：播放成功率、首帧时间、误报的离线提示次数。

结语把“离线检测与回退逻辑”做好，能在最短时间内把夜间刷到“离线播放”导致的流失降到最低。这个改动实现成本低、回报高，同时为后续深入排查服务器、CDN 问题争取缓冲时间。需要我把你的网站现有逻辑评估一下，给出可直接复制的前端+service worker 补丁和测试脚本吗？我可以按优先级列出改动清单并协助落地。