Blog

To hide the address bar in a TWA app, you must have setup and asset links file on our server with valid SHA certificate fingerprint. Sometimes the app works fine when we test it by directly installing through apk, but address bar is shown when we download the app from play store.

The reason for this is that when we upload an app to the play store, Google sign the APK with its own signing key which changes the SHA certificate fingerprint.

So, to solve this issue, we need to add both the SHA certificate fingerprints in the asset links file so that our app works fine whether we install it directly or through play store.

The Trusted Web Activity (TWA) in Chrome has made it so easy to package and publish any website as an app.

But the problem arises when we want to track when your website was opened inside the TWA app.

Usually we can easily do this in a webview app by appending a custom string to the user agent. But that option is not available in TWA.

However, we can easily track the entry into the app using a custom query string.

TWA apps allow us to set start_url of the app to include any custom query string. So, when the app will be launched, it will open the first page after appending the given query string. You can detect that to track the entry into the app.

But this does not work when app is directly opened because of the intent when user clicked on a link to the website. In that case, you can detect the HTTP referer which is in the format- android-app://<package name>/

So, to summarize, you just need to check both these conditions to identify if a user has opened a page in your app.

If you want to track each and every page view of the user inside the app, it is possible by persisting the state through the query string. I have written an article about persisting state through query string using Javascript- How to persist state through query string in url

But this query string method may or may not be reliable as TWA apps allows users to directly open links from inside the TWA app into the main Chrome app. So, query string will then be passed to the Chrome app and your analytics will be skewed. But in any case, you will get a fair idea about user activity inside your TWA app.

In some cases when you do not have the option of cookies to manage state, query string can be a good option.

In this article, I am going to use some Javascript to persist state through a query string in the url. The Javascript code is added to head section of html when the desired query string is present in the url and then that Javascript will add that query string to all the internal urls on that page.

Here is the code-

const elements = document.querySelectorAll("a");
var url ='';
var theURL = '';
elements.forEach(function (element) {
    url = element.getAttribute('href');
    if ( url.startsWith('https://example.com') ) {
        try {
            theURL = new URL(url);
            if ( theURL ) {
                let params = new URLSearchParams(theURL.search);
                params.set( 'key', 'value' );
                theURL.search = params;
                element.setAttribute('href', theURL);
            }
        } catch(e) {
        }
    }
});

Now you can persist the query string throughout the user session. You can use the query string to identify the session details on the server.

Hope this helps.