关于Flutter Web刷新与后退问题的解决方法

前言

在 pc上，你要使用flutter来创建网页。特别是在清理时，由于局部的变数被清除，会造成网页问题，因此必须要注意到全局的高速缓存。

通常，我们使用导航器来切换网页：

Navigator.of(context).pushNamed(String routeName, {Object? arguments,});

这样，参数就可以被传递，并且可以在新的页面上通过 ModalRoute. of (context).settings.ar gume nts来获得传递参数并使用。但是如果是web页面，通过浏览器刷新后发现arguments变成null的，所以说flutter内部并没有将这部分持久化，刷新就被清空了，这样就导致页面出错。

同时，当我们使用静态变量保存某些全局信息时，它也会在刷新时被清除，这也会造成问题。

因此，储存在记忆体中的资料并不是绝对安全的，因为很显然，这些资料会被清除掉，所以，当你想要保存这些资料时，必须要用某种方式来保存。

url

通常，我们用上述方法来转换网页，此时 routeName就是网页的名字。但是因为这是一个字符串，所以我们可以将页面名称和参数组合成一个url来代替routeName。不过，在应用程序中，我们也要做一些修改，首先要用 url来获得网页的名字，然后再创建一个网页，然后将这些参数分析出来。在浏览网页时，可以看到在地址栏中的 url后面有一个参数，而在刷新的时候，这些参数就不会被删除，然后页面会再次执行 route操作。

在此，我们解决了一个问题，就是在页面转换中，参数的问题，但不能处理所有的数据，而且由于 url长度的限制，不能传输太多的信息。

所以就需要持久化存储：LocalStorage

Local Storage

LocalStorage是window的一个字段，需要引入html，如下：

import 'dart:html';...var local = windows.localStorage

或

import 'dart:html' as html;...var local = html.windows.localStorage

它是一个Storage类，定义了”[]”运算符，所以可以像map那样使用即可，如下：

//存储"id"这个key的value设置为“123”window.localStorage["id"] = "123";//取出“id”这个key的value使用Text(window.localStorage["id"])

是不是非常简单。存储后我们通过chrome的开发者工具，就可以看到这个存储了，如下：

Cookie Store

注意，windows还有cookieStore用于管理cookie，但是在测试时设置cookie会失败报错，代码：

window.cookieStore.set("id", "123");

报错

Can not modify a secure cookie on insecure origin

这样导致cookie存储不上，这是因为我们测试时域名是http://localhost:xxxx ，chrome认为是不信任的网站。发布到正式环境换成https后应该可以，不过这里我没有测试，LocalStorage基本就满足我的持久化需求了，所以暂时还没有使用cookieStore。

再补充一下cookie的获取，通过getAll函数获取cookies，注意这个函数是异步的所以返回的是Future对象，返回的值是一个object数组，每个object对应一个cookie，如下：

[ { "domain": null, "expires": 1712743928000, "name": "p_h5_u", "path": "/xxx/dev", "sameSite": "lax", "secure": false, "value": "26EC4EAC-1537-4A7A-B813-0F2171704651" }]

所以我们如果要获取具体某一个cookie的值，则需要进行遍历，代码如下：

cookie.getAll().then((value) => { value.forEach((item){ if(item.name == "UCENTER_IUCTOKEN"){ showToast(item.value); } })});

这里我们获取的是cookies中UCENTER_IUCTOKEN对应的值。

后退

浏览器的后退操作和刷新一样是常用操作，但是有时候我们并不想回退到上一页，比如在当前页面弹窗提示用户是否返回。这样就需要我们拦截处理后退操作，通过WillPopScope来实现。

将WillPopScope设置根组件，将页面所有组件放到它里面，然后实现它的onWillPop回调，代码如下：

import 'dart:html';
import 'package:flutter/cupertino.dart';import 'package:flutter/material.dart';
class PageC extends StatefulWidget{
  @override  State<StatefulWidget> createState() {    return _PageC();  }}
class _PageC extends State<PageC>{  int count = 3;  @override  Widget build(BuildContext context) {    return WillPopScope(      child: Scaffold(          body: Column(            children: [              Text(""),              RaisedButton(                child: Text("like"),                onPressed: (){
                },              ),            ],          ),
      ),      onWillPop: _requestPop,    );  }
  Future<bool> _requestPop() {    count--;    print("$count");    if(count == 0){      return new Future.value(true);    }    else {      return new Future.value(false);    }  }}

当返回false的时候就拦截了系统的回退操作，当返回ture则正常回退。

这里我们做一个计数，当点击第三次再执行退出。

