DEV Community

Cover image for How to detect if a website is running on a webview?
Aneesh
Aneesh

Posted on

How to detect if a website is running on a webview?

Step 1 - Customise the userAgent string of the webview. Below is an example from React-Native

<WebView userAgent={"web-view-user-agent-123"} ref={"WEBVIEW"} automaticallyAdjustContentInsets={false} source={{ uri: this.state.url }} />
Enter fullscreen mode Exit fullscreen mode

In this example, we're setting the UserAgent to "web-view-user-agent-123". This is the UserAgent that will be sent with HTTP requests made by the WebView.

Step 2 - read this userAgent string in the client side code of the website.

We can read the userAgent string in the client side code of the website by

if (window.navigator.userAgent === "web-view-user-agent-123") { console.log("the website is embedded in a webview"); } else { console.log("the website is not in a webview"); }
Enter fullscreen mode Exit fullscreen mode

Conclusion:

This simple yet powerful technique can be used in various scenarios, such as tracking user activity, implementing custom logic, or providing a personalized experience to users within your WebView.

Top comments (0)