Firebase PWA移动端浏览器无法离线验证用户 桌面端运行正常

问题根因排查&修复方案 #

1. 显式指定Firebase Auth持久化级别 #

Firebase Auth在移动端浏览器的默认持久化策略和桌面端存在差异，未显式配置的情况下可能默认使用仅当前标签页有效的会话级持久化，重启应用后就会丢失认证状态。你需要手动指定持久化级别为本地持久化：

import { getAuth, setPersistence, browserLocalPersistence } from "firebase/auth";

const auth = getAuth();
// 显式设置本地持久化，断网、关闭浏览器后认证状态都不会清除
setPersistence(auth, browserLocalPersistence)
  .then(() => {
    // 原有登录逻辑放在此处执行
  })
  .catch((error) => {
    // 处理持久化设置异常
  });

2. 调整Service Worker缓存规则 #

移动端浏览器对Service Worker的缓存策略限制更严格，如果你在SW缓存规则中包含了Firebase Auth相关的API端点（identitytoolkit.googleapis.com、securetoken.googleapis.com），离线时SW会返回过期的缓存响应，导致Auth内部解析抛出"inner auth error"。
修改你的Workbox或者自定义SW规则，将所有Auth相关域名的请求全部排除在缓存范围外，或者设置为网络优先策略。

3. 优化Auth监听逻辑，添加降级兜底 #

移动端浏览器本地存储读取速度慢于桌面端，要确保onAuthStateChanged监听逻辑添加错误回调，同时在离线场景下添加本地缓存兜底：

useEffect(() => {
  const auth = getAuth();
  const unsubscribe = onAuthStateChanged(auth, (user) => {
    setCurrentUser(user?.email || null);
    // 登录成功时同步缓存非敏感用户信息
    if (user) localStorage.setItem("cached_user_email", user.email || "");
    setLoading(false);
  }, (error) => {
    // 捕获Auth内部错误，离线场景下用本地缓存兜底
    if (!navigator.onLine) {
      const cachedEmail = localStorage.getItem("cached_user_email");
      if (cachedEmail) setCurrentUser(cachedEmail);
    }
    setLoading(false);
  });
  return unsubscribe;
}, []);

4. 排查移动端存储权限限制 #

部分移动端浏览器在无痕模式、或者本地存储空间不足时，会限制IndexedDB的写入权限，而Firebase Auth默认用IndexedDB存储持久化信息，写入失败就会抛出内部错误。
你可以在应用初始化时先做存储可用性检测，如果IndexedDB不可用，手动切换Auth的持久化策略到localStorage模式。

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