Flutter Web: Refreshing browser resets navigation stack and local variables

[huffSamuel]

Steps to Reproduce

1. Run git clone https://github.com/huffSamuel/flutter_browser_navigation.git
2. Run the application in Chrome and follow on-screen instructions.

Expected results:
Refreshing the browser refreshes the current page. Navigator stack and local variables are not cleared.

Actual results:
Current page refreshes but all local properties are null. Navigator stack is cleared so pressing the back arrow results in odd behavior.

Logs

[  +13 ms] executing: [C:\flutter/] git -c log.showSignature=false log -n 1 --pretty=format:%H
[  +90 ms] Exit code 0 from: git -c log.showSignature=false log -n 1 --pretty=format:%H
[        ] f994b769743368b36b9c03fb359f62230b60ab92
[        ] executing: [C:\flutter/] git tag --contains HEAD
[ +374 ms] Exit code 0 from: git tag --contains HEAD
[   +2 ms] 1.19.0-4.1.pre
[  +11 ms] executing: [C:\flutter/] git rev-parse --abbrev-ref --symbolic @{u}
[  +52 ms] Exit code 0 from: git rev-parse --abbrev-ref --symbolic @{u}
[        ] origin/beta
[        ] executing: [C:\flutter/] git ls-remote --get-url origin
[  +49 ms] Exit code 0 from: git ls-remote --get-url origin
[        ] https://github.com/flutter/flutter.git
[ +103 ms] executing: [C:\flutter/] git rev-parse --abbrev-ref HEAD
[  +53 ms] Exit code 0 from: git rev-parse --abbrev-ref HEAD
[        ] beta
[  +67 ms] Artifact Instance of 'AndroidMavenArtifacts' is not required, skipping update.
[        ] Artifact Instance of 'AndroidGenSnapshotArtifacts' is not required, skipping update.
[        ] Artifact Instance of 'AndroidInternalBuildArtifacts' is not required, skipping update.
[        ] Artifact Instance of 'IOSEngineArtifacts' is not required, skipping update.
[   +7 ms] Artifact Instance of 'FlutterWebSdk' is not required, skipping update.
[   +3 ms] Artifact Instance of 'WindowsEngineArtifacts' is not required, skipping update.
[   +6 ms] Artifact Instance of 'MacOSEngineArtifacts' is not required, skipping update.
[        ] Artifact Instance of 'LinuxEngineArtifacts' is not required, skipping update.
[        ] Artifact Instance of 'LinuxFuchsiaSDKArtifacts' is not required, skipping update.
[        ] Artifact Instance of 'MacOSFuchsiaSDKArtifacts' is not required, skipping update.
[        ] Artifact Instance of 'FlutterRunnerSDKArtifacts' is not required, skipping update.
[        ] Artifact Instance of 'FlutterRunnerDebugSymbols' is not required, skipping update.
[  +19 ms] executing: C:\Users\xsand\AppData\Local\Android\Sdk\platform-tools\adb.exe devices -l
[  +43 ms] List of devices attached
[   +7 ms] Artifact Instance of 'AndroidMavenArtifacts' is not required, skipping update.
[   +5 ms] Artifact Instance of 'AndroidGenSnapshotArtifacts' is not required, skipping update.
[        ] Artifact Instance of 'AndroidInternalBuildArtifacts' is not required, skipping update.
[        ] Artifact Instance of 'IOSEngineArtifacts' is not required, skipping update.
[   +3 ms] Artifact Instance of 'WindowsEngineArtifacts' is not required, skipping update.
[        ] Artifact Instance of 'MacOSEngineArtifacts' is not required, skipping update.
[        ] Artifact Instance of 'LinuxEngineArtifacts' is not required, skipping update.
[        ] Artifact Instance of 'LinuxFuchsiaSDKArtifacts' is not required, skipping update.
[   +9 ms] Artifact Instance of 'MacOSFuchsiaSDKArtifacts' is not required, skipping update.
[        ] Artifact Instance of 'FlutterRunnerSDKArtifacts' is not required, skipping update.
[        ] Artifact Instance of 'FlutterRunnerDebugSymbols' is not required, skipping update.
[ +211 ms] Generating C:\Users\xsand\src\browser_refresh\android\app\src\main\java\io\flutter\plugins\GeneratedPluginRegistrant.java
[  +96 ms] This application is not configured to build on the web.
[        ] To add web support to a project, run `flutter create .`.
[   +1 ms] Launching lib\main.dart on Chrome in debug mode...
[  +65 ms] Updating assets
[  +95 ms] Syncing files to device Chrome...
[  +46 ms] Generating C:\Users\xsand\src\browser_refresh\android\app\src\main\java\io\flutter\plugins\GeneratedPluginRegistrant.java
[  +59 ms] <- reset
[   +7 ms] C:\flutter\bin\cache\dart-sdk\bin\dart.exe --disable-dart-dev --old_gen_heap_size=2000 C:\flutter\bin\cache\artifacts\engine\windows-x64\frontend_server.dart.snapshot --sdk-root C:\flutter\bin\cache\flutter_web_sdk/ --incremental --target=dartdevc
--debugger-module-names -Ddart.developer.causal_async_stacks=true --output-dill C:\Users\xsand\AppData\Local\Temp\flutter_tools.4c1f4105\flutter_tool.66061fbb\app.dill --libraries-spec file:///C:/flutter/bin/cache/flutter_web_sdk/libraries.json --packages .packages
-Ddart.vm.profile=false -Ddart.vm.product=false --bytecode-options=source-positions,local-var-info,debugger-stops,instance-field-initializers,keep-unreachable-code,avoid-closure-call-instructions --enable-asserts --track-widget-creation --filesystem-root
C:\Users\xsand\AppData\Local\Temp\flutter_tools.4c1f4105\flutter_tools.8b774b50 --filesystem-scheme org-dartlang-app --initialize-from-dill build\cache.dill.track.dill --platform file:///C:/flutter/bin/cache/flutter_web_sdk/kernel/flutter_ddc_sdk.dill
[  +12 ms] <- compile org-dartlang-app:/web_entrypoint.dart
[+12148 ms] Syncing files to device Chrome... (completed in 12,264ms, longer than expected)
[   +1 ms] Synced 22.2MB.
[        ] <- accept     
[ +168 ms] [CHROME]:
[   +1 ms] [CHROME]:DevTools listening on ws://127.0.0.1:64332/devtools/browser/59681b2b-cb9f-48a9-b3b3-6bbda5c37881
[+5009 ms] Debug service listening on ws://127.0.0.1:64367/KYznAAIYw2A=

