Vaadin 23：iPhone闲置后UI重建问题——无需手动刷新？

针对iPhone上Vaadin页面闲置后UI被销毁导致的白屏问题，以下几种方法可实现无需手动刷新自动恢复UI：

1. 配置自动重连与会话超时 #

Vaadin自带自动重连机制，结合会话超时调整，能在连接断开时自动尝试重建UI：

• 调整会话超时：在web.xml中延长会话超时时间（单位分钟），减少UI被过早销毁的概率：

<session-config>
    <session-timeout>120</session-timeout>
</session-config>

• 启用Push自动重连：给UI类添加@Push注解，开启自动重连并配置提示：

@Push
public class MyUI extends UI {
    @Override
    protected void init(VaadinRequest request) {
        getPushConfiguration().setPushMode(PushMode.AUTOMATIC);
        // 设置重连提示，提升用户感知
        setReconnectDialogConfiguration(new ReconnectDialogConfiguration()
                .setDialogText("连接已断开，正在重新连接...")
                .setReconnectAttempts(5));
    }
}

注意：需确保项目已引入vaadin-push依赖，服务器支持WebSocket或长轮询（如Tomcat默认支持WebSocket）。

2. 监听页面可见性自动触发UI重建 #

利用浏览器的visibilitychange事件，在页面从后台回到前台时检查UI状态，自动重建：

• 服务端UI类配置：注册客户端回调，接收页面可见性变化通知：

@JavaScript("visibility-handler.js")
public class MyUI extends UI {
    @Override
    protected void init(VaadinRequest request) {
        registerRpc(new VisibilityRpc() {
            @Override
            public void onPageVisible() {
                // 检查当前UI是否已被销毁，是则自动刷新页面
                if (!getSession().getUIs().contains(MyUI.this)) {
                    Page.getCurrent().reload();
                }
            }
        });
    }

    public interface VisibilityRpc extends ClientRpc {
        void onPageVisible();
    }
}

• 客户端JS脚本：创建visibility-handler.js放在webapp/VAADIN/js目录下，监听页面可见性：

window.addEventListener('visibilitychange', function() {
    if (!document.hidden) {
        vaadin.registerRpc('com.example.MyUI.VisibilityRpc', function(rpc) {
            rpc.onPageVisible();
        });
    }
});

3. 自定义UI销毁逻辑延迟销毁 #

通过自定义UIProvider，延迟UI销毁时间，避免短时间闲置就销毁UI：

public class CustomUIProvider extends DefaultUIProvider {
    @Override
    public void destroyUI(UIDestroyEvent event) {
        // 延迟30秒销毁UI，确认用户确实离开
        new Timer().schedule(new TimerTask() {
            @Override
            public void run() {
                CustomUIProvider.super.destroyUI(event);
            }
        }, 30000);
    }
}

在web.xml中注册该Provider：

<context-param>
    <param-name>vaadin.ui.provider</param-name>
    <param-value>com.example.CustomUIProvider</param-value>
</context-param>

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