Forum Academy Marketplace Showcase Pricing Features

Mobile PWA navigation issue on mobile

Hello guys, I have an issue with navigation on a mobile web app I’m designing. This is a mobile web app (PWA)

The issue shows up when you save the app on the iphones desktop and start it from there.

Everything works fine as long as the app is on the same page using navigation with states/hiding etc. As soon as there is a navigation link that takes the user to a new page, there is a browser navbar showing up on Iphone with a “done” button. No matter where you are in the, if you press this ‘Done’ button it just navigates you back to the starting app page, even if yo are in the middle of a checkout process for example.

Has anyone noticed this?

Here is a screenshot from the phone to clarify what I mean, it seems ti be safaris built in function.

The starting index page opens from the iphone desktop without any navigation bar:

When ‘Go to page2’ button is pressed it takes you to page_2 but the navbar and the done button shows up. When you press the done button it will always take you back to the first page.

Any solution to this?
I am aware that you should not use any navigation to other pages when trying to build a native app, but this is supposed to be a mobile web application.

Thanks

Anyone noticed this bug?

I have now noticed that this issue appears when “Hide Safari UI” is turned on, and you choose to place your app on the mobile desktop.

Whenever your do this and you have the app to navigate to another page the UI will appear again with a “DONE” button at the top of safari browser. When this button is pressed, the browser will take you back to the starting page weather you like it or not.

Any solution to this? I believe it is a serious issue that destroys the user experience.

Thanks

When you want to build a Mobile PWA app, you need to build everything on a single page and then show/hide elements on that page.

More here: What do you think...single page vs multi page?