TWA Apps - How to hide the URL Bar (Browser Bar) and Display app as full screen

Intro

I have been making Google Play Store apps in the last 3 days with TWA using Bubblewrap

It took me 1 day to prepare the app for publishing and 2 days to figure out how to remove the URL Bar and show my app as full screen.

The Problem

The picture below is an image from Bubblewrap Repo's Issue.

The app is shown like it is opened from the browser.

However, if you want to remove them, there are few steps you have to take.

The solution

In a nutshell, you have to paste the following code to .well-known/assetlinks.json file of your PWA website.

[
  {
    "relation": [
      "delegate_permission/common.handle_all_urls"
    ],
    "target": {
      "namespace": "android_app",
      "package_name": "app.web.finalscalcu.twa",
      "sha256_cert_fingerprints": [
        "AA:E5:9C:AB:40:56:31:CD:2F:AF:98:FB:67:F0:0B:68:AC:F1:9A:2C:3A:77:0E:61:42:38:37:66:43:AB:55:4D",
        "39:77:6A:AE:F1:88:86:E9:81:EE:16:CE:05:ED:37:13:7B:61:F6:04:44:D5:AC:CB:0A:A8:79:08:0D:DD:27:B3"
      ]
    }
  },
  {
    "relation": [
      "check_validation"
    ],
    "target": {
      "namespace": "android_app",
      "package_name": "app.web.finalscalcu.twa"
    }
  }
]

You have to replace the array in sha256_cert_fingerprints with your own fingerprints

Getting the fingerprints, app - Google Play Console

If you are publishing to Google Play Store, you are probably using Google Play Console.

Steps

Go to Google Play Console and Select your app.
Select App Integrity

Go to App signing

Copy the fingerprints (2)

Paste them in your json file
Go to Dashboard

Check your app

Make sure the information given to you matches the one you put in your assetlinks.json

After uploading the JSON file, check whether you succeeded in making the URL bar disappear by going to Deep Links.

If it looks similar like the image below, you succeeded.

If not, click the button below and expand the fingerprints section to copy the code Google Play Store gives you