Ionic 3: Web reload page in browser with F5

How can I avoid app reset when F5 pressed in web browser?

Hi @maxkoch :wave:

This happens when your app doesn’t have a router, so the URL doesn’t change when navigating to a new page.

In Ionic 3 you can use the IonicPage() decorator to lazy load pages, giving them a path that would be reflected in the URL. But I strongly recommend you to upgrade to Ionic 4 since it uses the Angular Router, which does all this automatically, and it’s more reliable.

Best,
Rodrigo

1 Like

Hi @FdezRomero,

I use already IonicPage(), but after F5 all page properties such NavParams, AuthToken are reset.

Best,
Max

Right, in Ionic 3 nav params are not persisted in the URL, so when you refresh the state is lost. The best way to fix this is to avoid using nav params and have some kind of ID in the route, so the page can fetch the information that it needs when accessed directly (deeplinks) or refreshed if the nav params aren’t present.

In Ionic 4 with Angular Router, the data passed along for navigation is persisted in the URL for you, so deeplinks and reloading works out of the box.

Regarding the auth token, if you want it to persist across sessions you can store it in IndexedDB or local storage. I recommend using @ionic/storage because is a very simple key/value store that chooses the best storage system depending on the platform (SQLite, IndexedDB, LocalStorage, SessionStorage, etc).

1 Like

Thanks a lot, I have menu for page navigation in app.component. After F5 menu for page navigation is gone.Any idea?

Do you have an isolated code sample where this is happening that we can look at?