如何在Flutter Web应用中打开Viber应用？url_launcher失效解决方案

我之前也碰到过Flutter Web里用url_launcher打不开Viber URI的问题，折腾了一阵终于找到可行的方案，下面一步步来：

1. 确保url_launcher的配置正确 #

首先，确保你用的是最新版本的url_launcher（建议用^6.0.0以上版本），在pubspec.yaml里正确添加依赖并执行flutter pub get。

对于Web平台，需要在web/index.html的<head>标签里加入以下meta标签，让浏览器允许跳转自定义scheme：

<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="mobile-web-app-capable" content="yes">

如果你的应用是PWA，还要在web/manifest.json里添加intent_filters，声明支持Viber的scheme：

"intent_filters": [
  {
    "action": "VIEW",
    "category": ["BROWSABLE", "DEFAULT"],
    "data": {
      "scheme": "viber"
    }
  }
]

2. 正确调用launchUrl方法 #

别再用旧的launch方法了，改用最新的launchUrl，并且指定关键的启动模式，Web平台需要明确告诉浏览器要打开外部应用而非内嵌页面。

示例代码如下：

import 'package:url_launcher/url_launcher.dart';

Future<void> openViberChat(String phoneNumber) async {
  // 重点：号码必须带完整国家代码，比如"+1234567890"，不能省略
  final Uri viberUri = Uri.parse('viber://chat?number=$phoneNumber');
  
  try {
    await launchUrl(
      viberUri,
      mode: LaunchMode.externalApplication, // 强制唤起外部应用
      webOnlyWindowName: '_blank', // Web平台必填参数
    );
  } catch (e) {
    // 处理异常场景，比如用户没安装Viber
    print('无法打开Viber: $e');
    // 这里可以提示用户安装Viber，或者跳转Viber网页版
  }
}

3. 注意浏览器的交互限制 #

现代浏览器（比如Chrome、Safari）对自定义scheme的跳转有严格限制：必须由用户主动触发（比如点击按钮）才能执行，不能在页面加载、定时器等非交互场景下自动调用。所以你的调用代码一定要放在用户交互回调里，比如按钮的onPressed：

ElevatedButton(
  onPressed: () => openViberChat('+8613800138000'),
  child: const Text('打开Viber聊天'),
)

4. 备选方案：直接调用JS的window.open #

如果上面的方法还是不行，可以尝试用Dart调用原生JavaScript的window.open作为兜底方案：

import 'dart:js' as js;

Future<void> openViberChatFallback(String phoneNumber) async {
  final String viberUrl = 'viber://chat?number=$phoneNumber';
  js.context.callMethod('open', [viberUrl]);
}

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