Hide address bar in Progressive Web Applications

Question

I'm developing a PWA with VueJS. I started testing my application in real devices (Add to home screen). My application is intended to be 100% height, as it displays a map as you can see:

It seems that sometimes, transitions that appear from outside the viewport height, makes the address bar appear at the top of the page. For a PWA, I think this behaviour makes the app feel less native, and also, breaks my design (The button at bottom center and the whole map container are not visible unless the user close manually the address bar).

I tried some things I've seen in other questions:

• window.scrollTo(0, 1);
• <meta name="mobile-web-app-capable" content="yes">
• from here.

I don't care if the app does not hide the address bar when visited in a web browser. But at least I want the address bar hidden when the app is launched as a "native" app (added to home screen).

I also tried changing display property in the manifest.json from standalone to fullscreen with no luck.

I know I could change the css for my button and map in order to make them "visible" when the address bar is visible, but as I said, this makes feel the app less native IMO.

Is there a solution for hidding permanently the address bar? Is it possible or it is something I have to consider in my design?

Billboard

I've never seen that kind of address bar from a PWA added to Home screen from browser. It looks like Customs tabs. Are you by chance embedding your PWA in a Android native app or is it a simple PWA added using Chrome? developers.google.com/web/updates/2017/10/using-twa – Amadoamador

It's a PWA added to the home screen using Chrome. I've used Vuejs PWA template to build muy app. github.com/vuejs-templates/pwa and the app is served over HTTPS. – Billboard

Are you using a custom port on your URL? – Conoscenti

Hi! I'm not using a custom port yo serve my app. But if it has something to do, i'm using a custom start_url in my manifest.json other than index.html – Billboard

It does make a difference for the Standalone window & Chrome. There is a known issue with ports on URLs. Once people switch to the standard, The standalone window opens without the address bar. – Conoscenti

But my URL looks like https://example.com/appName. There is not custom port. Just, the start_url in manifest looks like /appName/index.html. It seems that is something else. – Billboard

Yes, probably not the same as the issue with the custom port if you are not using them anywhere in your app. – Conoscenti

Answer 1

PWA app shows the address bar when you try to navigate the pages outside of scope. For example if you have set your scope in manifest.json file as scope: "/my-pwa/" then all the page url should have prefix like this: /my-pwa/page.html.

Holothurian

Have you tested It? It makes sense. I'll try to test your solution and come back here to accept your answer. – Billboard

Yes, these days I am working on PWA and experienced the same behavior. – Holothurian

@Holothurian : I have set "start_url": "/mobile_app/index.html", "scope" : "besproveninfo.com" I have tried many options but no luck. Can you please suggest the correction in scope and start_url statement – Erb

@Erb since your scope is "besproveninfo.com" therefore your url should start with "/besproveninfo.com". – Holothurian

Answer 2

On Android you need to implement a TWA (Trusted Web Activities) to enable the full-screen mode. So I recommend you to use the PWABuilder to do that. The PWABuilder already returns you a assigned APK file and a assetlink.json that you will need upload to your server into a .well-known folder on the root of your host: https://www.your-domain/.well-known/assetlink.json> That way the Android display your PWA on full screen mode.

Cypress

Answer 3

TL;DR: See the last paragraph for the solution that ultimately solved it for me.

I have had the navbar on a PWA remain, even though I tried everything, so I thought I would share everything I did, what worked, and how I solved it finally, so you won't have to search for solutions online for hours like I had to.

Extending on @alvaropaco's answer, in the .zip file you get from PWABuilder, you must place the assetlink.json file in a folder named .well-known, directly under your domain. It should be accessible at https://www.your-domain.com/.well-known/assetlink.json, or the navbar will not become hidden. No exceptions. Read the README.html that came with your .apk:

Next steps for getting your PWA into the Google Play Store You've successfully generated a Google Play Store app package (.apk file)

for your PWA. 😎

Your next steps:

1. Deploy assetlinks.json to your server.
2. Test your package on an Android device or Android emulator.
3. Upload your apk file to the Google Play Store.

Each step is explained below.

1. Deploy assetlinks.json

Your zip file contains assetlinks.json. This is a digital asset links file that proves you own your PWA's domain. Upload this file to your server at https://example.com/.well-known/assetlinks.json. (Replace example.com with your PWA's URL.)

