TWA Apps - How to hide the URL Bar (Browser Bar) and Display app as full screen
Published: 2023-03-01 06:24:13

## Intro
I have been making Google Play Store apps in the last 3 days with TWA using [Bubblewrap](https://github.com/GoogleChromeLabs/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](https://github.com/GoogleChromeLabs/bubblewrap/issues/740).

![From GitHub Issues](https://user-images.githubusercontent.com/4217742/208248187-5178f233-1fae-4a93-993a-05e81dab55a6.png)

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.

```json
[
  {
    "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

![App Integrity](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wjrxivipqkp299x1dkvl.png)

Go to App signing

![App signing](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/baur7zqsevydfq6qsakc.png)

Copy the fingerprints (2)

![Fingerprint 1](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/c1v6fosryohun8283don.png)
![Fingerprint 2](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qq38zj22bqpuc89em7ye.png)

Paste them in your json file
Go to Dashboard

![Dashboard](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gw4nrkq02u8vet865tie.png)

Check your app

![App](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xsgn2pdbesjiboi6wxhp.png)

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.

![Deep Links](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/08yw2yet9qhp7uwoblc0.png)

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

![Deep Links Check](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/irr6ljkqqifmvwxkhvvj.png)

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

![Final](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/d802glgdp1rzzcauzefp.png)