The Uncertain Web by Larsen Rob

The Uncertain Web by Larsen Rob

Author:Larsen, Rob
Language: eng
Format: epub
Published: 2014-12-17T22:45:06.857000+00:00


The basic pattern for a simple redirect is illustrated in the following code samples. In these, you’ll do a simple redirect based on the user agent string. It’s a simple redirect, in that it’s either a mobile user agent or it’s not, and it redirects (or doesn’t) accordingly. The regular expression is from detectmobilebrowsers.com, an open source project that parses major (and not so major) mobile user agent strings to create a pretty comprehensive regular expression to detect a mobile device. There are versions for pretty much every programming language. This example is in JavaScript, which is as close to a lingua franca as the Web has today, but the logic will be the same, no matter what language you’re using on the server side.

There are two things happening. First, you set a click event handler to manually move the user over to the mobile site. It uses window.sessionStorage to set a flag indicating the user’s choice of the mobile site. Following that is the redirect code. It starts with an if…else block, which is where our tests are executed. The first case tests against the sessionStorage variable to quickly short circuit further logic if there’s a match. If there’s no match, we go into an else block where there are two variables, primaryMobileRegex and secondaryMobileRegex, which represent two different regular expressions. The first regular expression tests for the most obvious and most popular mobile devices in the hope that these likelier use cases will resolve true without having to evaluate the much larger secondary test. The second, larger test offers broader coverage, but only if the first test fails. If there’s no value in sessionStorage, then you test against the regular expressions, redirecting to the mobile option that either of them are matching.

Also, notice the link element with the “alternate” rel attribute and associated media query. This is a hint indicating the presence of mobile-optimized content. Coupling this pattern with a rel="canonical" link element is the full pattern preferred by Google when creating an alternate mobile experience:

<!DOCTYPE html> <html class="no-js"> <head> <title>Mobile Detection</title> <link rel="alternate" media="only screen and (max-width: 640px)" href="ch04-02-mobile.html" > </head> <body> <h1>Desktop!</h1> <p><a href="ch04-02-mobile.html" id="switch">Go to the mobile version</a> </p> <script> document.getElementById( "switch" ).addEventListener( "click" , function(){ sessionStorage.setItem( "view" , "mobile" ); window.location = this.href; }); (function( UAString,url ){ if ( sessionStorage.getItem( "view" ) == "desktop") { return } else if ( sessionStorage.getItem( "view" ) == "mobile" ) { window.location=url; } else { var primaryMobileRegex = /(android|bb\d+|meego). +mobile|avantgo|bada\/ |blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip( hone|od)|iris|kindle|lge |maemo|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|phone)|xda|xiino/i; var secondaryMobileRegex = /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; if( primaryMobileRegex.test( UAString ) || secondaryMobileRegex.test( UAString.substr( 0,4 ))) { window.location=url; } } })( navigator.userAgent || navigator.vendor || window.opera,'ch04-02-mobile.html' ); </script> </body> </html>

In case you’re curious, the argument to the detection function is built up by testing three possible variations on the user agent string or equivalent.



Download



Copyright Disclaimer:
This site does not store any files on its server. We only index and link to content provided by other sites. Please contact the content providers to delete copyright contents if any and email us, we'll remove relevant links or contents immediately.