但是这里有一个问题，点击返回按钮后，虽然拦截了不会回退到上一页面，但是地址栏中的url变成了首页的url，但是页面还是当前页面，而且点击三次后确实返回了上一页，但是刷新就出问题了。因为url变成了首页，所以一刷新就便会首页了，而不是显示当前页面。

经过反复测试，发现了一个解决方案，就是重新修改history，history也是window的一个字段，对应的就是html中的history api，通过它的源码可以看到它提供的几个函数最终都是通过native方法调用原生来实现的，如下：

class History extends Interceptor implements HistoryBase {  /**   * Checks if the State APIs are supported on the current platform.   *   * See also:   *   * * [pushState]   * * [replaceState]   * * [state]   */  static bool get supportsState => JS('bool', '!!window.history.pushState');  // To suppress missing implicit constructor warnings.  factory History._() {    throw new UnsupportedError("Not supported");  }
  int get length native;
  String? get scrollRestoration native;
  set scrollRestoration(String? value) native;
  dynamic get state =>      convertNativeToDart_SerializedScriptValue(this._get_state);  @JSName('state')  @annotation_Creates_SerializedScriptValue  @annotation_Returns_SerializedScriptValue  dynamic get _get_state native;
  void back() native;
  void forward() native;
  void go([int? delta]) native;
  @SupportedBrowser(SupportedBrowser.CHROME)  @SupportedBrowser(SupportedBrowser.FIREFOX)  @SupportedBrowser(SupportedBrowser.IE, '10')  @SupportedBrowser(SupportedBrowser.SAFARI)  void pushState(/*SerializedScriptValue*/ data, String title, String? url) {    var data_1 = convertDartToNative_SerializedScriptValue(data);    _pushState_1(data_1, title, url);    return;  }
  @JSName('pushState')  @SupportedBrowser(SupportedBrowser.CHROME)  @SupportedBrowser(SupportedBrowser.FIREFOX)  @SupportedBrowser(SupportedBrowser.IE, '10')  @SupportedBrowser(SupportedBrowser.SAFARI)  void _pushState_1(data, title, url) native;
  @SupportedBrowser(SupportedBrowser.CHROME)  @SupportedBrowser(SupportedBrowser.FIREFOX)  @SupportedBrowser(SupportedBrowser.IE, '10')  @SupportedBrowser(SupportedBrowser.SAFARI)  void replaceState(/*SerializedScriptValue*/ data, String title, String? url) {    var data_1 = convertDartToNative_SerializedScriptValue(data);    _replaceState_1(data_1, title, url);    return;  }
  @JSName('replaceState')  @SupportedBrowser(SupportedBrowser.CHROME)  @SupportedBrowser(SupportedBrowser.FIREFOX)  @SupportedBrowser(SupportedBrowser.IE, '10')  @SupportedBrowser(SupportedBrowser.SAFARI)  void _replaceState_1(data, title, url) native;}

这样我们就可以通过它来处理history了，在html中我们知道replaceState就是将当前的url改成一个新的url，我们就通过这个来纠正上面url的问题，修改_requestPop()代码如下：

Future<bool> _requestPop() {    History history = window.history;    count--;    print("$count");    if(count == 0){      return new Future.value(true);    }    else {      setState(() {        history.replaceState(null, null, "#pageC");      });      return new Future.value(false);    }  }

可以看到在返回false之前，通过replaceState重新将当前url改回原url，这样点击后退键的时候url就还保持原样，不会变成首页url，刷新就没有问题了。

刷新后后退

在上步中其实没有完全解决问题，问题在刷新后再后退，这不仅仅是拦截后退操作时存在的问题。实质是因为在任何情况下点击浏览器刷新后，flutter应用是重新启动的，所以内存全部丢失，这也是上面全局缓存的原因。

除了全局变量，其实还影响着flutter的Navigator，我们来看Navigator的push源码：

@optionalTypeArgsFuture<T?> pushNamed<T extends Object?>(  String routeName, {  Object? arguments,}) {  return push<T>(_routeNamed<T>(routeName, arguments: arguments)!);}

继续

@optionalTypeArgsFuture<T?> push<T extends Object?>(Route<T> route) {  _pushEntry(_RouteEntry(route, initialState: _RouteLifecycle.push));  return route.popped;}

继续

void _pushEntry(_RouteEntry entry) {  assert(!_debugLocked);  assert(() {    _debugLocked = true;    return true;  }());  assert(entry.route != null);  assert(entry.route._navigator == null);  assert(entry.currentState == _RouteLifecycle.push);  _history.add(entry);  _flushHistoryUpdates();  assert(() {    _debugLocked = false;    return true;  }());  _afterNavigation(entry.route);}

