Manipulating history states and back button after a refresh

ionic-v1
1

I am wondering if there is an easy way to manipulate the history state if the app is loaded on a page other than the initial view (“home screen”).

For example if a user is on the settings screen and for some reason refreshes the page I would like a back button to be visible that returns the user to the default screen.

Another user has a thread with no replies asking a similar question here: Back button behaviour like "Home" when there is no history

2 Likes
2

I would also like to know this. I’m using this as both an android app and a web page for mobile. My use case is:

  1. User clicks something on a view that takes them to another state and shows a back button
  2. if the user refreshes the page here then the back button no longer shows
  3. then if they use the browser back button they end up at the original view but now there’s a back button for this root view

Is there a way to set the history and/or visibility of the back button on page load?

2 Likes
3

I’m going to dig into this soon since I haven’t received an answer. I’ll let you know what solution I am able to come up with.

1 Like
4

I’ve created a feature request on Github, if you could chime in over there it might encourage implementation

5

Did you come up with any solution? I’m encountering the same exact problem.

1 Like
6

Here’s something that worked for us: Instead of trying to manipulate or initialize the history, we do a super-quick jump between states to ensure that the ‘back’ state is always available and always the page we want. The ‘jump’ does not seem to be visible on any device (that I’ve tested, so far). I don’t know if this solution will work generally, but it fit my app’s needs.

The general idea:
In the state’s onEnter, we examine the history stack – and if the relevant history item there isn’t the page we want for our back button, we jump (without animation) to that page and then immediately return to the original page.

Edit: Apparently this does not work so well on iOS: the ion-nav-back-button is present, but it doesn’t appear unless you tap the ion-nav-bar.

$stateProvider.state('myHomeState', {
  /* url, views, data, etc. */
  onEnter: ['$state', '$ionicViewService', function($state, $ionicViewService) {
    var viewHistory = $ionicViewService._getHistory();
    var lastStateInHistory, disableAnimation;

    if (viewHistory.cursor === -1) {
      // Simple case: we're at the end of the history stack (or else there is no history stack)
      lastStateInHistory = _.last(viewHistory.stack);
      disableAnimation = true;

    } else if (viewHistory.cursor < viewHistory.stack.length) {
      // Valid cursor: this is just like the above case, except we're in the middle of the
      // history stack instead of at the end
      lastStateInHistory = viewHistory.stack[viewHistory.cursor];
      disableAnimation = true;

    } else {
      // Invalid cursor: this can happen after a navClear or disableBack. We want to treat it
      // just like the first simple case, except if we suppress the animation here then we won't
      // see an animation if we subsequently leave and then come back to this page.
      lastStateInHistory = _.last(viewHistory.stack);
      disableAnimation = false;
    }

    if (!lastStateInHistory || lastStateInHistory.stateId !== 'myBackState') {
      // Our history is missing or wrong: let's transition between states to fix it.
      // (We don't want the end user to see this transition, though, so suppress its animation)
      $ionicViewService.nextViewOptions({
        disableAnimate: true
      });
      $state.go('myBackState').then(function() {
        // We *usually* want to suppress this second animation, unless it's the "invalid cursor"
        // case above.
        if (disableAnimation) {
          $ionicViewService.nextViewOptions({
            disableAnimate: true
          });
        }
        $state.go('myHomeState');
      });
    }
  }]
});
2 Likes