移动端如何区分Brave与Safari？求JS/Angular检测方案

针对iOS端Brave被识别为Safari的问题，以下是几个可靠的检测方案，适用于JavaScript/Angular环境：

方案一：使用Brave官方提供的navigator.brave API #

Brave浏览器内置了专属的navigator.brave对象，包含官方检测方法，这是不受UA修改影响的最准确方式：

async function detectBrave(): Promise<boolean> {
  if ('brave' in navigator) {
    try {
      const isBrave = await (navigator as any).brave.isBrave();
      return isBrave;
    } catch (err) {
      return false;
    }
  }
  return false;
}

// 在Angular组件中调用
ngOnInit() {
  detectBrave().then(isBrave => {
    console.log('是否为Brave浏览器:', isBrave);
    if (isBrave) {
      // 执行Brave专属逻辑
    } else {
      // 执行Safari或其他浏览器逻辑
    }
  });
}

该方法在iOS移动端Brave中可稳定生效，无需依赖UA信息。

方案二：检测Brave的Shields拦截特性 #

Brave默认开启Shields广告拦截，可通过尝试加载被普遍拦截的广告资源，判断加载结果间接检测：

function detectBraveByShields(): Promise<boolean> {
  return new Promise(resolve => {
    const adResource = new Image();
    adResource.src = 'https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js';
    
    adResource.onload = () => resolve(false);
    adResource.onerror = () => resolve(true);
    
    // 设置超时避免长时间等待
    setTimeout(() => resolve(false), 3000);
  });
}

// 在Angular组件中调用
ngOnInit() {
  detectBraveByShields().then(isBrave => {
    console.log('通过Shields检测是否为Brave:', isBrave);
  });
}

注意：若用户手动关闭Shields，该检测会失效，建议作为辅助验证方案。

方案三：UA+特性双重验证（兜底方案） #

结合UA残留特征与官方API双重验证，提升检测覆盖度：

async function detectBraveCombined(): Promise<boolean> {
  const ua = window.navigator.userAgent;
  const hasBraveUA = ua.includes('Brave') || (ua.includes('Chrome') && !ua.includes('Safari'));
  const isBraveOfficial = await detectBrave();
  
  return hasBraveUA || isBraveOfficial;
}

替换原有代码建议 #

将你原有的Bowser检测和DuckDuckGo请求逻辑替换为上述方案（优先方案一），即可在iOS移动端准确区分Brave与Safari。

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