Friday, December 2, 2011

Detecting Mobile Browsers

I have a webapp that I'm about to normalize into separate model and view apps. It's not an uncommon approach in order to perform different rendering based on the browser type in particular mobile. SO the first step in the process of information gathering is browser detection. Like everyone before me they did the google search and found the many tools out there. Clearly this is going to be a moving target over time.

I ran the generator code and ended up with this mess:
# Ported by Matt Sullivan http://sullerton.com/2011/03/django-mobile-browser-detection-middleware/
import re
from django.http import HttpResponseRedirect

reg_b = re.compile(r"android.+mobile|avantgo|bada\\/|blackberry|blazer|comp
al|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mm
p|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\\/|plucker|pocket|psp|symbian|
treo|up\\.(browser|link)|vodafone|wap|windows (ce|phone)|xda|xiino", re.I|r
e.M)
reg_v = re.compile(r"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(t
e|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)|cr
aw|da(it|ll|ng)|dbte|dc\\-s|devi|dica|dmob|do(c|p)o|ds(12|\\-d)|el(49|ai)|e
m(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|e\\-|e\\/|\\-[a-w])|libw|lynx|m1\\-w|m3ga|m50\\/|ma(te|ui|xo)|mc(
01|21|ca)|m\\-cr|me(di|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|r
t|se)|prox|psio|pt\\-g|qa\\-a|qc(07|12|21|32|60|\\-[2-7]|i\\-)|qtek|r380|r6
00|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(a
l|ar|b3|it|t5)|so(ft|ny)|sp(01|h\\-|v\\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|1
8)|ta(gt|lk)|tcl\\-|tdg\\-|tel(i|m)|tim\\-|t\\-mo|to(pl|sh)|ts(70|m\\-|m3|m
5)|tx\\-9|up(\\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\\-v)|v
m40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\\-| )|webc|whit|wi(g |
nc|nw)|wmlb|wonu|x700|xda(\\-|2|g)|yas\\-|your|zeto|zte\\-", re.I|re.M)

class DetectMobileBrowser():
def process_request(self, request):
request.mobile = False
if request.META.has_key('HTTP_USER_AGENT'):
user_agent = request.META['HTTP_USER_AGENT']
b = reg_b.search(user_agent)
v = reg_v.search(user_agent[0:4])
if b or v:
return HttpResponseRedirect("http://detectmobilebrowser.com/mobile")

At first when I looked at the block of regex code I immediately thought about javascript obfuscation but settled on the fact that it was a complex set of regex. HOLY CRAP what a mess! I'm sincerely hoping that this code is generated by machine and auto-tested too because if this is hand-coded and tested only bad things will happen. The worst of it is that the code would be subject to updates whenever there were changes on the mobile side. (that's a different set of problems)

PART 2 of the challenge is that the actual render app(s) needs to detect the different mobiles and browsers and render something that you'd be happy to call you're own. The good news is that jQuery and Dojo both have mobile versions/modules and they seem fairly complete and functional. The bad news is that given the number and variety of browsers (see code above) there must be huge numbers of exceptions and exception processing in the code that actually drives the UI.

So the mission starts, first, with the redirect and then the facelift.

No comments:

Post a Comment

prod, staging, QA, dev in your CI/CD?

I've been developing with CI/CD since before it was a straw, let alone a pipeline. No, graduates of 2020 you did not design or discover ...