Hide the address bar in the browser when on mobile or specific pages on desktop (FullScreen Experience)

Hi. If you’re asking how to “install” a web app on the user’s home screen and have it run as a real app without the browser components (address bar, navigation arrows, bookmark buttons, etc.), it’s really quite simple:

First, in the Bubble editor, go to the Settings tab > General tab > scroll down to iOS Appearance > make sure Hide Safari UI Component and Prevent the User From Zooming are checked. Add an image under Icon for Home Screen.

Now, ask your iOS user to open the app in Safari. You’ll still see the Safari components. That’s ok. Have your user press the Share button at the bottom of the screen (the box with an arrow pointing up). They should be given the option to Add to Home Screen. Press that option. You should get a message with the option to rename the shortcut. Rename it if you want. Confirm.

Safari will close and they should get a new app icon in the home screen with the picture you uploaded in the Bubble editor earlier. When you press on that icon, it should open your app with NO Safari UI components. It should look and feel very close to a real app! (The process for Android is very similar. Make sure your user opens the app with CHROME, and look for an option to Create Shortcut, or something similar to that.)

If you’re planning to do this, keep in mind that you should design your app accordingly. This means adding Back and Forward buttons, menus, etc., since the default browser navigation buttons will no longer be available to your user, and you don’t want to leave them stuck in a dead end.

11 Likes