Hide address bar in Progressive Web Applications

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.


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 https://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, and paste that into PWABuilder.

The address bar should be gone.


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.


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'/>

Tags:

Fullscreen

Progressive Web Apps

Manifest.Json

Recent Posts