Flutter Web中如何避免Provider在新标签页重新初始化

问题场景：使用html.window.open('/#${Result.routeName}', "_blank")打开新标签页时，Provider会重新初始化，导致原有状态丢失，需要在不依赖本地存储的前提下实现跨标签页状态共享。

可行方案 #

1. 利用浏览器Broadcast Channel API #

Broadcast Channel是浏览器原生API，支持同源标签页之间的消息通信，可实现状态实时同步：

• 在Provider的状态更新逻辑中，发送状态变更消息到广播频道：

  // 状态更新后发送消息
  void updateState(Map<String, dynamic> newState) {
    // 更新本地状态
    _state = newState;
    notifyListeners();
    
    // 广播状态到其他标签页
    final channel = html.BroadcastChannel('flutter_app_state');
    channel.postMessage(newState);
    channel.close();
  }
  

• 在应用初始化阶段（比如main函数或根Widget的initState）监听广播频道，同步状态：

  @override
  void initState() {
    super.initState();
    final channel = html.BroadcastChannel('flutter_app_state');
    channel.onMessage.listen((event) {
      final provider = Provider.of<MyAppProvider>(context, listen: false);
      provider.updateLocalState(event.data); // 注意这里要实现仅更新本地状态的方法，避免重复广播
    });
  }
  

2. 使用SharedWorker共享状态 #

SharedWorker是后台运行的共享脚本，可作为跨标签页的状态中枢，所有标签页通过与Worker通信获取/更新状态：

• 首先在web目录下创建SharedWorker脚本app_state_worker.js：

  let globalState = {};
  const activeConnections = [];
  
  self.onconnect = (event) => {
    const port = event.ports[0];
    activeConnections.push(port);
  
    // 给新连接的标签页发送当前全局状态
    port.postMessage(globalState);
  
    port.onmessage = (msg) => {
      switch(msg.data.type) {
        case 'update':
          globalState = {...globalState, ...msg.data.payload};
          // 同步状态到所有连接的标签页
          activeConnections.forEach(conn => conn.postMessage(globalState));
          break;
        case 'get':
          port.postMessage(globalState);
          break;
      }
    };
  };
  

• 在Flutter代码中连接SharedWorker并同步状态到Provider：

  late html.SharedWorker worker;
  late html.MessagePort port;
  
  @override
  void initState() {
    super.initState();
    // 连接SharedWorker
    worker = html.SharedWorker('app_state_worker.js');
    port = worker.port;
  
    // 监听Worker的状态推送
    port.onMessage.listen((event) {
      final provider = Provider.of<MyAppProvider>(context, listen: false);
      provider.updateLocalState(event.data);
    });
  
    // 初始化时获取当前全局状态
    port.postMessage({'type': 'get'});
  }
  
  // 更新状态的方法
  void updateAppState(Map<String, dynamic> newState) {
    final provider = Provider.of<MyAppProvider>(context, listen: false);
    provider.updateLocalState(newState);
    port.postMessage({'type': 'update', 'payload': newState});
  }
  

3. 初始化时传递状态（简易方案） #

如果仅需要在新标签页初始化时同步状态，可通过URL参数传递序列化后的状态：

• 打开新标签页时携带状态参数：

  final provider = Provider.of<MyAppProvider>(context, listen: false);
  final stateJson = jsonEncode(provider.currentState);
  html.window.open('/#${Result.routeName}?state=$stateJson', "_blank");
  

• 在新标签页的初始化逻辑中解析参数恢复状态：

  @override
  void initState() {
    super.initState();
    final uri = html.window.location.href;
    final queryParams = Uri.parse(uri).queryParameters;
    if (queryParams.containsKey('state')) {
      final state = jsonDecode(queryParams['state']!);
      final provider = Provider.of<MyAppProvider>(context, listen: false);
      provider.restoreState(state);
    }
  }
  

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