Web: RouteInformationParser.parseRouteInformation is not passed the state when restarting the app

[alexeyinkin]

Steps to Reproduce

1. Create a new app, replace main.dart with the attached code.
2. Run the app.
3. Click 'Navigate Locally' to store the state in browser history.
4. Click back and forward browser buttons to verify in the console that the history entry contains the state and is received by parseRouteInformation.
5. Click 'Navigate Away' to leave the app and open another website.
6. Click the back browser button to reload the app.

Expected results: In parseRouteInformation, routeInformation.state contains {"changed":""} map or a serialized representation, this gets printed in the console. JavaScript's history.state matches the passed state.

Actual results: In parseRouteInformation, routeInformation.state is null, this gets printed in the console. JavaScript's history.state still has the correct state.

main.dart

import 'dart:js' as js;
import 'dart:html';

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class Configuration {
  final String? location;
  final Object? state;

  Configuration(this.location, this.state);
  @override
  toString() => '$location $state';
}

class MyRouterDelegate extends RouterDelegate<Configuration> with ChangeNotifier {
  @override
  var currentConfiguration = null;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Column(
        children: [
          ElevatedButton(
            child: const Text('Navigate Locally'),
            onPressed: () {
              currentConfiguration = Configuration('/changed', {'changed': ''});
              delegate.notifyListeners();
            },
          ),
          ElevatedButton(
            child: const Text('Navigate Away'),
            onPressed: () {
              window.location.href = 'https://google.com';
            },
          ),
        ],
      ),
    );
  }

  @override
  Future<bool> popRoute() async => true;

  @override
  Future<void> setNewRoutePath(configuration) async {
    print('setNewRoutePath: $configuration');
    currentConfiguration = configuration;
    delegate.notifyListeners();
  }
}

final delegate = MyRouterDelegate();

class MyRouteInformationParser extends RouteInformationParser<Configuration> {
  @override
  Future<Configuration> parseRouteInformation(RouteInformation ri) async {
    print('');
    print('parseRouteInformation:');
    print('RouteInformation.state: ${ri.state}');
    js.context.callMethod('eval', ['console.log("JS history.state:       " + JSON.stringify(history.state.state))']);
    print('');
    return Configuration(ri.location, ri.state);
  }

  @override
  RouteInformation restoreRouteInformation(Configuration configuration) {
    return RouteInformation(
      location: configuration.location,
      state: configuration.state,
    );
  }
}

final parser = MyRouteInformationParser();

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp.router(
      routerDelegate: delegate,
      routeInformationParser: parser,
      restorationScopeId: '123456',
    );
  }
}

flutter doctor -v

[✓] Flutter (Channel stable, 3.0.5, on Ubuntu 20.04.4 LTS 5.14.0-1045-oem, locale en_US.UTF-8)
    • Flutter version 3.0.5 at /home/alexey/snap/flutter/common/flutter
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision f1875d570e (3 weeks ago), 2022-07-13 11:24:16 -0700
    • Engine revision e85ea0e79c
    • Dart version 2.17.6
    • DevTools version 2.12.2

[!] Android toolchain - develop for Android devices (Android SDK version 33.0.0)
    • Android SDK at /home/alexey/Android/Sdk
    ✗ cmdline-tools component is missing
      Run `path/to/sdkmanager --install "cmdline-tools;latest"`
      See https://developer.android.com/studio/command-line for more details.
    ✗ Android license status unknown.
      Run `flutter doctor --android-licenses` to accept the SDK licenses.
      See https://flutter.dev/docs/get-started/install/linux#android-setup for more details.

[✓] Chrome - develop for the web
    • Chrome at google-chrome

[✓] Linux toolchain - develop for Linux desktop
    • clang version 6.0.0-1ubuntu2 (tags/RELEASE_600/final)
    • cmake version 3.10.2
    • ninja version 1.8.2
    • pkg-config version 0.29.1

[✓] Android Studio (version 2021.2)
    • Android Studio at /home/alexey/bin/android-studio
    • Flutter plugin version 68.1.2
    • Dart plugin version 212.5744
    • Java version OpenJDK Runtime Environment (build 11.0.12+0-b1504.28-7817840)

[✓] VS Code (version 1.69.2)
    • VS Code at /usr/share/code
    • Flutter extension can be installed from:
      🔨 https://marketplace.visualstudio.com/items?itemName=Dart-Code.flutter

[✓] Connected device (2 available)
    • Linux (desktop) • linux  • linux-x64      • Ubuntu 20.04.4 LTS 5.14.0-1045-oem
    • Chrome (web)    • chrome • web-javascript • Google Chrome 103.0.5060.134

[✓] HTTP Host Availability
    • All required HTTP hosts are available

! Doctor found issues in 1 category.

vokoscreen-2022-07-31_12-16-31.mp4

[alexeyinkin]

This may have the same cause as

• [go_router] state params missing after refresh on web #106312

However, if it is reproducible without go_router, it affects more apps and may need a higher priority.

[huycozy]

Hi @alexeyinkin, thanks for filing the issue.
This issue is reproducible on the latest stable and master channels with sample code in #108697 (comment)
After restarting web browser, the RouteInformation.state value is null but the history.state.state from JS is not.

Also, I'm not familiar with object state lifecycle in JS but if we try getting history.state.state value from browser console, it will be the same as RouteInformation.state value (both of them are null) (please watch demo video for the detail).

Demo

Screen.Recording.2022-08-01.at.19.12.01.mp4

flutter doctor -v

