In mobile Safari, website added to Home screen, shows gray bars on the top and bottom when navigating pages, how to make it full screen?

Question

I have a multi page website. I add it to home screen in iPhone using "add to home screen" button in Share menu.

When I open it using the icon in the home screen, the website shows full screen. But when I go to any sub-page with a different route, like example.com/page, I see gray bars at the top and bottom, showing the address, navigation back and forward, "Done" button, share button, open in safari button.

How can I make it display full screen all the time? Changing routing to use # is not an option. It worked at some point in the past, but I had to remove the app, and can't make it work again

Answer 1

I figured it out myself, it turns out that recently I removed manifest.json from the html file. Adding it back solved the problem! Also, I found this page helpful in figuring out how manifest works https://web.dev/add-manifest/