[ +537 ms] Debug service listening on ws://127.0.0.1:64367/KYznAAIYw2A=
[   +2 ms] Warning: Flutter's support for web development is not stable yet and hasn't
[        ] been thoroughly tested in production environments.
[        ] For more information see https://flutter.dev/web
[        ]   To hot restart changes while running, press "r" or "R".
[   +1 ms] For a more detailed help message, press "h". To quit, press "q".

Analyzing browser_refresh...
No issues found! (ran in 1.9s)

[√] Flutter (Channel beta, 1.19.0-4.1.pre, on Microsoft Windows [Version 10.0.18363.836], locale en-US)
    • Flutter version 1.19.0-4.1.pre at C:\flutter
    • Framework revision f994b76974 (2 days ago), 2020-06-09 15:53:13 -0700
    • Engine revision 9a28c3bcf4
    • Dart version 2.9.0 (build 2.9.0-14.1.beta)


[√] Android toolchain - develop for Android devices (Android SDK version 28.0.3)
    • Android SDK at C:\Users\xsand\AppData\Local\Android\Sdk
    • Platform android-28, build-tools 28.0.3
    • ANDROID_HOME = C:\Users\xsand\AppData\Local\Android\Sdk
    • Java binary at: D:\Program Files\Android\Android Studio\jre\bin\java
    • Java version OpenJDK Runtime Environment (build 1.8.0_202-release-1483-b03)
    • All Android licenses accepted.

[√] Chrome - develop for the web
    • Chrome at C:\Program Files (x86)\Google\Chrome\Application\chrome.exe

[!] Android Studio (version 3.5)
    • Android Studio at D:\Program Files\Android\Android Studio
    X Flutter plugin not installed; this adds Flutter specific functionality.
    X Dart plugin not installed; this adds Dart specific functionality.
    • Java version OpenJDK Runtime Environment (build 1.8.0_202-release-1483-b03)

