How can I hide the address bar shown in the picture?
I’ve already checked “hide mobile ui”.
This thread is all about this Fullscreen android from homescreen
I messed around with it, changed the manifest to full-screen, changed the status bar to black, and it seems to look just fine now!
Hide address bar on mobile (make a manifest) tutorial:
I’m not sure if this is the best method but this is what I came up with.
<link rel='manifest' href='/manifest.json'>
<meta name="viewport" content="viewport-fit=cover, width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=yes">
(these 2 are for ios. The first one says that the app can go full-screen. The 2nd one is the color of the status bar at the top of the screen(mine is “black”, if you want white change it to “default”)
<meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-status-bar-style" content="black">
(this is for android phones. I think the first one is also for full-screen and 2nd one for color)
<meta name="mobile-web-app-capable" content="yes"> <meta name="theme-color" content="#000000">
This is what mine looks like.
Now to create the “manifest.json” file. Go back to PWAbuilder and look at the code that says " Add this code to your manifest.json file". Copy the code. To create a json file I went to https://jsoneditoronline.org/, pasted the code, clicked save, and saved to disk as “manifest.json”
Last Step! Go to bubble Settings>SEO/metatags>Hosting files in the root directory. Click upload to upload your “manifest.json” file(if you can’t upload it then close bubble and open it again, it’s buggy sometimes). Set the File name as “manifest.json”.
After that everything should work, you now have your own manifest file and a better mobile experience!
ps. I still don’t know how to get service workers to work though pwabuilder.com. If anyone knows a way to make a site offline please message me!
This topic was automatically closed after 70 days. New replies are no longer allowed.