可以看到Navigator内部用一个_history来维护历史路径，这个_history是一个list而已，如下

List<_RouteEntry> _history = <_RouteEntry>[];

而pop代码如下：

@optionalTypeArgsvoid pop<T extends Object?>([ T? result ]) {  assert(!_debugLocked);  assert(() {    _debugLocked = true;    return true;  }());  final _RouteEntry entry = _history.lastWhere(_RouteEntry.isPresentPredicate);  if (entry.hasPage) {    if (widget.onPopPage!(entry.route, result))      entry.currentState = _RouteLifecycle.pop;  } else {    entry.pop<T>(result);  }  if (entry.currentState == _RouteLifecycle.pop) {    // Flush the history if the route actually wants to be popped (the pop    // wasn't handled internally).    _flushHistoryUpdates(rearrangeOverlay: false);    assert(entry.route._popCompleter.isCompleted);  }  assert(() {    _debugLocked = false;    return true;  }());  _afterNavigation(entry.route);}

可以看到也是通过_history来实现的。

当我们刷新后，实际上flutter重启了，这时候_history是空的，而因为浏览器记录了当前的url，所以会加载这个url对应的页面，这样_history就只有一个当前页面的router（注意，这时候浏览器的history其实是完整的，但是因为回退时直接交给flutter处理了，浏览器的history没有用到），所以执行pop就会出问题，因为没有上一页了，所以没有执行任何动作，但是当前页面内容清空，变成空白的。

而浏览器回退按钮则有不同，并不是直接执行pop，而是一系列调用，源头在widgets/binding.dart中

mixin WidgetsBinding on BindingBase, ServicesBinding, SchedulerBinding, GestureBinding, RendererBinding, SemanticsBinding {  @override  void initInstances() {    super.initInstances();    _instance = this;
    assert(() {      _debugAddStackFilters();      return true;    }());
    // Initialization of [_buildOwner] has to be done after    // [super.initInstances] is called, as it requires [ServicesBinding] to    // properly setup the [defaultBinaryMessenger] instance.    _buildOwner = BuildOwner();    buildOwner!.onBuildScheduled = _handleBuildScheduled;    window.onLocaleChanged = handleLocaleChanged;    window.onAccessibilityFeaturesChanged = handleAccessibilityFeaturesChanged;    SystemChannels.navigation.setMethodCallHandler(_handleNavigationInvocation);    FlutterErrorDetails.propertiesTransformers.add(transformDebugCreator);  }  ...

这里我们看到有这样一行代码：

SystemChannels.navigation.setMethodCallHandler(_handleNavigationInvocation);

这是与native进行交互，或者当收到native的相关事件就会执行_handleNavigationInvocation

Future<dynamic> _handleNavigationInvocation(MethodCall methodCall) {  switch (methodCall.method) {    case 'popRoute':      return handlePopRoute();    case 'pushRoute':      return handlePushRoute(methodCall.arguments as String);    case 'pushRouteInformation':      return _handlePushRouteInformation(methodCall.arguments as Map<dynamic, dynamic>);  }  return Future<dynamic>.value();}

浏览器的回退按钮就是一个popRoute事件，所以执行handlePopRoute

@protectedFuture<void> handlePopRoute() async {  for (final WidgetsBindingObserver observer in List<WidgetsBindingObserver>.from(_observers)) {    if (await observer.didPopRoute())      return;  }  SystemNavigator.pop();}

继续执行didPopRoute，这个函数在widgets/app.dart中实现

@overrideFuture<bool> didPopRoute() async {  assert(mounted);  // The back button dispatcher should handle the pop route if we use a  // router.  if (_usesRouter)    return false;
  final NavigatorState? navigator = _navigator?.currentState;  if (navigator == null)    return false;  return await navigator.maybePop();}

这样就进入到Navigator中了

@optionalTypeArgsFuture<bool> maybePop<T extends Object?>([ T? result ]) async {  final _RouteEntry? lastEntry = _history.cast<_RouteEntry?>().lastWhere(    (_RouteEntry? e) => e != null && _RouteEntry.isPresentPredicate(e),    orElse: () => null,  );  if (lastEntry == null)    return false;  assert(lastEntry.route._navigator == this);  final RoutePopDisposition disposition = await lastEntry.route.willPop(); // this is asynchronous  assert(disposition != null);  if (!mounted)    return true; // forget about this pop, we were disposed in the meantime  final _RouteEntry? newLastEntry = _history.cast<_RouteEntry?>().lastWhere(    (_RouteEntry? e) => e != null && _RouteEntry.isPresentPredicate(e),    orElse: () => null,  );  if (lastEntry != newLastEntry)    return true; // forget about this pop, something happened to our history in the meantime  switch (disposition) {    case RoutePopDisposition.bubble:      return false;    case RoutePopDisposition.pop:      pop(result);      return true;    case RoutePopDisposition.doNotPop:      return true;  }}

上面我们知道刷新后_history中只有当前页面的router，这时候disposition就是RoutePopDisposition.bubble，我们看它的解释

/// Delegate this to the next level of navigation.////// If [Route.willPop] returns [bubble] then the back button will be handled/// by the [SystemNavigator], which will usually close the application.

会关闭当前应用，但是浏览器并未关闭，所以会重新加载默认页面。注意这与上面pop结果是不一样的，因为这时候还没有执行pop，而且也不会执行到pop了。如果是正常情况下_history有上一页记录，disposition是RoutePopDisposition.pop就会执行pop了。

对于这个问题很多人也在github的flutter项目中反馈 https://github.com/flutter/flutter/issues/59277

正式的解决方案是使用Navigator2.0

这里面我提到，Navigator2.0在浏览器回退按钮的处理上又与Navigator1.0不同，点击回退按钮时Navigator2.0并不是执行pop操作，而是执行setNewRoutePath操作，本质上应该是从浏览器的history中获取上一个页面的url，然后重新加载。这样确实解决了刷新后回退的问题，因为刷新后浏览器的history并未丢失，但是也导致了文章中我们提到的flutter中的页面栈混乱的问题。

那么Navigator2.0为什么与Navigator1.0不同？

实际上Navigator2.0与Navigator1.0一样，也是通过native调用_handleNavigationInvocation

Future<dynamic> _handleNavigationInvocation(MethodCall methodCall) {  switch (methodCall.method) {    case 'popRoute':      return handlePopRoute();    case 'pushRoute':      return handlePushRoute(methodCall.arguments as String);    case 'pushRouteInformation':      return _handlePushRouteInformation(methodCall.arguments as Map<dynamic, dynamic>);  }  return Future<dynamic>.value();}

但是在2.0中methodCall.method是pushRouteInformation，所以执行了_handlePushRouteInformation，这样就导致了与Navigator1.0的不同。而_handlePushRouteInformation就是执行了push流程，这里就不详细说了，所以最后执行了setNewRoutePath，这样也导致了文章中提到的问题

图解

最后我们详细的展示两种方式在这个过程中的效果，以便更清晰的看到问题所在。假设有三个页面A，B，C。打开顺序是A -> B -> C。

1)Navigator1.0

正常打开

Navigator中是A -> B -> C（浏览器中history是 A -> B -> C）

点击刷新后

Navigator中是C（浏览器中history是 A -> B -> C）

再点击回退活执行pop都会出现问题

2)Navigator2.0

正常打开

stack中是A -> B -> C（浏览器中history是 A -> B -> C）

点击刷新后

stack中是C（浏览器中history是 A -> B -> C）

点击回退的情况是

stack中是C -> B（浏览器中history是 A -> B）

所以Navigator2.0可以解决这个问题，但是因为是执行setNewRoutePath，所以stack是错的

执行pop的情况是

因为本质上还是通过Navigator，所以同样会执行到Navigator的maybePop，而这时_history只有C页面，所以同样是RoutePopDisposition.bubble，结果就是页面没有任何反应。

回到最开始的A -> B -> C，如果不刷新，点击回退后是

stack中是A -> B -> C -> B（浏览器中history是 A -> B ）

这时候虽然页面表现没问题，但是stack同样是错的

这时候如果执行pop，情况是

stack中是A -> B -> C （浏览器中history是 A -> B -> C ）

可以看到并没有返回A页面，而是返回了C页面，所以这是有问题的

这就是Navigator2.0自身存在的问题，在文章中也提到了这个问题同样很多人提出了issue，google也注意到了，但是目前还未解决。关键是在setNewRoutePath的时候我们无法判断是回退键导致的还是真正的新页面，所以无法区分处理。

（这里其实有一个不完善的解决方案，就是在setNewRoutePath时，将新的url与_stack中的对比，如果有说明是回退操作，将_stack中它前面的都移除。但是这要求我们的每个页面在栈中时唯一的，无法同时出现两个相同的页面，如果应用相对简单其实是可以考虑这种方案的）

总结

所以总结就是，目前flutter web对于浏览器还是没有适配完全，无论Navigator1.0还是Navigator2.0，都存在不可解决的严重问题。目前来看google的对flutter web的意图，还是开发移动web并在App中通过webkit这种内核使用，并没有想开发者使用flutter web来开发真正的web应用，或者后续会完善这部分。