如何让signInWithRedirect()从Chrome发起登录时不跳转至已安装WebApp？

一、强制signInWithRedirect()跳转回Chrome浏览器的方法 #

针对你遇到的实例混淆问题，可以通过以下几种方式确保登录完成后跳转回发起请求的Chrome浏览器：

1. 显式指定网页端redirectUri #

调用signInWithRedirect()时，主动传入网页端的完整回调地址，明确告诉Firebase登录成功后要跳转回Chrome中的网页实例，而非依赖默认逻辑触发PWA启动。

示例代码：

const provider = new firebase.auth.GoogleAuthProvider();
// 替换为你的网页端登录回调地址，需提前在Firebase控制台配置为授权URI
const redirectUri = "https://your-web-app-domain.com/auth-callback";

firebase.auth().signInWithRedirect(provider, { redirectUri });

2. 检测环境切换登录方式 #

通过判断当前环境是Chrome浏览器还是已安装的PWA，分别使用不同的登录方法：PWA环境用signInWithRedirect()，Chrome环境用signInWithPopup()，避免跨实例的会话冲突。

示例代码：

// 判断是否处于已安装的PWA独立运行环境
function isStandalonePWA() {
  return window.matchMedia('(display-mode: standalone)').matches 
      || (window.navigator.standalone && window.navigator.standalone === true);
}

const provider = new firebase.auth.GoogleAuthProvider();

if (isStandalonePWA()) {
  // PWA环境保留redirect逻辑
  firebase.auth().signInWithRedirect(provider);
} else {
  // Chrome浏览器环境使用弹窗登录，全程在浏览器内完成
  firebase.auth().signInWithPopup(provider)
    .then((result) => {
      // 处理登录成功逻辑
    })
    .catch((error) => {
      // 处理登录错误
    });
}

3. 缩小PWA的作用域范围 #

修改manifest.json中的scope配置，让PWA仅处理特定路径下的请求，把登录回调地址排除在PWA作用域之外，这样Chrome就不会将跳转请求路由到已安装的PWA。

示例manifest配置：

{
  "name": "你的PWA应用",
  "start_url": "/app",
  "scope": "/app/", // 仅让PWA处理/app路径内的请求
  "display": "standalone"
}

将登录回调地址设置为https://your-domain.com/auth-callback（不在/app/范围内），Chrome就会在浏览器中打开该地址，而非启动PWA。

二、Chrome判断跳转目标的核心逻辑 #

Chrome决定是打开浏览器网页还是已安装PWA，主要基于以下几点规则：

• Manifest匹配规则：如果跳转URL落在已安装PWA的scope范围内，且PWA的display模式为standalone或fullscreen，Chrome会优先启动PWA实例。
• 应用关联配置：若网站配置了assetlinks.json（Android）或apple-app-site-association（iOS），Chrome会按照文件中的规则判断是否跳转至PWA或原生应用。
• 用户交互历史：如果用户近期频繁使用已安装的PWA，Chrome的智能推荐逻辑会倾向于将跳转请求路由到PWA。
• URI协议类型：如果PWA注册了自定义协议（如yourapp://），当redirect URI使用该协议时会直接启动PWA；使用https://协议时，则会结合上述规则判断目标。

你的问题本质是：从Chrome发起登录后，回调URI同时匹配了PWA的scope，导致Chrome启动了PWA实例，但PWA无法识别Chrome中发起的认证会话，最终出现循环跳转和加载卡顿。

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