[√] VS Code (version 1.46.0)
    • VS Code at C:\Users\xsand\AppData\Local\Programs\Microsoft VS Code
    • Flutter extension version 3.11.0

[√] Connected device (2 available)
    • Web Server • web-server • web-javascript • Flutter Tools
    • Chrome     • chrome     • web-javascript • Google Chrome 83.0.4103.97

! Doctor found issues in 1 category.

[TahaTesser]

Code Sample

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Web Navigator Demo',
      initialRoute: Routes.a,
      onGenerateRoute: generateRoute,
    );
  }
}

Route<dynamic> generateRoute(RouteSettings settings) {
  switch (settings.name) {
    case Routes.impossible:
      return MaterialPageRoute(
        builder: (_) => ImpossiblePage(),
        settings: settings,
      );
    case Routes.a:
      return MaterialPageRoute(
        builder: (_) => PageA(),
        settings: settings,
      );
    case Routes.b:
      return MaterialPageRoute(
        builder: (_) => PageB(),
        settings: settings,
      );
    case Routes.c:
      return MaterialPageRoute(
        builder: (_) => PageC(),
        settings: settings,
      );
    default:
      return MaterialPageRoute(
        builder: (_) => Scaffold(
            body: Center(child: Text('Unknown route ${settings.name}'))),
        settings: settings,
      );
  }
}

class Routes {
  static const String impossible = '/';
  static const String a = '/a';
  static const String b = '/b';
  static const String c = '/c';
}

class Page extends StatelessWidget {
  final String title;
  final String buttonTitle;
  final String buttonRoute;

  const Page({Key key, this.title, this.buttonTitle, this.buttonRoute})
      : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(title),
      ),
      body: Center(
          child: RaisedButton(
              child: Text(buttonTitle),
              onPressed: () => Navigator.of(context).pushNamed(buttonRoute))),
    );
  }
}

class ImpossiblePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(title: Text('Inconceivable')),
        body: Center(
          child: Text('Route exists but we never navigate to this page.'),
        ));
  }
}

class PageA extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Page(
      title: 'Page A',
      buttonTitle: 'Go To B',
      buttonRoute: Routes.b,
    );
  }
}

class PageB extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Page(
      title: 'Page B',
      buttonTitle: 'Go To C',
      buttonRoute: Routes.c,
    );
  }
}

class PageC extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Page C')),
      body: Center(
        child: Column(
          children: [
            Text('Refresh the app here'),
            Text('After the refresh press the browser back arrow'),
          ],
        ),
      ),
    );
  }
}

flutter doctor -v

[✓] Flutter (Channel dev, 1.20.0-0.0.pre, on Mac OS X 10.15.5 19F101, locale en-GB)
    • Flutter version 1.20.0-0.0.pre at /Users/tahatesser/Code/flutter_dev
    • Framework revision d9653445f4 (3 days ago), 2020-06-09 18:43:03 -0400
    • Engine revision e8c13aa012
    • Dart version 2.9.0 (build 2.9.0-14.0.dev 5c1376615e)

[✓] Android toolchain - develop for Android devices (Android SDK version 29.0.3)
    • Android SDK at /Users/tahatesser/Code/sdk
    • Platform android-29, build-tools 29.0.3
    • ANDROID_HOME = /Users/tahatesser/Code/sdk
    • Java binary at: /Applications/Android Studio.app/Contents/jre/jdk/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build 1.8.0_242-release-1644-b3-6222593)
    • All Android licenses accepted.

[✓] Xcode - develop for iOS and macOS (Xcode 11.5)
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • Xcode 11.5, Build version 11E608c
    • CocoaPods version 1.9.3

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

[✓] Android Studio (version 4.0)
    • Android Studio at /Applications/Android Studio.app/Contents
    • Flutter plugin version 46.0.2
    • Dart plugin version 193.7361
    • Java version OpenJDK Runtime Environment (build 1.8.0_242-release-1644-b3-6222593)

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

 
[✓] Connected device (4 available)            
    • SM M305F   • 32003c30dc19668f • android-arm64  • Android 10 (API 29)
    • macOS      • macOS            • darwin-x64     • Mac OS X 10.15.5 19F101
    • Web Server • web-server       • web-javascript • Flutter Tools
    • Chrome     • chrome           • web-javascript • Google Chrome 83.0.4103.97

