For a couple of years I am maintaining an Ionic/Angular app ‘Opwekkingsliederen’. This app is a digital textbook for populair christian songs in the Netherlands. It has various supporting features like chords, metronome, youtube player and links to spotify.
The app is now using Ionic 6 and Angular 13 with Cordova.
The app starts with a page showing the titles of all songs with a searchbar to search for specific songs. When tapping on a song the app navigates to the songpage.
Recently I add an ‘extended search’ page. Here users can search for songs based on theme, key or biblebook. This page can be accessed via the hamburger menu from both the start page as from the song page. This page also shows results from where tapping on a song brings you to the song page.
There my confusing began.
From 1st page to song page is done using navigateForward.
From songpage to extended search is also done with navigateForward
I tried using navigateforward also when tapping on a song from the extended searchpage.
So my viewstack would be:
- Start page (list of songs)
- Song page
- Extended search page
- Song page
While this worked ok on the browser, on Android (Samsung S20) the apps seemed to run out of memory. Pages became unresponsive and were only partly displayed. I believe this is caused because all the pages are kept in the DOM.
So I changed the transition from extended search page to song page to a NavigateBackwards. These solves the memory problem, but breaks navigation.
So I looked at a vanilla angular website I also developed (https://kijknaar.tv). This is also in Angular13. Looking at the router-outlet I noticed that there only one page is kept in de Dom, even with an active reuse policy.
So this confuses me. Is my Ionic app showing normal behaviour? Of should my app behave as the vanilla Angular website does? Keeping only one active page in the Dom?
Henk
3 posts - 2 participants