Vaadin 24：如何自定义或本地化?v-r=oldbrowser对应的旧浏览器提示页面？

在Vaadin 24中，你可以直接通过修改前端入口文件自定义?v-r=oldbrowser对应的提示页面，具体操作步骤如下：

• 找到项目中的frontend/index.html文件（若项目中无该文件，可从Vaadin默认模板生成一份）
• 在文件中定位到处理旧浏览器参数的代码块，默认包含一个标记为unsupported-browser的隐藏容器，以及对应的参数检测脚本
• 修改该容器内的内容，替换默认文本并添加自定义Logo：

  <div id="unsupported-browser" hidden style="text-align: center; padding: 4rem 2rem;">
    <!-- 自定义Logo -->
    <img src="./images/your-brand-logo.png" alt="品牌Logo" style="max-width: 250px; margin-bottom: 2rem;">
    <!-- 自定义提示文本 -->
    <h2>抱歉，您的浏览器不被支持</h2>
    <p>请升级至最新版的Chrome、Firefox、Edge或Safari浏览器以正常访问本系统</p>
  </div>
  

• 若需要本地化，可通过前端脚本根据浏览器语言或URL参数动态替换文本，示例：

  const params = new URLSearchParams(window.location.search);
  if (params.get('v-r') === 'oldbrowser') {
    const container = document.getElementById('unsupported-browser');
    container.hidden = false;
    // 根据浏览器语言设置文本
    const lang = navigator.language || 'zh-CN';
    if (lang.startsWith('en')) {
      container.querySelector('h2').textContent = "Sorry, your browser is not supported";
      container.querySelector('p').textContent = "Please upgrade to the latest version of Chrome, Firefox, Edge or Safari";
    }
    // 隐藏其他页面内容
    document.querySelector('vaadin-app-layout')?.setAttribute('hidden', '');
  }
  

如果需要通过后端逻辑控制页面内容，也可以自定义IndexHtmlRequestHandler类，重写相关逻辑动态注入自定义HTML内容，但前端直接修改是更简便的方式。

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