如何检测网站是否运行于Android Custom Tabs或Safari View Controller

核心思路：通过User Agent和浏览器API特性区分应用内浏览器与正式浏览器 #

1. 检测iOS的SFSafariViewController #

正式Safari浏览器的User Agent会包含 Safari 关键字，而SFSafariViewController的UA中没有该关键字，但会保留 AppleWebKit 和 Mobile 标识。同时可以结合 window.navigator.standalone 属性辅助判断（正式Safari在全屏模式下该值为true，SFSafariViewController中为false）。

示例检测代码：

function isSFSafariViewController() {
  const userAgent = window.navigator.userAgent;
  // 判断是iOS设备，且UA不含Safari关键字，同时包含AppleWebKit
  const isIOS = /iPhone|iPad|iPod/.test(userAgent);
  const hasAppleWebKit = /AppleWebKit/.test(userAgent);
  const noSafari = !/Safari/.test(userAgent);
  const isStandaloneFalse = window.navigator.standalone === false;
  
  return isIOS && hasAppleWebKit && noSafari && isStandaloneFalse;
}

2. 检测Android的Chrome Custom Tabs #

正式Chrome浏览器中存在 window.chrome.tabs 对象，而Chrome Custom Tabs中该对象不存在。同时可以结合User Agent中是否包含 Chrome 关键字辅助判断。

示例检测代码：

function isChromeCustomTabs() {
  const userAgent = window.navigator.userAgent;
  const isAndroid = /Android/.test(userAgent);
  const hasChrome = /Chrome/.test(userAgent);
  // Chrome Custom Tabs中没有chrome.tabs对象
  const noChromeTabs = !window.chrome || !window.chrome.tabs;
  
  return isAndroid && hasChrome && noChromeTabs;
}

3. 在Ionic中整合检测逻辑 #

在Ionic页面的初始化钩子（如ionViewWillEnter或ngOnInit）中调用检测函数，若判定为应用内浏览器，则弹出提示引导用户切换至正式浏览器。

示例组件代码：

import { Component, OnInit } from '@angular/core';
import { AlertController } from '@ionic/angular';

@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
})
export class HomePage implements OnInit {

  constructor(private alertController: AlertController) {}

  ngOnInit() {
    this.checkInAppBrowser();
  }

  async checkInAppBrowser() {
    const isSFSVC = this.isSFSafariViewController();
    const isCCT = this.isChromeCustomTabs();

    if (isSFSVC || isCCT) {
      const alert = await this.alertController.create({
        header: '浏览器兼容性提示',
        message: '当前使用的是应用内浏览器窗口，部分功能无法正常运行，请切换至正式的Safari（iOS）或Chrome（Android）浏览器访问。',
        buttons: ['我知道了']
      });
      await alert.present();
    }
  }

  private isSFSafariViewController(): boolean {
    const userAgent = window.navigator.userAgent;
    const isIOS = /iPhone|iPad|iPod/.test(userAgent);
    const hasAppleWebKit = /AppleWebKit/.test(userAgent);
    const noSafari = !/Safari/.test(userAgent);
    const isStandaloneFalse = window.navigator.standalone === false;
    
    return isIOS && hasAppleWebKit && noSafari && isStandaloneFalse;
  }

  private isChromeCustomTabs(): boolean {
    const userAgent = window.navigator.userAgent;
    const isAndroid = /Android/.test(userAgent);
    const hasChrome = /Chrome/.test(userAgent);
    const noChromeTabs = !window.chrome || !window.chrome.tabs;
    
    return isAndroid && hasChrome && noChromeTabs;
  }
}

注意事项 #

• User Agent可能会被部分APP修改，建议结合多种特征判断以提高准确性。
• 若需兼容更多应用内浏览器场景，可扩展检测逻辑，但本次需求仅针对SFSafariViewController和Chrome Custom Tabs。

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