IONIC3 Framework History Problem


#1

Hi All,

I’ve been building an Angular4/Ionic3 application but I’ve run into a bit of a stumbling block related to browser history and Ionic’s history related quirks.

First, a little background info. My application uses navCtrl.SetRoot() for all of its page transitions because .pop() and .push() didn’t play well with refreshing the browser page. In the process of development I have made note of a quirk with Ionic navigation: If you go from Page1 to Page2 then try to go Page1 again (using .SetRoot(“Page1”)) Ionic will look at its history and notice that you were at Page1 just before Page2 so it will decide go backwards in the browser history instead of making a new instance of Page1 in the history. At the end of the .SetRoot(“Page1”) operation, the history will look like ‘->Page1<- Page2’ rather than ‘Page1 Page2 ->Page1<-’.

Now, this isn’t normally a problem, but I’ve noticed that Ionic’s Internally stored history is divorced from the browser history. So, if Ionic’s history is ever different from the browser’s history problems can start happening. For example, if you refresh the page then the browser history stays the same, but Ionic’s history becomes a list containing only the current page in it.

E.X.

  1. If we go from Page1 to Page2 to Page3 then refresh
    Browser History: 'Page1 Page2 ->Page3<-'
    Ionic History: '->Page3<-'

  2. Now we go to Page 2 by pressing the browser back button
    Browser History: 'Page1 ->Page2<- Page3’
    Ionic History: ‘Page3 ->Page2<-’ (Because it didn’t find an instance of Page2 before Page3 in its history, it makes a new instance and puts it at the top of the stack instead)

  3. Now we SetRoot(“Page3”). Because Ionic History thinks it needs to go back to get to Page3 it will force the browser History to go back as well to try to keep things matched up.
    Browser History: '->Page1<- Page2 Page3’
    Ionic History: '->Page3<- Page2’

  4. Result: Because the url changed due to the browser History now being on Page1, an extra unwanted transition will trigger that will take us to Page1 when we wanted to go too Page3.

Just to make it absolutely clear: The Ionic History I am talking about is something I believe exists due to the behavior of my application. I have never actually seen where it is stored. In addition, I know for sure that the Ionic History is different from the NavCtrl Navigation Stack because my application only uses .SetRoot(), so the Navigation Stack is only ever an array of length 1 containing only the current Page.

With all of that said, here is my question:

Is there a way to access and manipulate the Ionic Framework’s internally stored history? At the very least is there a way to wipe it?

Thanks.