When using JavaScript applications with any framework, we
cannot get access to some of the device information like the MAC and IP Address because
JavaScript runs on an Isolated Sandbox due to security concerns.
When building hybrid applications using the WebView
control on a Xamarin Android app, we can leverage the nature of the native app
layer to provide the device information to the JavaScript layer. There are
several ways to enable this interaction/bridge between the Native and
JavaScript layers, but there is a more direct integration that can be used to handle
this with less effort.
Browser UserAgent
All browsers provide a way to identify their information
using the Navigator UserAgent
property. This property tells us the type
of browser that is running the application like Internet Explorer, Safari, and
Chrome etc.
When using the WebView control on a native app, we have more
permission to control this information. This can enable our apps to set a
UserAgent property that can provide the JavaScript application with device
specific information. Let’s review how
that can be done by looking at a code sample with Xamarin Android project (C#) and
JavaScript.
Xamarin Android
Project
On the Xamarin Android project, we can set some of the
WebView control properties on the OnCreate override of our activity as shown
below:
|
private void SetWebView()
{
WebView view =
FindViewById<WebView>(Resource.Id.webView1);
view.Settings.JavaScriptEnabled = true;
view.Settings.UserAgentString = GetDeviceInfo();
}
private static string GetDeviceInfo()
{
string mac = string.Empty;
string ip = string.Empty;
foreach (var netInterface in
NetworkInterface.GetAllNetworkInterfaces())
{
if
(netInterface.NetworkInterfaceType == NetworkInterfaceType.Wireless80211 ||
netInterface.NetworkInterfaceType == NetworkInterfaceType.Ethernet)
{
var address =
netInterface.GetPhysicalAddress();
mac =
BitConverter.ToString(address.GetAddressBytes());
IPAddress[]
addresses = Dns.GetHostAddresses(Dns.GetHostName());
if (addresses != null && addresses[0] != null)
{
ip =
addresses[0].ToString();
break;
}
}
}
|
The code loads the reference to the control. This enables us
to set the control settings to enable the JavaScript functionality to run on and
set the user agent with the device information.
Notice that on the GetDeviceInfo function, we get both the
MAC and IP address and return the information as a delimited string similar to
the format used by most browsers. This enables us to parse the information and
display/use it as needed.
JavaScript Code
When navigating to the web page on the WebView control, we
can now query the windows user agent property and request the information that
is set by the native code as shown below:
|
var device =
window.navigator.userAgent;
console.log(device);
|
The console log should print out the content of the string
with a pattern similar to aa-bb-cc-dd/100.10.0.0 which represents the MAC and
IP address of the device.
Using this approach, we can easily provide device
information to the JavaScript app to enable it to display the device MAC and IP
address which is usually hidden from the JavaScript layer due to security
concerns on the device.
0 comments :
Post a Comment
What do you think?