All Articles

TWA - Love At First Sight (2/3)

What is TWA? It’s limitations and advantages? Bugs and upcoming solutions.

What is TWA?

A TWA or Trusted Web Activity launched February 5th, 2019 is way to run a Web App in full screen mode in Android with no URL bar inside a chrome shell but as a native App. You may confuse it with a PWA but you can’t publish a PWA on the Play Store. So in a way PWA can be called the ancestor of TWA, furthermore a web App must be PWA before it can be converted to a TWA.

The Trusted in TWA refers to digital asset linking of the app with the web app, which basically means that TWA can only come from the developer which built the website (remember this step was not required in PWA).

Since TWA runs the Chrome browser underneath it and has access to all of the chrome APIs such as web push notifications, background sync, Chrome form-autofill, Media Source Extensions (MSE) and the Sharing API. Since it uses Chrome for most of its functionalities, the app take up very little space on the host devices (currently our app is 1 MB and it won’t change much in future either since we can download required assets on the runtime).

In short, ship your PWA to Play Store and show-off that you have an Android App now. 😎

We will let the makers i.e. Google define and brief what TWA is?

It wasn’t easy getting this thing working initially as there was not much resources and documentation, so we tweeted to Paul_Kinlan (Lead to Chrome DevRel) to give us some directions on how to do differentiate the analytics traffic. Here’s a summary.

Advantages

  • No more Cordova or Ionic or even React Native
  • Lightweight ~ 1 MB
  • Reuse the Web App code
  • Short turnaround time
  • Excellent developer experience
  • No more updates - self updating since it’s a web app and latest changes are pulled on the fly

More to come (from dev team, along with a pinch of salt)

  • Communication protocol with Android
  • Integrated and converging experience for PWA and TWA
  • Signed Exchange packets for assets to be packed along the App

And although we got it working, there were still a lot of bugs thus we were reluctant to release it and then one day we decided to go ahead with it anyway. There are a number of bugs but it’s still working quite as expected.

Bugs and Possible solutions

  • Opening a 3rd party URL (which opens in new tab in browser) opens within the App, losing the digital verification and top bar with context menu appears. Even worse, when you click the close button, it quits the App rather than closing the external website. Possible Solution: Ability for the App to open the URL from the TWA as android-intents.

URL_BUG

  • After clicking on 3rd Party URL and loosing our digital verification if you come back the original App using back button, the main App loses the digital verification until the next reload. Now this is a serious UI issue. Possible Solution: Although this seems resolved in Chrome Canary, but let’s wait to hear from them.

Loosing Digital verification

  • Initial opening of the App is really slow as service Worker needs some time before caching the minimal UI. Worse case, user downloads the app and opens it when internet is off, it just shows a blank screen. Possible Solution: During our meeting with Chrome dev team, they proposed something knowns as Web packaging using which digitally signed static assets can be shipped with the App like. To be honest, We didn’t completely understand it but it has the potential to solve the issue.

Opening Screen

  • The App looks more likes a website than a native App. We came up with the term Appification which is very self explanatory, it means to make the Web App more look like native App when running as TWA, such as hide Open in New tab links and other signs which indicate the Chrome running in background. Possible Solution: Google Chrome dev team suggested about some CSS property which can detect if it’s a TWA and work accordingly, waiting to hear from them in the coming week.

Website like app

  • Resolved - The banner that says Running in chrome, this creates a confusion among the users of the app and makes a confused user experience. Possible Solution: In Chrome version 73, this has been resolved.

Running in Chrome

  • Automatic Translation of the page by the Google Chrome. Sometimes a prompt appears asking the user to try and translate the page, which is really not what we want in the app. Possible Solution: Ability to control that prompt and disable it?

translate banner

  • Installation of PWA and TWA in the same device. I guess you can’t call it a bug per say or it depends on you. But the user can be used if he sees two apps serving same functionality with some minor differences (read quirks). Possible Solution: Ability to detect and remove the PWA and TWA with some user interaction or in the background. This might soon get resolved with the upcoming revamped PWA installation banner.

PWA-TWA

  • Resolved - When opening the App in a device where the default browser is not Chrome or even not installed, app gives a prompt to select browser and sometimes shows a blank screen. Possible Solution: In Chrome version 73, this has been resolved.

"Open with" prompt