Blog

How to detect the end-user web browser from within canvas app

There's no direct way to retrieve the session ID from within a running Power App. A workaround to this issue is to retrieve the session ID by calling a Flow. This post walks through how to implement this technique.

There may be scenarios where it's necessary to detect the browser of the current user. One reason this is important is because we may want an app to behave differently depending on the target browser.

For example, we may want to add or hide features on a specific mobile device (e.g., make a feature available on a iOS device only), or we may want to format hyperlinks differently on an IE device (e.g., IE supports file/UNC hyperlinks, unlike Chrome), or we may want to display a label that prompts users of older browsers to upgrade to a newer browser.

With Power Apps, there is no native way to determine the browser of the current user. If there were, the natural place to access this would be through the App signal.

However, we can implement the same technique that I described in my post here, which is to call a Flow and to retrieve the meta data from the HTTP header.

http://powerappsguide.com/blog/post/retrieve-session-id-from-within-app-flow-workaround

What's a 'user agent'?

Using the technique that I described in my previous post, we can create a flow, and retrieve the "user agent" from the trigger body. The screenshot beneath shows an excerpt of the trigger body data that we can retrieve from a flow that we call from Power Apps.


The user agent string is a standard feature of HTTP requests. Whenever a browser or client makes a request to a website, it passes a user agent string that contains information that includes the web browser name, operating system, device type and lots of other useful bits of information.

However, every browser and device sends the user agent in a different format, which makes it difficult to extract the exact details that we require.

Developers and app builders can use a website such as "whatismybrowser.com". This site enables us to enter a user agent, and to return the source operating system, browser, and version.




This post focuses on retrieving the name of the web browser only. We'll use the simple algorithm that's highlighted in this post here, which is to carry out the browser detection based on the presence of the browser name in the user agent string.


Creating a Flow that retrieves the User Agent

Using the same technqiue that I described in my previous post, we create an 'Instant cloud flow' with a PowerApps trigger.

Next, we can retrieve the user agent into a string variable by addin an 'initialize variable' action, and setting the value to the following expression:
triggerOutputs()?['headers']?['User-Agent']


In the final step of our flow, we add a 'Respond to a PowerApp flow' action to return the variable that contains the user agent.

Calling the flow to retrieve the User Agent from Power Apps

From Power Apps we can now call our flow to retrieve the user agent string.

From the Action > Power Automate menu item, we add our flow. Assuming that the name of our flow is GetPowerAppsUserAgent, we can use the following formula to call the flow and to store the user agent  in a Power Apps variable called varUserAgent.

Set(varUserAgent,GetPowerAppsUserAgent.Run())
The screenshot beneath shows how to attach this formula to the OnSelect property of a button. We could equally attach this to the OnVisible property of a screen, or the OnStart property of an app. The label beneath shows the user agent string that the flow retrieves.


Retrieving the browser name from the User Agent

After we retrieve the user agent string, we can write string manipulation formula to extract the browser name. Here's an example that uses the algorithm from the Stack Overflow post from above.

With({ua:varUserAgent.useragent},
   If("edge" in ua, "MS Edge (legacy)",
   If("edg" in ua, "MS Edge (Chromium)",
   If(("opr" in ua) And !("window.opr" in ua) , "Opera",
   If(("chrome" in ua) And !("window.chrome" in ua) , "Chrome",
   If("trident" in ua, "Internet Explorer",
   If("firefox" in ua, "Firefox",
   If("safari" in ua, "Safari",
   "Other")
)))))))

Conclusion

There's no direct way to retrieve the browser, OS, or device from within a running Power App. A workaround is to retrieve the user agent from the trigger body of a flow, and to return it to Power Apps through a 'Respond to a PowerApp flow' action. We can then parse the output to determine these details.


Note (08-Aug-2021):
Bill Hess from Pixel Privacy has sent me the details of an informative guide that he has written on browser fingerprinting. His guide provides context about the information that WhatIsMyBrowser provides and offers advice on how users can better protect their privacy when browsing the web. You can visit Bill's guide here.
https://pixelprivacy.com/resources/browser-fingerprinting/
Previous
Next