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 }}
/>
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");
}
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)