3

I have a PWA application where I check whether the application is in standalone mode(code snippet below) else prompt user with the Install Banner.

let windowNav: any = window.navigator;    
if (window.matchMedia('(display-mode:standalone)').matches || windowNav.standalone) {
             this.isStandAlone = true;
        }

Recently, I have also created a TWA app for the same. Now when I install the APP from the playstore the below check fails though the app is in standalone mode. Is there a different way to check the standalone mode in TWA applications?Or a way to check that the APP is a TWA app?

Thanks

Sampat
  • 1,301
  • 6
  • 20
  • 34
  • Have you tried looking into [this SO post (How to detect if web app running standalone on Chrome mobile)](https://stackoverflow.com/questions/21125337/how-to-detect-if-web-app-running-standalone-on-chrome-mobile) and [this SO post (How can I detect if my website is running inside a Trusted Web Actvity?)](https://stackoverflow.com/questions/54580414/how-can-i-detect-if-my-website-is-running-inside-a-trusted-web-actvity)? – MαπμQμαπkγVπ.0 Jun 27 '19 at 09:42

1 Answers1

4

Standalone is not so useful in case of TWA. if u want to know that your application is running on TWA, What you can do is set a sessionStorage as a flag, If certain conditions met. When ever a TWA app is open u can get the package name like com.example inside document.reffer property and also you can pass some value in query Param to check ur app. Is opened. So, this will look like this.

If(document.referrer == 'android-app://com.example' && location.href.includes('?twa=true')){ sessionStorage.isTwa = 1; }

When app opens, a session starts, and isTwa will be set as 1, when app is closed that session ends as well. Same as a chrome tab session.

Nikhil Tiwari
  • 109
  • 3
  • 1
    FYI, document.referrer == 'android-app://com.example' does not work on certain browsers. E.g. if the default browser is set to Brave, TWA will launch with the default browser and document.referrer will be blank. Query param might be the better option. – Han Sep 24 '20 at 08:22
  • @Han could you please explain a little about your option? Thanks – Nelson La Rocca May 12 '21 at 04:11
  • @NelsonLaRocca, i'm not sure about the new Brave browser (as of the test was last year), it's fine for Chrome. But running on Brave browser (although it's webkit), the javascript executed for document.referrer returns blank/undefined. So what i modified was to check only location.href.includes('?utm_source=launcher'). The utm_source=launcher is set in manifest.json. – Han May 17 '21 at 02:38