• No issues found!

flutter doctor -v

[✓] Flutter (Channel beta, 1.19.0-4.1.pre, on Mac OS X 10.15.5 19F101, locale en-GB)
    • Flutter version 1.19.0-4.1.pre at /Users/tahatesser/Code/flutter_beta
    • Framework revision f994b76974 (3 days ago), 2020-06-09 15:53:13 -0700
    • Engine revision 9a28c3bcf4
    • Dart version 2.9.0 (build 2.9.0-14.1.beta)

[✓] Android toolchain - develop for Android devices (Android SDK version 29.0.3)
    • Android SDK at /Users/tahatesser/Code/sdk
    • Platform android-29, build-tools 29.0.3
    • ANDROID_HOME = /Users/tahatesser/Code/sdk
    • Java binary at: /Applications/Android Studio.app/Contents/jre/jdk/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build 1.8.0_242-release-1644-b3-6222593)
    • All Android licenses accepted.

[✓] Xcode - develop for iOS and macOS (Xcode 11.5)
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • Xcode 11.5, Build version 11E608c
    • CocoaPods version 1.9.3

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

[✓] Android Studio (version 4.0)
    • Android Studio at /Applications/Android Studio.app/Contents
    • Flutter plugin version 46.0.2
    • Dart plugin version 193.7361
    • Java version OpenJDK Runtime Environment (build 1.8.0_242-release-1644-b3-6222593)

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

 
[✓] Connected device (3 available)            
    • SM M305F   • 32003c30dc19668f • android-arm64  • Android 10 (API 29)
    • Web Server • web-server       • web-javascript • Flutter Tools
    • Chrome     • chrome           • web-javascript • Google Chrome 83.0.4103.97

• No issues found!

[mdebbar]

When you refresh the page, the entire app is destroyed and launched again. This is how the browser works, nothing specific to Flutter here. So the values of local variables are expected to disappear.

The way navigation works today is by keeping the navigation stack in memory. This means the stack is destroyed on page refresh, and the history is lost.

There are a few projects coming along that will help with these issues:

1. Navigator 2.0: We are designing the Navigator/Router changes in the framework in a way that gives us better history on the web. cc @chunhtai
2. State Restoration: This will give app developers the possibility to store state and recover it after a page refresh (or after the app is killed in the background on mobile). cc @goderbauer

[diegolaballos]

Any updates on this? There seems to be, at least a partial implementation for the Navigator 2.0 in the latest release but I'm not sure if everything needed to reset the navigation stack is there.

[jifferon]

Any update on this? I do believe it is quite strange that there still is no solution to this obvious problem

[chunhtai]

Do you still see the issue if you use Router?

[atereshkov]

It's unfortunately refreshing the entire app, not only navigation stack

[phamnhuvu-dev]

I think this problem by this issue https://bugs.chromium.org/p/chromium/issues/detail?id=1098388.

[michaeldwu]

Might not be entirely useful, but here's a stackoverflow suggestion from the dart:html package that detects when the page is being refreshed or closed (tested on my end and it works). My current working theory is that if I can detect when the page is being refreshed, I can set the local properties to previous values. Haven't completely figured it out yet, just thought I'd drop this if it's useful for anyone else.

https://stackoverflow.com/questions/62237262/flutter-web-detect-browser-tab-close-or-refresh

[michaeldwu]

Followup, I think I've found a semi-promising but incomplete solution to the browser back arrow creating weird results issue after refreshing leads to the Navigator stack getting cleared.

