断网后图标全变方框 字体和图片为什么没进运行时缓存

离线打开文章页，图标位置全是方框，封面图显示裂图，控制台报 net::ERR_INTERNET_DISCONNECTED，文字排版也跟着错位。第一次遇到会往复杂处想，其实漏掉的多是个小前提。

registerRoute(({request}) => ['image','font'].includes(request.destination),
  new CacheFirst({cacheName: 'assets', plugins: [new ExpirationPlugin({maxEntries: 80})]})
);

预缓存只覆盖了首屏那几个文件，文章里的图片和图标字体走的是运行时请求，没命中就失败。字体加载失败还会触发回退，行高和字宽都变了。这一点先确认清楚，后面就不用反复试。

碰到「字体图片离线」这类问题，我习惯先把当前配置原样备份一份，改坏了立刻换回来，不用现场推。把复现步骤压到三条以内，交给同事也能跑出来，才算真的定位清楚。

改动写完就同步给同事，下一个人踩同一个坑，成本还是你的。

具体做法是，给 image 和 font 两类请求加运行时缓存，命中后写入独立缓存桶；图标字体改成内联 SVG，减少一次跨域请求；图片容器预留固定宽高比，加载失败时显示占位而不是塌陷。

改完照着核一遍，断网后文章页图标和封面正常显示，字体与在线时一致，布局没有跳动。