每次刷新页面顶部都出现发现新版本的横条,点更新后横条消失,下一次刷新又冒出来,连续三天都是同一个提示。第一次遇到会往复杂处想,其实漏掉的多是个小前提。

reg.waiting?.postMessage({type: 'SKIP_WAITING'});
// sw.js 中:
self.addEventListener('message', e => {
  if (e.data.type === 'SKIP_WAITING') self.skipWaiting();
});

新 worker 进入等待状态后没有触发 skipWaiting,旧 worker 一直控制页面,新版本永远停在等待。提示条每次加载都按 registration.waiting 是否存在来判断,自然反复出现。这一点先确认清楚,后面就不用反复试。

「waiting worker 提示」这类改动最怕改一半,回滚脚本先准备好,再动生产。临时改动用注释写上日期和原因,过两周自己都记不清为什么这么写。

动手前把原文件复制一份带时间戳,出问题立刻换回去,比现场分析快得多。

具体做法是,提示条展示前先确认 waiting 的脚本版本号和上次记录的不同;用户点更新时向 waiting 发消息,由它自己调用 skipWaiting;controllerchange 触发后只重载一次,用标记位防止循环。

改完照着核一遍,点一次更新后页面自动重载,再刷新三次都不再出现版本提示条。

作者 9823189