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)