Keep my Next JS web app in full screen mode in iOS

Job ID: 37271948

Budget: £20 – £250 GBP

I have a next js app that I want to run in full screen mode (via add to home screen). I've added the

<meta name="apple-mobile-web-app-capable" content="yes" />

line, and the first page works fine. However, clicking any link (using both the router and nextjs Link) in the app makes the browser icons display. I want the app to remain in full screen mode properly. See the attached video for the problem.

I have tried many fixes, including adding manifest and various other meta tags, but no joy.

Here's a description of the problem on stackoverflow (solution didn't work for me) https://stackoverflow.com/questions/58944612/is-there-a-way-to-prevent-the-toolbar-from-appearing-on-route-changes-ios-ipad

and here's a video of the problem: https://streamable.com/6vpymj

If you can solve this please let me know.

Rob
Related categories: JavaScript Mobile App Development iPhone iPad