Ionic 5 navigation stack manipulation for saving and restoring app state

[ameen-linsys]

I have an app in Ionic 5 and angular with deep navigation stack with dozens of pages in stack in normal usage session. So during user expects to see the same ui or view they have left when they load it from recent list.
But when the user idling the phone in app itself or outside of the application, the OS destroys the state of the app and causes it to reinitialise.

Saving And Restoring Navigation Stack (And Other App State) Between Sessions

My app tends to have a deep navigation stack (dozens of pages on a normal browsing session) and users expect the app to restore completely each time they load it up. As noted elsewhere online the OS may kill your app when in the background and when it does the app will have to do a fresh start the next time the user loads it, losing the browsing history from the last session. As far as I can tell Ionic doesn’t have a built-in way to persist app state between sessions (at least it didn’t in v1, t…

Like the above situation I can’t manually manipulate the navigation stack to restore the state of the application in cases where the OS decides to destroy the app state for battery conservation, memory clean etc like procedures, which mainly causes issues in phones having low spec ram configuration.
This causes the app to reinitialise and the user will be seeing the home page instead of the page that user was on, which in user perspective is wrong

GitHub - randomPoison/image-browse at restore-states

as mentioned in the above link I tried to manually save all the pages into storage and retrieve in reinitialising cases.

So how does one manage such cases when using Ionic 5. Is there any builtin methods, or is this some kind of limitation of ionic framework.

PS: If any more info is needed please mention it.

[rapropos]

While you wait for better answers, “dozens of pages in stack” is very far away from my definition of “normal usage session” for any app, let alone a mobile one. People can only keep a handful of things in their short-term memory. If I were in your situation, I would take all the time and effort I was contemplating putting into a solution to manage freezing and thawing the navigation stack and instead invest it into restructuring the app with an eye to simplifying it so that this problem melts away.

[ameen-linsys]

Thanks for the reply and you are right about the majority of applications that do not have deep navigation stacks.
But our application is an organization management application so it does have 4 to 5 pages in the stack often. So considering it is there any solution I can implement to prevent the above-mentioned issues

[Daveshirman]

I would do the following:

1. Include an injectable StateService in each component page. I.e a singleton.

2. On page init / ionViewDidEnter - Push to a stack in your service, e.g. currentPages array.

3. Save this stack to some persistent storage, e.g sqlite.

4. On app refresh, check this storage, if items are there, reload your pages in the same order as if someone was tapping the buttons to navigate.

Tips:

• Don’t forget to clear this stack when you navigate back / to root.

• Up to you to define the object model you’re gonna store.

• Delay hiding your splash until your nav stack is reinitialised.

That’s the way I would do it.