Flutter Web无活动超时优化求助：跨标签页检测失效问题

问题根源 #

浏览器会对后台标签页的定时器进行节流（降低触发频率甚至暂停），导致依赖Flutter原生Timer实现的无活动登出逻辑，在用户切换到同窗口其他标签页时无法正常计时，最终功能失效。而切换到其他应用时，浏览器窗口虽为后台，但部分浏览器对窗口级别的后台定时器节流策略不同，所以功能正常。

解决方案 #

结合浏览器Page Visibility API监听标签页可见性，搭配Flutter全局事件监听，精准管理无活动计时：

1. 封装页面可见性监听 #

通过dart:js调用浏览器原生API，获取标签页的可见状态：

import 'dart:js' as js;

class PageVisibility {
  // 判断当前标签页是否可见
  static bool get isVisible => js.context['document']['hidden'] == false;

  // 添加可见性变化监听
  static void addVisibilityListener(Function(bool isVisible) listener) {
    js.context['document'].callMethod('addEventListener', [
      'visibilitychange',
      () => listener(!js.context['document']['hidden']),
    ]);
  }
}

2. 实现无活动管理类 #

整合事件监听、Timer管理和页面可见性处理：

import 'dart:async';
import 'package:flutter/material.dart';

class InactivityManager {
  // 无活动超时时间（15分钟）
  final Duration timeoutDuration = const Duration(minutes: 15);
  Timer? _inactivityTimer;
  DateTime? _lastInactiveTime;
  VoidCallback? onTimeout;

  InactivityManager({this.onTimeout}) {
    _initListeners();
  }

  void _initListeners() {
    // 监听全局指针事件（点击、移动）
    GestureBinding.instance.pointerRouter.addGlobalRoute(_handlePointerEvent);
    // 监听页面可见性变化
    PageVisibility.addVisibilityListener(_handleVisibilityChange);
    // 初始化计时
    _resetTimer();
  }

  // 处理指针活动，重置计时
  void _handlePointerEvent(PointerEvent event) {
    if (event is PointerDownEvent || event is PointerMoveEvent) {
      _resetTimer();
    }
  }

  // 处理页面可见性变化
  void _handleVisibilityChange(bool isVisible) {
    if (isVisible) {
      // 页面重新可见，计算不可见时长
      if (_lastInactiveTime != null) {
        final inactiveDuration = DateTime.now().difference(_lastInactiveTime!);
        if (inactiveDuration >= timeoutDuration) {
          // 不可见时长超过超时时间，直接登出
          _triggerTimeout();
        } else {
          // 重置计时，剩余时长 = 超时时间 - 不可见时长
          _resetTimer(timeoutDuration - inactiveDuration);
        }
      }
    } else {
      // 页面变为不可见，记录时间并暂停计时
      _lastInactiveTime = DateTime.now();
      _cancelTimer();
    }
  }

  // 重置计时器
  void _resetTimer([Duration? duration]) {
    _cancelTimer();
    _inactivityTimer = Timer(duration ?? timeoutDuration, _triggerTimeout);
    _lastInactiveTime = DateTime.now();
  }

  // 取消计时器
  void _cancelTimer() {
    _inactivityTimer?.cancel();
    _inactivityTimer = null;
  }

  // 触发超时登出
  void _triggerTimeout() {
    onTimeout?.call();
    _cancelTimer();
  }

  // 销毁资源
  void dispose() {
    _cancelTimer();
    GestureBinding.instance.pointerRouter.removeGlobalRoute(_handlePointerEvent);
  }
}

3. 添加文本输入监听（可选） #

如果需要更精准捕获文本输入活动，可在_initListeners()中添加：

// 监听文本输入变化
TextInput.instance.addListener(() {
  if (TextInput.instance.textEditingValue.text.isNotEmpty) {
    _resetTimer();
  }
});

4. 在应用中使用 #

在主页面的状态类中初始化管理类：

class MainPage extends StatefulWidget {
  @override
  State<MainPage> createState() => _MainPageState();
}

class _MainPageState extends State<MainPage> {
  late InactivityManager _inactivityManager;

  @override
  void initState() {
    super.initState();
    _inactivityManager = InactivityManager(
      onTimeout: () {
        // 执行登出逻辑，例如跳转到登录页
        Navigator.pushReplacementNamed(context, '/login');
      },
    );
  }

  @override
  void dispose() {
    _inactivityManager.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      // 你的页面内容
    );
  }
}

核心逻辑说明 #

• 标签页可见时，通过Flutter全局事件监听用户活动，实时重置计时器。
• 标签页不可见时，暂停Timer并记录当前时间，避免浏览器节流影响计时准确性。
• 标签页重新可见时，计算不可见时长，判断是否已超过超时阈值，直接触发登出或重置剩余时长计时。

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