💁‍♂️ Heads up:

Digital asset links are required for your PWA to load without the browser address bar. If you're seeing a browser address bar in your app on Android, your assetlinks.json file is missing, inaccessible, or incorrect. See our asset links helper to fix this.

---

If you are not building you app with PWABuilder; maybe using bubblewrap instead, or something else, here are some sources to help you get started building an assetlinks.json file:

• Trusted Web Activities Quick Start Guide
• Removing the Browser Address Bar

---

Sidenote:

When building my app with bubblewrap, I kept getting this annoying error that wouldn't let me continue because there was a problem installing Android SDK tools:

C:\Users\Me\Desktop\app>bubblewrap build
,-----.        ,--.  ,--.  ,--.
|  |) /_,--.,--|  |-.|  |-.|  |,---.,--.   ,--,--.--.,--,--.,---.
|  .-.  |  ||  | .-. | .-. |  | .-. |  |.'.|  |  .--' ,-.  | .-. |
|  '--' '  ''  | `-' | `-' |  \   --|   .'.   |  |  \ '-'  | '-' '
`------' `----' `---' `---'`--'`----'--'   '--`--'   `--`--|  |-'
                                                           `--'
Installing Android Build Tools. Please, read and accept the license agreement
build Installing Build Tools
Error: Could not find or load main class com.android.sdklib.tool.sdkmanager.SdkManagerCli


cli ERROR undefined

I posted a separate stack overflow answer related to this problem.

---

Verify assetlinks.json

To verify that assetlinks.json is correctly recognized on an Android device, run these steps: (you need to install adb and grep, first though):

Debugging Digital Asset Links

After you generated your signed APK. it can be installed into a test device, using adb:

adb install app-release.apk

If the verification step fails (if the address bar is still visible) it is possible to check for error messages using the Android Debug Bridge, from your OS’s terminal and with the test device connected.

adb logcat | grep -e OriginVerifier -e digital_asset_links

Now, make sure you app is closed completely (force stop it), and re-open it.

If it is failing you'll see Statement failure matching fingerprint. Verification failed. message. Therefore is important to review AndroidManifest.xml and build.gradle files and check if the configurations are matching with the assetlinks.json.

Otherwise Verification succeeded. message should appear.

source

What if assetlinks.json is verified but the navbar still persists?

I was having this problem, but I finally solved it with the help of this GitHub issues post. It turned out that I had the host parameter in twa-manifest.json (not manifest.json because I built it with bubblewrap - it has more flexibility than PWABuilder, though it only works for Android) set to https://example.com instead of www.example.com (note the www) where my site is actually hosted. So if you build it with PWABuilder, first go to your site in the browser, click on the address bar, copy the entire URL (Example: www.example.com and not https://www.example.com or https://example.com), and paste that into PWABuilder.

The address bar should be gone.

Midlands

Answer 4

If I understand what you would like, I've found how to have proper display: fullscreen on android and iOS, this without any browser UI such as address bar. As said @aareeph set correctly the scope, then add this to header :

<meta content='yes' name='apple-mobile-web-app-capable'/>
<meta content='yes' name='mobile-web-app-capable'/>

Kilbride

Answer 5

My experiences on fixing the address bar display are slightly different. I used the the steps here to solve.

First: I checked the assetlinks 'sha256_cert_fingerprints' property and compared to the Play Store > App Signing > App signing key certificate > SHA-256 certificate fingerprint property. They were different, so copied the Play Store value to the assetlinks.

This didn't work immediately, but I did try on another android tablet that I hadn't used before, and it worked perfect (no address bar).

I then noticed this section at the bottom of that page:

Clearing your site's cache: If you had previously installed your PWA on an Android device, your assetlinks.json file might be cached. Uninstall isn't enough; you may have to manually clear the browser's cache for your site before Chrome detects an updated assetlinks.json file.

I went to Chrome, cleared the history, and voila, works perfect on that device now.

Setback

Answer 6

To open the PWA like a native app on Android, Chrome, etc. (without the url bar)

• Ensure that the start_url points to the remote-entry-point of the app for ex. https://my-app.netlify.app
• Ensure that a .well-known/assetlinks.json file exists - for ex. we should be able to access https://my-app.netlify.app/.well-known/assetlinks.json. You can generate one and add it with the help of a PWA Builder tool.

Tishtisha