使用Firebase开发PWA时离线模式无法正常运行报错问题求助

安全阿岳

2026-9-28

注意Chrome开发者工具离线模拟和真实断网的差异：
开发者工具的离线模式只是拦截网络请求，不会修改浏览器全局的navigator.onLine状态，而Firebase SDK内部会监听该状态调整请求逻辑，这就是模拟离线正常、真实断网报错的核心原因，配置缓存策略时要适配SDK的这一逻辑。
拆分缓存规则，避免全局配置matchOptions忽略参数：
仅对静态资源（HTML、JS、CSS、图片、字体等）配置ignoreVary、ignoreSearch等忽略参数，Firebase Auth相关的API请求（域名通常为identitytoolkit.googleapis.com、securetoken.googleapis.com）单独配置规则，不要添加任何ignore*匹配参数，这类请求的请求头、查询参数是验证用户会话的必要信息，全局开启忽略会导致缓存匹配错误，出现会话读取失败、currentUser返回null的问题。
调整Firebase Auth会话读取逻辑：
不要同步读取currentUser属性，Web SDK v9+版本需要等待auth.authStateReady()异步方法执行完成后再判断用户登录状态，v8版本则通过onAuthStateChanged回调获取用户状态。真实断网环境下SDK从IndexedDB加载会话数据存在异步耗时，同步读取会直接返回null，你遇到的卡顿大概率是未等待状态就绪就轮询判断会话，阻塞了主线程。
排查预缓存列表的资源范围：
检查你的预缓存列表是否包含__/firebase/init.js这类Firebase动态生成的初始化文件，这类文件不能加入预缓存，否则离线时会读取旧配置导致SDK初始化异常，可改为对其使用StaleWhileRevalidate运行时缓存策略即可。同时确认你缓存的Firebase SDK分片文件完整，没有缺失。
排查service worker冲突：
如果你开启了Firebase Hosting的内置离线缓存功能，同时又部署了自定义service worker，需要在firebase.json中通过swSrc参数指定自定义sw的文件路径，避免两个sw同时运行导致缓存匹配异常。