未添加到service-worker.js的HTML页面为何能离线缓存访问？

嘿，这个问题其实挺常见的，我来给你拆解下背后的原因：

• Service Worker的fetch事件兜底缓存：你的sw.js作用域覆盖整个目录，当你从已经被缓存的页面跳转到test.html时，这个跳转请求会被sw的fetch事件捕获。如果你的sw里写了兜底的缓存逻辑（比如「网络请求失败时回退到缓存」，或者不小心把所有成功的请求都缓存了），那第一次在线访问test.html时，sw就会自动把它存入缓存，离线状态下自然能直接加载。

• 浏览器HTTP缓存的作用：即使sw没显式配置缓存，test.html的响应头如果包含了Cache-Control、ETag这类缓存字段，浏览器自身的HTTP缓存会把页面存下来。离线时浏览器会优先读取本地HTTP缓存，而外部链接通常是跨域资源，服务器一般不会设置宽松的缓存策略，所以离线无法打开。

• 导航预加载的隐性缓存：部分现代浏览器默认开启了Service Worker的导航预加载功能，当你点击已缓存页面里的test.html链接时，浏览器会提前发起请求并缓存资源，哪怕sw没配置对应的缓存规则，这也会导致离线时能加载页面。

验证方法 #

你可以通过以下步骤确认具体原因：

1. 打开浏览器开发者工具的「Application」面板，查看「Cache Storage」里是否有test.html的条目，判断是不是被sw缓存了；
2. 查看「Network」面板中test.html的响应头，检查是否存在HTTP缓存相关字段；
3. 在sw.js里添加self.navigationPreload.disable()禁用导航预加载，清空缓存后重新测试，看test.html还能不能离线打开。

内容的提问来源于stack exchange，提问作者soda