Flutter WebView加载Apple兑换页在iOS显示白屏问题排查

可能的原因及对应解决方案 #

1. User-Agent被Apple服务器限制 #

Apple兑换码页面会校验请求的User-Agent，WebView默认UA会被识别为非浏览器环境，导致页面拒绝渲染或返回空白。

解决方法：
初始化WebViewController时设置模拟Safari的User-Agent：

controller = WebViewController()
  ..setJavaScriptMode(JavaScriptMode.unrestricted)
  ..setBackgroundColor(const Color(0x00000000))
  // 替换为对应iOS版本的Safari User-Agent
  ..setUserAgent("Mozilla/5.0 (iPhone; CPU iPhone OS 16_0 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/16.0 Mobile/15E148 Safari/604.1")
  ..setNavigationDelegate(
    // 原有代理逻辑
  )
  ..loadRequest(Uri.parse(promourl));

2. 页面重定向未被正确处理 #

Apple兑换页可能存在多次重定向，若WebView导航配置未允许对应域名跳转，会导致加载中断。

解决方法：
在NavigationDelegate中明确允许Apple相关域名的跳转，并追踪URL变化：

NavigationDelegate(
  onPageStarted: (String url) {
    print('开始加载: $url'); // 追踪重定向流程
  },
  onPageFinished: (String url) {
    print('加载完成: $url');
  },
  onNavigationRequest: (NavigationRequest request) {
    // 允许Apple兑换相关域名跳转
    if (request.url.startsWith('https://apps.apple.com/') || 
        request.url.startsWith('https://buy.itunes.apple.com/')) {
      return NavigationDecision.navigate;
    }
    // 原有拦截逻辑保留
    if (request.url.startsWith('https://www.youtube.com/')) {
      return NavigationDecision.prevent;
    }
    return NavigationDecision.navigate;
  },
)

3. 未捕获WebView加载错误 #

页面空白可能是资源加载失败，但原有代码未输出错误信息，无法定位问题。

解决方法：
完善onWebResourceError回调，打印详细错误：

onWebResourceError: (WebResourceError error) {
  print('加载错误: ${error.description}, 错误码: ${error.errorCode}');
},

根据错误码排查（比如403代表权限拒绝，大概率是UA问题；其他错误可能是资源加载失败）。

4. Apple限制兑换页在第三方WebView内加载 #

Apple的优惠码兑换页面可能存在策略限制，不允许在第三方WebView中打开，强制要求使用系统浏览器。

解决方法：
改用url_launcher打开系统Safari：

// 替换WebView相关逻辑，在合适时机调用
if (await canLaunchUrl(Uri.parse(promourl))) {
  await launchUrl(Uri.parse(promourl), mode: LaunchMode.externalApplication);
}

这种方式符合Apple的使用规范，能保证页面正常加载。

额外检查项 #

• 在Info.plist中添加支持Apple链接的配置：

<key>LSApplicationQueriesSchemes</key>
<array>
  <string>itms-apps</string>
  <string>itms</string>
</array>

• 确保代码中的App ID（xxxxxxxx）替换为真实的应用ID，保证兑换链接本身有效。

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