如何在Vaadin Flow中获取客户端（浏览器）时区？

问题原因说明 #

1. 你使用retrieveExtendedClientDetails时拿到null的核心原因是该方法为异步回调逻辑：回调函数会在浏览器端信息返回后才触发，你在回调外读取变量时，请求还未完成，自然获取不到值，这不是Vaadin 20版本的兼容问题。
2. Intl.DateTimeFormat().resolvedOptions().timeZone返回的是标准IANA时区标识符，Java 8+的ZoneId原生支持绝大多数这类标识符，映射失败一般是罕见边界场景，加一层兼容逻辑即可。

可用实现代码 #

1. 异步非阻塞实现（推荐）

直接在回调内处理时区相关业务逻辑，不会阻塞主线程：

import java.time.ZoneId;
import java.time.DateTimeException;

// ...

UI.getCurrent().getPage()
    .executeJs("return Intl.DateTimeFormat().resolvedOptions().timeZone;")
    .then(value -> {
        ZoneId clientZoneId;
        try {
            // 直接映射标准IANA时区ID
            clientZoneId = ZoneId.of(value.asString());
        } catch (DateTimeException e) {
            // 映射失败时降级为服务器默认时区，也可自定义转换规则
            clientZoneId = ZoneId.systemDefault();
        }
        // 此处执行时区相关业务逻辑，如保存到会话、转换时间格式等
        Notification.show("客户端时区：" + clientZoneId.getId());
    });

2. 同步阻塞实现（仅当必须在当前方法内拿值时使用）

如果业务需要在当前代码位置同步拿到时区值，可使用CountDownLatch加超时等待：

import java.time.ZoneId;
import java.time.DateTimeException;
import java.util.concurrent.CountDownLatch;
import java.util.concurrent.TimeUnit;
import java.util.concurrent.atomic.AtomicReference;

// ...

AtomicReference<ZoneId> zoneRef = new AtomicReference<>();
CountDownLatch latch = new CountDownLatch(1);

UI.getCurrent().getPage()
    .executeJs("return Intl.DateTimeFormat().resolvedOptions().timeZone;")
    .then(value -> {
        try {
            zoneRef.set(ZoneId.of(value.asString()));
        } catch (DateTimeException e) {
            zoneRef.set(ZoneId.systemDefault());
        } finally {
            latch.countDown();
        }
    });

try {
    // 最长等待1秒，超时使用默认时区
    if (!latch.await(1, TimeUnit.SECONDS)) {
        zoneRef.set(ZoneId.systemDefault());
    }
} catch (InterruptedException e) {
    zoneRef.set(ZoneId.systemDefault());
    Thread.currentThread().interrupt();
}

// 此处可直接使用非空的时区对象
ZoneId myZoneId = zoneRef.get();

调试方法 #

如果需要调试JS执行逻辑，只需把执行的JS代码改为debugger; return Intl.DateTimeFormat().resolvedOptions().timeZone;，打开Chrome开发者工具后触发代码执行，就会自动断点到对应JS执行位置。

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