The browsers on our mobile devices have become more and more sophisticated in recent years, which is why you can do much of the same actions to them as you can on a desktop computer or notebook along with a mouse. Sometimes, therefore, you just want to log into a ServiceNow instance quickly with your smartphone to process a ticket quickly and easily while you're on the road.
And there might also be situations where you want to know if the user is running a mobile browser so that you can respond if necessary - for example, to disable a particular feature or suppress some page content.
Why to think about the difference between desktop browsers and mobile browsers?
Mobile devices are frequently utilized while traveling, in various settings, and for brief, focused work. For longer and more sophisticated tasks, desktop PCs and Notebooks are frequently utilized in secure and pleasant environments. As a result, you must think about how to adapt your design to the goals, demands, and preferences of users on various devices. For instance, you may make your mobile design simpler by cutting down on the stages, options, and distractions as well as by offering feedback and instructions that are simple to understand and follow. Your desktop design can also be improved by including more depth, richness, and interactivity, as well as by allowing for greater customization and control.
The forms of engagement and input used by mobile and desktop devices also differ significantly. Mobile devices mostly feature touch input, allowing users to interact with the screen directly with their fingers or styluses. Users of desktop computers can move a cursor and enter text with greater accuracy and speed since they primarily use a mouse and keyboard for input. As a result, you must think about how to build your interface's features and interactions for various input techniques. For instance, you can utilize gestures, swipes, and taps to provide quick and natural interactions, and you can make your mobile interface elements bigger, more visible, and more spread out to accommodate touch input.
Allow mobile browsers to see the same as desktop browsers
The first hurdle with this issue arises when you want to log in to a ServiceNow instance with a mobile device without prior customization, because your mobile browser will be redirected to a mobile version, which offers the user an incredibly ugly and useless UI version that seems to date back to the early days of the Internet.
To allow the mobile browser to get delivered the same content and UI like a desktop browser, the values of the following system properties have to be emptied:
glide.ui.m_agents
glide.ui.mobile_agents
glide.ui.tablet_agents
Check whether the client browser is on a mobile device
Basically ServiceNow is prepared to render responsive web pages - depending on the screen resolution and the capabilities of the requesting device. Especially, developers dealing with Service Portals need an excellent understanding of the Bootstrap Grid System with its four viewport sizes: Extra Small, Small, Medium, and Large. The viewport's size is determined by the width of a page in pixels. As a user resizes a page or changes devices, the viewport size changes. When the viewport size changes, elements are resized. If the elements did not change size as the viewport size changes, elements could move off the page and require scrolling to access.
But what if you want to respond to the users' device from a content or experience perspective? The answer depends on whether you want to perform the detection on client-side or on server-side.
Client-side detection
Client-side detection means that it is performed in a web browser, and nowadays there is a whole range of different possibilities. There are different great tutorials and articles available on the Internet which explain in details all these options, and two of them are:
- https://stackdiary.com/detect-mobile-browser-javascript/
- https://developer.mozilla.org/en-US/docs/Web/HTTP/Browser_detection_using_the_user_agent
Server-side detection
On server-side, all the sophisticated approaches to identify mobile browsers cannot be used as they do not have a browser environment available. Therefore, only the data can be examined which is sent within an HTTP request. And this is where the possibilities are reduced to the request headers, which carry some interesting information. The "User-Agent" request header is a characteristic string that lets servers and network peers identify the application, operating system, vendor, and/or version of the requesting user agent. A typical User-Agent request header could look like:
Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/51.0.2704.103 Safari/537.36
In one of the web pages mentioned by the previous chapter, it is said that browser detection using the "user agent" is basically a bad idea, but on server-side there is no other option. For this reason a simple helper method would be great that just returns "true" in case the client device is running a mobile browser.
And here you hit the next hurdle, because OOTB there is no documented way or API to get to the request headers of the client request in a normal script include or other type of server-side script.
However, if you dig in the OOTB source codes for a while, you will come across the API GlideTransaction now and then, which allows access to the currently executed client-side request. If you do further code searches with it, it will bring up exactly what you need for our use case:
var _strUserAgent = GlideTransaction.get().getRequest().getHeader('User-Agent');
A simple search for a certain text pattern in the value of the user agent header is not sufficient on its own to reliably distinguish a mobile browser from a desktop browser. Since the integration of external JavaScript libraries is always a bit cumbersome in ServiceNow, I was looking for an easy way to do it with only a little and ServiceNow-compatible code.
And the following helper method is the result, and it does a great job:
function isMobile() {
var _isMobile = false;
var _strUserAgent = GlideTransaction.get().getRequest().getHeader('User-Agent');
(function(a) {
if (/(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|ipad|midp|mmp|mobile.+firefox|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows ce|xda|xiino/i.test(a)||/1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i.test(a.substr(0,4))) {
_isMobile = true;
}
}) (_strUserAgent);
return _isMobile;
}
gs.info(isMobile());
Simulate mobile browsers in your desktop browser
To check whether the previously introduced helper method can really identify a mobile browser, you will need a simple way to simulate such a browser on your desktop browser. For this purpose, there are various browser extensions that switch to another browser type with one click by overwriting the "User-Agent" request header with an appropriate value. After switching to a mobile browser, the above helper method isMobile() returns "true":