[✓] Flutter (Channel stable, 3.0.5, on macOS 12.2.1 21D62 darwin-x64, locale en-VN)
    • Flutter version 3.0.5 at /Users/huynq/Documents/GitHub/flutter
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision f1875d570e (9 hours ago), 2022-07-13 11:24:16 -0700
    • Engine revision e85ea0e79c
    • Dart version 2.17.6
    • DevTools version 2.12.2

[✓] Android toolchain - develop for Android devices (Android SDK version 31.0.0)
    • Android SDK at /Users/huynq/Library/Android/sdk
    • Platform android-33, build-tools 31.0.0
    • ANDROID_HOME = /Users/huynq/Library/Android/sdk
    • Java binary at: /Applications/Android Studio.app/Contents/jre/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build 11.0.12+0-b1504.28-7817840)
    • All Android licenses accepted.

[✓] Xcode - develop for iOS and macOS (Xcode 13.3)
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • CocoaPods version 1.11.3

[✓] Chrome - develop for the web
    • Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome

[✓] Android Studio (version 2021.2)
    • Android Studio at /Applications/Android Studio.app/Contents
    • Flutter plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/9212-flutter
    • Dart plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/6351-dart
    • Java version OpenJDK Runtime Environment (build 11.0.12+0-b1504.28-7817840)

[✓] IntelliJ IDEA Community Edition (version 2020.3.3)
    • IntelliJ at /Applications/IntelliJ IDEA CE.app
    • Flutter plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/9212-flutter
    • Dart plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/6351-dart

[✓] IntelliJ IDEA Community Edition (version 2022.1.1)
    • IntelliJ at /Users/huynq/Library/Application Support/JetBrains/Toolbox/apps/IDEA-C/ch-0/221.5591.52/IntelliJ IDEA CE.app
    • Flutter plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/9212-flutter
    • Dart plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/6351-dart

[✓] VS Code (version 1.69.0)
    • VS Code at /Applications/Visual Studio Code.app/Contents
    • Flutter extension version 3.44.0

[✓] Connected device (3 available)
    • SM T225 (mobile) • R9JT3004VRJ • android-arm64  • Android 11 (API 30)
    • macOS (desktop)  • macos       • darwin-x64     • macOS 12.2.1 21D62 darwin-x64
    • Chrome (web)     • chrome      • web-javascript • Google Chrome 103.0.5060.114

[✓] HTTP Host Availability
    • All required HTTP hosts are available

• No issues found!

[✓] Flutter (Channel master, 3.1.0-0.0.pre.2008, on macOS 12.5 21G72 darwin-x64, locale en-VN)
    • Flutter version 3.1.0-0.0.pre.2008 on channel master at /Users/huynq/Documents/GitHub/flutter_master
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision 11a9939005 (9 hours ago), 2022-07-31 13:52:06 -0400
    • Engine revision 3cba105ed0
    • Dart version 2.19.0 (build 2.19.0-49.0.dev)
    • DevTools version 2.16.0

[✓] Android toolchain - develop for Android devices (Android SDK version 31.0.0)
    • Android SDK at /Users/huynq/Library/Android/sdk
    • Platform android-33, build-tools 31.0.0
    • ANDROID_HOME = /Users/huynq/Library/Android/sdk
    • Java binary at: /Applications/Android Studio.app/Contents/jre/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build 11.0.12+0-b1504.28-7817840)
    • All Android licenses accepted.

[✓] Xcode - develop for iOS and macOS (Xcode 13.3)
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • Build 13E113
    • CocoaPods version 1.11.3

[✓] Chrome - develop for the web
    • Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome

[✓] Android Studio (version 2021.2)
    • Android Studio at /Applications/Android Studio.app/Contents
    • Flutter plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/9212-flutter
    • Dart plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/6351-dart
    • Java version OpenJDK Runtime Environment (build 11.0.12+0-b1504.28-7817840)

[✓] IntelliJ IDEA Community Edition (version 2020.3.3)
    • IntelliJ at /Applications/IntelliJ IDEA CE.app
    • Flutter plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/9212-flutter
    • Dart plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/6351-dart

[✓] IntelliJ IDEA Community Edition (version 2022.1.1)
    • IntelliJ at /Users/huynq/Library/Application Support/JetBrains/Toolbox/apps/IDEA-C/ch-0/221.5591.52/IntelliJ IDEA CE.app
    • Flutter plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/9212-flutter
    • Dart plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/6351-dart

[✓] VS Code (version 1.69.2)
    • VS Code at /Applications/Visual Studio Code.app/Contents
    • Flutter extension version 3.44.0

[✓] Connected device (2 available)
    • macOS (desktop) • macos  • darwin-x64     • macOS 12.5 21G72 darwin-x64
    • Chrome (web)    • chrome • web-javascript • Google Chrome 103.0.5060.134

[✓] HTTP Host Availability
    • All required HTTP hosts are available

• No issues found!

Labeling this issue for further investigation from the team.

[alexeyinkin]

A workaround:

RouteInformation apply108697Workaround(RouteInformation routeInformation) {
  if (routeInformation.state != null) {
    return routeInformation;
  }

  final stateJson = js.context.callMethod(
    'eval',
    ['JSON.stringify(history.state.state)'],
  );

  return RouteInformation(
    location: routeInformation.location,
    state: jsonDecode(stateJson),
  );
}

I also made a platform-agnostic package with this: https://pub.dev/packages/flutter_issue_108697_workaround