Is there a way to hide the address bar to give the better mobile experience so that when a user launches their mobile version app from a home screen icon, it looks more like a mobile app and they don’t have to keep getting distracted by the address bar?
I was wondering if that is a plug-in or if anyone knows of a way to add this? Maybe it’s an html snippet I can add to a page?
Or maybe it’s a javascript plug-in similar to something like this?
var winFeature =
‘location=no,toolbar=no,menubar=no,scrollbars=yes,resizable=yes’;
window.open(‘Result.html’,‘null’,winFeature);
I found this link that talked about a few ways on how to do this for web, but how would it apply within this platform? I’m not too familiar with developing my own plug-ins yet. Maybe one exists already!
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.
@emasl Wonderful! Thank you for pointing that out along with the other details. I have designed my app as a single page native app. This is the experience I was looking for, I forgot those settings where there.
I have actually designed the app with an iPhone 6 size in mind. One problem I’m seeing is that if I turn zoom off, my screen is zoomed in since I am testing on a 6SE, smaller screen size than 6. Is there a refresh or screen detection logic that will automatically zoom depending on the users device size? That would be perfect. I’ll look around for that.
@emasl , This is perfect for the mobile experience.
What if I wanted to have my desktop be full-screen? That was actually my main intention and why I added the html snippet. Maybe I can have a button on my desktop app that would expand and make hide the address bar to make my view look like a single page app.
The purpose behind it is that I am creating a page that will run on a web browser but on a TV screen that will act as a real-time display in an establishment. I want the app to be the whole display and not have it look like it’s just running on a website browser. Is that possible? Or maybe it’s a setting on the browser itself. I’ll do some more research on this one.
I run my app on Google Chrome on a Mac. When I open my app on Chrome, I go to View on the browser options at the top > uncheck Always Show Toolbar in Full Screen > then Enter Full Screen.
My app then runs completely full screen, with no browser components visible unless I move the cursor to the very top edge of the screen. It looks and feels like a real program running outside of a browser.
Make good use of the Responsive tab in the Bubble editor so that things move around the way you want them to between smaller and bigger mobile screens. Make sure that your page is NOT fixed-width so that it fills up the entire screen on a bigger mobile device, and the whole thing shrinks on smaller screens. This should do what you’re looking for.
Alternative:
Sometimes you want the mobile and desktop versions of your page to look radically different.
Say that your original page is called page_mobile. Duplicate this page and rename the clone page_desktop. Redesign page_desktop so that it looks just the way you want it to look on a desktop. Then, on page_desktop, bring up the inspector in the Bubble editor, and look for this option:
From the dropdown, select page_mobile. Now, whenever your user opens page_desktop in your app from mobile, it will automatically redirect them to page_mobile. When they open the app on desktop, it will direct them to the desktop version.
Thank you, thank you, thank you @emasl! You have been great with these explanations!
I will try that with the desktop page, I knew it had to be simple.
And for the mobile, that’s exactly what I’m doing. A single page for the native app experience on mobile devices and a responsive web app for desktop. I love how this is setup!
For the native single page app, I have made sure that it’s not a fixed width, but when I open it up on my small phone, I always have to zoom out. I’ll double check everything again too.
For the single page native app, is there a way to make the header stick to the top as well? I can do that by making a floating group and set it to top for a responsive site. But when I try that on my single page app, it seems to scroll up and the header group doesn’t stick to the top. Is there a way around that or am I missing something there too?
Not sure if this is what you are after but if you would like to be compatible with the smaller iPhone screens (iPhone 6SE, iPhone 5S etc.) don’t forget to design for 320px width and not the 375px width that Bubble shows in responsive tab.
here is a full screen apk i did using bubble, they work really well.
