巧用 WebView 拦截 URL，打造无缝跨国 H5 体验

2024-02-26 12:58:00

随着全球化趋势的深入，跨国移动应用开发的需求也日益增长。为了满足不同国家和地区的差异化需求，开发者往往需要在不同的国家部署不同的机房，这也会带来一些新的技术挑战。

其中一个常见的挑战就是如何在不同的机房部署 H5 页面，并保证其在客户端的无缝切换。最近，我在一个国际化项目中遇到了这样的需求，需要在新的国家部署机房，但该机房部署的 H5 域名与原来的不同，这就要求客户端能够拦截 H5，并更改其 Host。

通常，客户端通过 WebView 组件加载 H5 页面。为了实现 URL 拦截和修改，我们可以重写 WebView 的 loadUrl() 方法。具体实现如下：

@Override
public void loadUrl(String url) {
    // 拦截 URL
    String modifiedUrl = interceptUrl(url);
    
    // 修改 Host
    if (modifiedUrl != null) {
        super.loadUrl(modifiedUrl);
    } else {
        super.loadUrl(url);
    }
}

通过这种方式，我们可以拦截所有的 H5 页面请求，并根据需要进行修改。在我们的具体案例中，我们修改了 H5 页面的 Host，将其指向新的机房域名。

但是，在测试中，我们发现了一个问题：H5 页面中的二级页面跳转没有走我们修改的 URL。经过分析，我们发现这是因为二级页面跳转使用了相对路径，而不是绝对路径。

为了解决这个问题，我们对 loadUrl() 方法进行了进一步的修改：

@Override
public void loadUrl(String url) {
    // 拦截 URL
    String modifiedUrl = interceptUrl(url);
    
    // 修改 Host
    if (modifiedUrl != null) {
        super.loadUrl(modifiedUrl);
    } else {
        // 如果 URL 未被修改，则检查是否是相对路径
        if (url.startsWith("/") && !url.startsWith("//")) {
            // 如果是相对路径，则拼接完整 URL
            String baseUrl = super.getUrl();
            if (baseUrl != null && !baseUrl.endsWith("/")) {
                baseUrl = baseUrl + "/";
            }
            modifiedUrl = baseUrl + url;
        }
        
        if (modifiedUrl != null) {
            super.loadUrl(modifiedUrl);
        } else {
            super.loadUrl(url);
        }
    }
}