Detection and Prevention of App Opening in Desktop Mode in Trusted Web Activity

[VahidGarousi]

Is your feature request related to a problem? Please describe.

Currently, there is no direct way to detect and prevent a Trusted Web Activity (TWA) from opening in "Desktop Mode" when the user selects this mode in Chrome settings on a mobile device. This can lead to an undesirable user experience, as the app is optimized for mobile and may not function correctly in desktop mode.

The problem:
We need a mechanism to identify when Chrome is in "Desktop Mode" on mobile devices and either switch back to "Mobile Mode" automatically or show the user a message prompting them to return to mobile mode.

Describe the solution you'd like

I would like to see a feature in the TWA library that provides:

• Detection: A built-in API or callback in the Trusted Web Activity that can detect when the app is being opened in "Desktop Mode."
• Prevention: An option to prevent the TWA from launching in desktop mode and instead show a customizable message to the user prompting them to switch back to "Mobile Mode."
• Automatic handling: An automatic fallback to "Mobile Mode" where possible without user intervention.

[OlegNitz]

Hi Vahid,

I would suggest that you use User-Agent Hints API to detect whether the browser is in a mobile mode: navigator.userAgentData.mobile. If it is not, you can show a message to the user prompting them to switch back to "Mobile Mode."

[VahidGarousi]

Hi Vahid,

I would suggest that you use User-Agent Hints API to detect whether the browser is in a mobile mode: navigator.userAgentData.mobile. If it is not, you can show a message to the user prompting them to switch back to "Mobile Mode."

Hi @OlegNitz Thank you for your response

We used the LauncherActivity class from the following link: https://github.com/GoogleChrome/android-browser-helper/blob/main/androidbrowserhelper/src/main/java/com/google/androidbrowserhelper/trusted/LauncherActivity.java.

Here's the code we used to detect desktop mode:

private fun detectDesktopMode() {
    val userAgent = WebSettings.getDefaultUserAgent(this)
    Log.d(TAG, "User-Agent: $userAgent")

    if (!userAgent.contains("Mobile")) {
        showDesktopModeWarning()
    }
}

private fun showDesktopModeWarning() {
    Toast.makeText(
        this,
        "You are in Desktop Mode. Please switch to Mobile Mode for a better experience.",
        Toast.LENGTH_LONG
    ).show()
}

However, this didn't work as expected. Even after enabling and then disabling desktop mode, the string userAgent still contained the word "Mobile".

[maiconcarraro]

We have the same issue with some users, they usually don't understand why the app is showing "very small text", then we need to explain they have desktop mode enabled and they need to go to Chrome disable it which is really confusing to non-technical user. Since we have some features like fullscreen and orientation, would be nice to have a configuration to enforce the correct display.

[build3r]

It would be good if we can have the option to toggle with TWA and CCT from the Webapp. For users who are not familiar with browsers its very difficult to explain to go and change it in chrome.