Essentially I set up the html.window.onBeforeUnload.listen((event) async {...} listener inside my build function to detect when the browser is refreshed, and then push the same navigation route inside like this:

html.window.onBeforeUnload.listen((event) async { Navigator.pushNamed(context, 'charities'); });

(The existing page that's being refreshed has a route name of '/charities').

What this does is it stacks a new navigation stack and disables the back button from being pressed so the funky browser back arrow action can't happen. I know it's not perfect but I think it's somewhat of a start. Please do lmk if anyone comes up with a better solution.

[j-vasil]

Please excuse this comment from a Flutter novice. I'll delete it if folks believe it is just noise but I'm writing it because I think it may point out an aspect of this issue that doesn't appear to be mentioned in previous comments.

I just encountered this and it appears that my problem is the Provider.of call in the route that is on top of the route stack at the time the user clicks reload no longer returns the proper data. After the restart caused by the reload, ChangeNotifierProvider is called from MyApp.build. The object being shared is initialized to defaults. During the normal login sequence, a different screen updates the data after the user logs in [Aside: my understanding is that this is an appropriate way to use ChangeNotifier but perhaps I'm wrong?].

Luckily--and somewhat to my surprise--the restart does not log the user out of FirebaseAuth so I should be able to update the shared object after the restart. I'm going to first try doing this in the default constructor used by ChangeNotifierProvider* and if that doesn't work, then will try doing it in the initState() functions for each of the screens (oops, routes) that can be activated after the user logs in.

* I didn't do it this way initially because "of course" there is no active user when the app starts up :-).

Update

Issue 3356 -- [firebase_auth] on web authStateChanges sink null value then correct authState on page reload may be related to this one.

[LiangHuangBC]

Any update? For my app, when browser's refresh button clicked, it should stay at same page, but when close button clicked, next time when reopen it, it should go to sign in page. html.window.onBeforeUnload.listen can not work on this case.

[amitsingh6391]

@LiangHuangBC could you share your code ?

[omatt]

Flutter treats page refresh on web as an app restart. What I did as a workaround is I keep track of my current page in SharedPreferences. On page refresh, app checks if there's a page stored in SharedPreferences. If yes, it then the stored page was pushed. Otherwise, the default page will be displayed. Keep tabs on the current page by calling setCurrentPage(currentPage); during navigation.

@override
void initState(){
    super.initState();
    ...
    getCurrentPage().then((currentPageState) {
       _navigatorKey.currentState!.pushReplacementNamed(currentPageState);
    }
}

/// Fetch stored page. Display default page if null.
Future<String> getCurrentPage() async {
    var pref = await SharedPreferences.getInstance();
    return pref.getString(SharedPrefKey.currentPage) ?? NavigatorHelper.home;
}

/// Store current [page] to restore into during page refresh on web
Future<void> setCurrentPage(String page) async {
    var pref = await SharedPreferences.getInstance();
    pref.setString(SharedPrefKey.currentPage, page);
}

If named routes was used, the Navigation Stack for the previous named routes should persist on page refresh.

root_domain/#/ -> root_domain/#/page (page refresh) -> Going back to root_domain/#/ is possible

[ckp78]

Any updates? As far as I am aware (please correct me if I'm wrong), there is nothing in the Navigator 2.0 API which allows developers to solve this problem, which seems quite a major one.

[Vaibhavsaharan]

Waiting for Navigator 3.0 to solve this  🐞.

[RitvikSardana]

Was anyone able to solve this?
I am facing the same issue

[CoderWeiLee]

same issue + 1

[hatemragab]

Any updates?

[dengzq]

Same issue. I think this should be the top issue for flutter web cause it's really a bad experience for h5 users.

[iamar1k92]

biggest issue

[armaniv11]

Same Issue + 1

[kleber-rr]

Same issue :(

[miguelchiarello]

Same issue here guys.

[adhnan-e]

Same Issue + 1

[chunhtai]

Can be solved by #65777 (comment)

[Zeeshan0201]

Same Issue + 1

[altafkhan8719]

same issue, any update?

[NkITaa]

Same Issue + 1

[iamtechmanish]

any update ?

[LimaCliqxer]

any update?

[prasant10050]

Facing same issue, any update?

[pranil-iottive]

any update ?

[VictorWork0209]

any update?

[Navaf-N]

any update?

[elio1fiore]

any update? +1

[mdebbar]

Folks, this is expected behavior on the web. When you refresh the page, the app starts from scratch with all state cleared.

Flutter has the concept of state restoration which can help here, but it's not implemented for the web (yet). Please follow along in the corresponding issue (and add your thumbs ups there).

State restoration for web: #65777

I'm closing this issue because there's no extra value to be provided here.

[github-actions]

This thread has been automatically locked since there has not been any recent activity after it was closed. If you are still experiencing a similar issue, please open a new bug, including the output of flutter doctor -v and a minimal reproduction of the issue.