Vaadin框架下如何获取客户端时区用于渲染首次加载的页面

首先明确：原生Vaadin没有提供开箱即用的配置项可以在会话创建阶段同步拿到客户端时区信息，因为时区属于客户端侧信息，默认不会随HTTP请求发送到服务端，官方提供的retrieveExtendedClientDetails本身就是异步实现，无法直接在首屏渲染前同步返回结果。

现有两种成熟的落地解决方案：

方案1：Cookie前置获取（首屏无等待，推荐） #

这是最稳妥的可以在首屏渲染前拿到时区的方案：

• 用户首次访问应用根路径时，先返回一个无业务内容的极简静态页面，仅通过几行JS读取客户端时区和偏移量：

  const timezone = Intl.DateTimeFormat().resolvedOptions().timeZone;
  const offset = new Date().getTimezoneOffset();
  document.cookie = `client_timezone=${timezone}; path=/`;
  document.cookie = `client_timezone_offset=${offset}; path=/`;
  // 写入完成后跳转到实际Vaadin应用入口
  location.href = '/app';
  

• Vaadin会话初始化阶段，直接从当前请求的Cookie中读取时区信息即可，完全可用于首屏渲染逻辑，无异步延迟。

方案2：首屏占位配合提前触发异步获取（无需额外跳转） #

如果不想做跳转逻辑，可以通过框架监听器提前触发异步拉取，配合首屏加载状态优化体验：

• 注册VaadinServiceInitListener，在UI初始化钩子中立刻调用retrieveExtendedClientDetails方法
• 首屏渲染时先展示通用的加载占位符，拿到时区回调后再渲染实际业务内容，用户感知较弱。

官方推荐的异步获取时区代码示例：

UI.getCurrent().getPage().retrieveExtendedClientDetails(extendedClientDetails -> {
    // 获取原始时区偏移（不含夏令时调整）
    extendedClientDetails.getRawTimezoneOffset();
    // 获取当前生效的时区偏移
    extendedClientDetails.getTimezoneOffset();
});

内容的提问来源于stack exchange，提问作者The Shoe Shiner