Why Address Bar Is Not Hidden – Android App with TWA

Ok, I created my Android App by using Trusted Web Activities (TWA). I tested my app on the emulator from Android Studio and it looked all good. The app worked fine in the full-screen mode. I published my first PWA app at Google Play and everything looked fine. When I downloaded the app after the release and opened with my phone, I realised that the address bar was still there.

Because I didn’t understand how TWA works well, I started stabbing in the dark to trouble shoot this problem, including writing various JavaScript functions to make the address bar disappear or trying various configurations in styles.xml. It took me a while to figure out. If you are in the same situation as I was, this post will help.

The reason why the address bar appears is the association between the Android app and the website is not configured correctly. TWA creates this association via digital asset links. This association goes two ways. Form website to app and from app to website. Once it is configured correctly, the address bar will disappear. With TWA, you never need to write hacky JavaScript to hide the address bar.

Technically speaking, this association is done by creating .well-known/assetlinks.json in the root of the site.

If the website is generated by Jekyll as in GitHub Page, you need to add .nojekyll file (without any content) in the root folder because Jekyll doesn’t allow the folder starting with special characters (period in this case). Alternatively, you can create _config.yml file in the root folder and add the line, include: [.well-known].

What was unclear to me was where to get sha256_cert_fingerprints value. So, I initially used App Link Assistance (under Tools option) in Android Studio to generate digital asset links file and dropped this file in the .well-known folder. This was not the correct thing to do because I chose the App Signing by Google Play option.

When App Signing by Google Play is enabled (which is the recommended option), Google will give you the sha256 certificate fingerprints which you can retrieve from the store. Go to Release management –> App signing in the right hand tool bar. Then, you will see the section App signing certificate. You have to get the SHA-256 cert fingerprint from there.

Your assetlinks.json should look like this:

Once you have the correct sha256, the address bar in your app should disappear. For further information on creating asset link file can be found here.

Front-End
TypeScript: type aliases to check type equality

This post is to analyse how the type equality check by using type aliases proposed by Matt Pocock in his twitter post. These type aliases allow us to elegantly express type equality checks in unit tests. All we need to do is to pass the output and expected types in …

Front-End
Fixing it.only type error in Jest

If you are getting a type error with it.only in Jest, it could be due to incorrect TypeScript typings or incompatible versions of Jest and TypeScript. To resolve this issue, you can try the following steps: Make sure you have the latest versions of Jest and its TypeScript typings installed …

Front-End
yup conditional validation example

Here’s an example of a Yup validation logic where the first input field is optional but, if filled, it must contain only alphabetic characters, and the second input field is required: import * as Yup from “yup”; const validationSchema = Yup.object().shape({ firstField: Yup.string().matches(/^[A-Za-z]*$/, { message: “First field must contain only …