Is it possible to force the hide of iOS' Safari toolbar in its latest version (iOS 15)?

Question

I would like a website to act more like an app: in fullscreen mode. I mean, to hide programmatically the iOS' Safari toolbar like we can do it manually since iOS 13 using the Hide Toolbar button.

In Android, we can force these kinds of settings in the web app manifest using the display setting. But this setting is ignored by iOS.

In the past, there were solutions like the minimal-ui setting but which is not working anymore. Now, one of the only tool that we seem to have is the theme-color to colorize the area on top of screen, but this is an incomplete solution for this problem.

So what's the current state for this problem in the latest iOS versions?

I'm not really looking into release an encapsulated website thought the app store. I'm also not looking to force the user to add the website to its home screen.

Certification

Answer 1

Have been looking for a solution to this as well. While everything I've read says it isn't possible to do programmatically, I do have a thought on a workaround solution:

1. When user first comes to your site, create a new 'vertical toggle' button that when user toggles it by swiping up, it basically scrolls the page down into Safari's minimal UI. The toggle could have text like 'Swipe to view'. Upon swiping, the button would disappear. At this point you could load in next web page of your site and it would start in the minimal UI.

2. All pages must have a header with position: fixed; so it stays in Safari's minimal UI when the body of the page is scrolled. Thinking this header could even be 1px height. Only caveat here is if user scrolled all the way to the top of the page, Safari would pop back out of minimal UI.

Would love to see someone hack this together!

Urinal