How I went on converting clearTax Invest app from Webview to TWA

Came to clearTax in may, 2019 as a frontend intern, carrying 3 years experience of competitive programming and some exposure to machine learning. Frontend development was kind of new for me. Learned a lot in the first 1.5 months working in the frontend, then Nilesh approached with an idea of shifting to android development as clearTax invest app was requiring some work. And I was super excited to start with android development, I was going to do this for the first time though.

Intro to Webview and TWA

The Web on android is nothing new, using the web has been an important part of android developer toolbox, and this has been in the form of Webview(yeah, so far). Some major companies like twitter, linkedin instagram, etc they are using web technologies as an important part of their android apps. But now, is the Webview only option for dealing web on android. Ahh not really. Dig deeper you’ll start thinking, is the Webview ideal for my product needs or there are some other methods to get all ticked with ease and having better integration with browser and platform.

Now here comes the deal, are you looking for mixed web + native experience or you are good with discarding native components. Go with Webview for the former case. For the later one, hands down, go for TWA(trusted web activity, introduced in April 2019). Now, what exactly this fancy term is -> Trusted Web Activity (TWA) displays a full-screen Chrome browser inside of an Android app with no browser UI. Although Android apps routinely include web content using a Chrome Custom Tab (CCT) or WebView, a TWA offers unique advantages when you need Chrome’s performance and features in your app in full-screen mode. Hard to get? Don't worry it will be more clear as we go ahead. TWA is a web activity, that means UI is drawn and the work is done using web code. Now what does that term trusted means, it says that using TWA requires a cryptographic verification that the app owner is the content owner using digital asset link. Well, if you forget doing this part, you won't be able to go full screen and that will look pretty annoying.

TWA = Chrome custom tabs + full-screen mode feature.

Old clearTax Invest app

Initially, clearTax invest app was using Webview to wrap web contents.

Problems faced using webview

Webview is not as fast as chrome, its basically a rendering engine. So if we need anything that isn't included into it you have got quite a lot of work to do. You basically need to build an entire browser around it if you want more sophisticated behavior. Now, what if some engineers with several cups of coffee create Webview with some useful functionalities(like button click events), is it good to go with Webviews now. Umm, not really. Some bigger drawbacks are yet to come. Webviews are sandboxed completely from the user. They don't share the same cookie store or storage, they don't provide access to user saved password, form auto-fills and some other useful features(like one-tap login) found missing from Webviews.

Webview → Hey I am the best for clearTax invest android app.

TWA → Ohh really Webview, you sure about that?

Switching to Trusted Web Activity

Creating a Webview with more sophisticated behavior is really a hard problem. And engineers do appreciate solving hard problems, but solving hard problems that other people have already solved is probably not the most exciting that you could be doing with your time. As TWA is just chrome without any UI, that means the data is being shared between chrome and TWA. User’s history in browser and app are now unified under the same tracking ID. TWA shares storage with the chrome browser, including cookies, so login becomes much easier. Google one-tap login finally becomes “one-tap” in the android app.

Implementation

I looked at the code of Webview in the main activity of the android project, oh man how complex and bulky code. That made me not to take much time in deleting all previous activities present in the project. TWA doesn't require you to create an activity explicitly rather it uses an Activity provided by support library, you only need to import that library.

• Adding support library → As support library for TWA is a part of jitpack, add it in the project level build.gradle.

TWA uses java 8 features, add a compile option section at the bottom of the android section of module level build.gradle.

• Adding custom tabs dependency → Add it to the dependency section of module level build.gradle.

• Add an activity for TWA in the application section of Android.manifest.

When running the project at this stage, the URL Bar from Custom Tabs will still show on the top of the screen.

• Association of digital asset links →Now the time has arrived for setting Digital AssetLinks to verify relationship between the website and the app, and remove the URL bar. Never knew this section is going to be a big headache. Literally brought me into tears. Digital asset link association must be established in both ways, linking from the app to the website and from the website to the app. Association from app to website was pretty easy just 5–10 mins of work. Association from website to app required some sophisticated work like obtaining SHA-256 key, generating an AssetLink JSON file and getting it uploaded on https://cleartax.in/.well-known/assetlinks.json . After this is done, according to official docs of google developers, we must be able to access full screen mode(no URL bar) in chrome and kudos we are done. I tried the app on the emulator and tested debug-apk, it was working fine(URL bar was gone and the app was running on chrome), I got superexcited yeahh things are done. But aa aa wait, I generated release-apk and URL bar was still visible. It gave me goosebumps, totally blank how to get it debugged. I discussed it with Nilesh and we both were clueless what could be the root cause of release-apk misbehaving. Searched several blogs on github, stackoverflow, etc, several answers were there but nothing seem to help me out.

I was like this at that time.

Finally, I found a blog which asked to check once if the asset link is working fine on the app.

Yes, staus was “ask”, means the verification was failing. Have a look to the image below.

Yes, the status was “ask”, which means verification failed.

Now, I had a clue why URL bar was not removed from the release-apk, what next I had to do was to get this verification issue solved. Again I started hunting on stackoverflow for how to test the verification of asset link.

I went on adding this ‘ android:autoVerify=”true” ‘ into intent of TWA activity, but found that it was already present(got automatically added while setting digital asset link). But there was a flaw.

This yellow highlight over autoVerify means it is an unused section of code.

I brought the cursor over the highlighted autoVerify part and got to know that it is used only in API level 23(I was using API level 16,which was mentioned in the official docs of TWA by google developers). I changed API level to 23, rebuild the project, generated release-apk, then tested the status of verification of asset link.

Status was “always”

Status being “always” means, digital asset link has been successfully set up. I wasted no time in installing the release-apk on my android device, opened the app, I kept my eyes closed till the app loaded and guess what URL bar was gone. Can't explain how relaxed and cheerful I felt that time. Instantly I texted Nilesh that we are done😎. Forwarded the release-apk on slack for employees to test it, 2–3 quick fixes being pointed out.

I was this happy😂

And finally, after some more testing from our end, Nilesh released the app in play store. Actually, as a beginner, the confidence gained through this will surely help me build a good base for android development. Thanks to Nilesh for giving me this opportunity.

PS → Dont lose patience while hunting on stackoverflow. Some savior will definitely be there for you.