如何在Flutter Web中为不兼容的旧浏览器显示提示消息？

不要修改自动生成的flutter_bootstrap.js——每次构建都会覆盖该文件，而且它采用的ES6+语法本身就会让旧浏览器解析失败，直接导致空白页面。正确的做法是在web/index.html中，在Flutter相关脚本加载前，用ES5兼容的语法写一段浏览器兼容性检测代码，提前拦截旧浏览器并显示提示。

具体实现步骤： #

• 打开项目根目录下的web/index.html文件
• 在<script src="flutter_bootstrap.js" defer></script>这行代码之前，插入以下检测脚本：

(function() {
  var isCompatible = true;
  
  // 检测ES6箭头函数支持（旧浏览器普遍不支持）
  try {
    new Function("() => {}");
  } catch(e) {
    isCompatible = false;
  }
  
  // 检测WebAssembly支持（Flutter Web运行必需）
  if (typeof WebAssembly === 'undefined') {
    isCompatible = false;
  }
  
  // 检测Canvas 2D支持
  var canvas = document.createElement('canvas');
  if (!canvas.getContext || !canvas.getContext('2d')) {
    isCompatible = false;
  }
  
  if (!isCompatible) {
    // 隐藏Flutter应用容器
    var flutterContainer = document.getElementById('flutter_app');
    if (flutterContainer) {
      flutterContainer.style.display = 'none';
    }
    
    // 创建并显示提示内容
    var notice = document.createElement('div');
    notice.style.cssText = 'position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: #fff; display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 20px; font-family: sans-serif;';
    notice.innerHTML = '<h2>浏览器版本过低</h2><p>本网站需要新版浏览器才能正常访问，请更新你的浏览器后重试。</p><p>推荐使用：Chrome、Edge、Firefox最新版</p>';
    
    document.body.appendChild(notice);
  }
})();

核心说明： #

• 脚本用纯ES5编写，旧版Firefox、IE等都能正常解析执行
• 检测的特性都是Flutter Web运行的必要条件，只要一项不支持就判定为不兼容
• 不兼容时会直接替换页面内容为提示信息，用户不会看到空白页面
• index.html不会被Flutter构建过程覆盖，修改一次即可长期生效

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