Help please - F7 web app (IOS)

I am putting together a web app, using F7 and it works well on desktop and Android but when I add the page to the iPhone home screen I encounter an issue that I am tearing my hair out with.

I am aware that Apple’s support for PWA is ‘limited’ but I have tried to design the page as a SPA with routes for dynamic content.

What I hoped would happen is that the page would only change by way of the routes showing/hiding so the opening in browser issue when clicking on links would be avoided. What I am finding, though, is that I get an annoying bar at the top of each page:

When clicking the ‘done’ button the user is taken back to the login page.

My structure is as follows:

  • Main index page with routes for the user action buttons and a route for login/register
  • Server Connect kicks in on load and checks if the user is logged in. If not, a browser element on the index page is used to ‘go to’ the login route.
  • If login is successful, the users details are retrieved and the index page (select lists, branding etc.) is updated.

Weirdly the login page appears without the ‘Done’ bar at the top.

I have a feeling that using the browser component to navigate is causing the problem but I am really stuck as to what to do instead. It seems as though, after the first navigation, it is treated as a Master/Detail page.

Any help that the wonderful Wappler Community can provide would be greatly appreciated.