Hide address bar?

[noviceBubbleUser2]

How can I hide the address bar shown in the picture?

I’ve already checked “hide mobile ui”.

[shpak.serhiy]

This thread is all about this Fullscreen android from homescreen

[noviceBubbleUser2]

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!

[noviceBubbleUser2]

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.

1. Head to pwabuilder.com, enter your site name and click the Start button
   
   
2. This screen will show up and your manifest will probably say 0/40. Click “View Manifest”.
   
   
3. Under “Info”, put all your desired information. If you want a page other than “index” to be the first page, change the “start url”, otherwise, don’t change it.
   
   
4. Under “images”, I didn’t change anything. PWAbuilder automatically found the images I put into bubble under Settings>General>IOS Appearance
   
   
   
   
   
5. Under “Settings”, this is what I put. For display, you can change it to “stand-alone”(which is the most used for pwa apps) but “full-screen” works for me.
   
   
6. Now look at the code to the top right where it says “Add this link to your start page”. Copy that code and put it into bubble under Setings>SEO/metatags>Script/metatags in header.(this code will link bubble to your manifest)

<link rel='manifest' href='/manifest.json'>

7. (optional step) along with the manifest link, you can also add these lines.
   (this disables random zooming when clicking an input, change user-scalable to “no” is you don’t want them to be able to pinch and zoom etc.)

<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.

8. 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”
   

   

9. 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!