Capacitor Android应用外部链接无法在外部浏览器打开

Capacitor双端WebView默认链接加载策略不一致：iOS端默认将非应用自身的外部链接跳转至系统浏览器打开，安卓端默认拦截所有链接在当前应用内WebView加载，最终表现为iOS跳转逻辑符合预期、安卓端链接直接在应用内加载。

针对存在大量外部链接、需要全部跳转系统浏览器打开的场景，优先选择第一种全局配置方案，操作成本最低。

方案1：修改Capacitor全局配置+原生拦截（推荐，一劳永逸） #

1. 打开项目根目录的capacitor.config.ts（旧版本为capacitor.config.json），确认server.allowNavigation配置项仅保留需要在应用内加载的域名，不要加入任何需要外跳的外部域名，示例配置如下：

import { CapacitorConfig } from '@capacitor/cli';

const config: CapacitorConfig = {
  appId: '你的应用包名',
  appName: '你的应用名称',
  webDir: 'www',
  server: {
    androidScheme: 'https',
    // 仅填入需要在应用内加载的域名，外部域名不要加，本地开发地址可按需保留
    allowNavigation: [
      'localhost',
      '你自己的业务域名.com'
    ]
  }
};

export default config;

2. 打开安卓项目路径下的android/app/src/main/java/[你的应用包名路径]/MainActivity.java，添加自定义WebView客户端拦截外链，代码如下：

import android.content.Intent;
import android.net.Uri;
import android.os.Bundle;
import android.webkit.WebResourceRequest;
import android.webkit.WebView;
import android.webkit.WebViewClient;
import com.getcapacitor.BridgeActivity;

public class MainActivity extends BridgeActivity {
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);

        bridge.getWebView().setWebViewClient(new WebViewClient() {
            @Override
            public boolean shouldOverrideUrlLoading(WebView view, WebResourceRequest request) {
                String url = request.getUrl().toString();
                // 匹配到应用内资源/业务域名时，走应用内加载
                if (url.startsWith("http://localhost") || url.contains("你自己的业务域名.com")) {
                    return false;
                }
                // 其余链接全部拉起系统外部浏览器打开
                Intent browserIntent = new Intent(Intent.ACTION_VIEW, Uri.parse(url));
                startActivity(browserIntent);
                return true;
            }
        });
    }
}

3. 回到项目根目录执行同步命令，把配置同步到安卓工程，再重新打包运行即可：

npx cap sync android

方案2：前端全局拦截处理（不需要改原生代码） #

如果不想修改安卓原生代码，可以在前端全局监听链接跳转行为，调用系统浏览器打开外链：

1. 先安装依赖：

npm install @capacitor/app
npx cap sync

2. 在应用全局入口文件（比如main.ts或者app.component.ts）添加全局监听：

import { App } from '@capacitor/app';

// 拦截应用内所有链接跳转
App.addListener('appUrlOpen', (data) => {
  const { url } = data;
  // 判断为外部链接时，调用系统浏览器打开
  if (!url.includes('localhost') && !url.includes('你的业务域名.com')) {
    window.open(url, '_system');
  }
});

// 给所有a标签添加全局点击拦截，避免默认走WebView加载
document.addEventListener('click', (e) => {
  const target = e.target as HTMLElement;
  if (target.tagName === 'A') {
    const href = (target as HTMLAnchorElement).href;
    if (href.startsWith('http') && !href.includes('你的业务域名.com')) {
      e.preventDefault();
      window.open(href, '_system');
    }
  }
}, true);

• 所有配置修改完成后必须执行npx cap sync android再重新编译，否则配置不会生效
• 只要域名被加入capacitor.config.ts的allowNavigation列表，就会被强制在应用内WebView加载，外跳逻辑不会触发
• 不要用@capacitor/browser插件打开需要跳系统浏览器的链接，该插件默认打开的是应用内置浏览器，不是系统外部浏览器

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