Con la diffusione sempre crescente dei dispositivi mobile, il lavoro per gli addetti del web è aumentato, adesso è compito di un buon Web Developer fare in modo che il sito realizzato sia fruibile anche da browser web mobile.
In parole povere un sito deve essere visibile, veloce e facilmente navigabile, anche quando viene visualizzato da un device mobile come cellulare o tablet, i quali spesso non dispongono di connessioni a banda larga o sufficientemente veloci. Questo comporta che alcune soluzioni implementate per il desktop (portatili e PC) non vadano bene per il mobile, quindi necessita differenziare alcuni comportamenti e rese grafiche a seconda se la pagina richiesta al nostro sito, avvenga da un cellullare o da un PC.
E come facciamo allora a far riconoscere automaticamente al nostro sito se il browser web è mobile? Semplice, identificando lo user agent che effettua la richiesta, andiamo a scoprire come fare.
Cos'è uno User Agent?
Per User Agent s'intendono tutti quei software, solitamente client, che fanno richieste di risorse ad un server. Quindi esempi di User agent possono essere: browser web, robots dei motori di ricerca, browser mobile (cellulari) e così via, ed ognuno di essi è identificato da un proprio nome.
Conoscendo pertanto il nome ed il tipo di user agent che naviga il nostro sito, possiamo tramite un programma lato server fornire una pagina html adeguata al device che la sta richiedendo.
Funzione per riconoscere lo User Agent Mobile
La quasi totalità dei servizi internet, è basata sull'architettura client server. Quando uno user agent (il client) richiede ad es. una pagina html al nostro web server (il server), nella richiesta http è inclusa una stringa User-Agent che riporta le informazioni quali nome e versione del client che fà la richiesta. Allora possiamo interrogare la stringa http, e se questa contiene uno dei nomi degli user-agent mobile presenti in mercato sapremo così se il client che ha richiesto la risorsa è mobile o meno.
Supponendo di riferirci al php come linguaggio lato server, la funzione per l'identificazione dello user-agent risulterebbe così:
<?php
$useragent=$_SERVER['HTTP_USER_AGENT'];
if(preg_match('/(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|xda|xiino/i',$useragent)||preg_match('/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',substr($useragent,0,4)))
header('Location: http://www.miosito.com/mia_sezione/');
?>
Preciso subito che questa funzione (script) PHP è stata presa dal sito Detect Mobile Browser, nel quale trovate anche gli script per il riconoscimento automatico di browser web mobile in molti altri linguaggi, quali: ASP, ASP.NET, JSP, PERL, Python etc...
Tramite la super variabile globale $_SERVER['HTTP_USER_AGENT'] cattura il nome dello user-agent, e poi con la funzione di libreria preg_match verifichiamo se il nome è presente nella nostra lista. La funzione risponde bene alle nostre esigenze, l'unico limite imputabile a questa funzione e che la lista degli user-agent mobile deve essere aggiornate per le uscite di nuovi device e versioni.
L'identificazione o riconoscimento automatico di uno user-agent può essere fatto oltre che con un linguaggio di programmazione lato server anche a livello client tramite Javascript, o meglio a livello di Web server, quindi con le istruzioni htaccess per Apache o via Web.config per IIS, quale delle soluzioni sia migliore non saprei dire, sicuramente dipende dalle esigenze e da come abbiamo organizzato l'architettura del nostro sito per rispondere (responsivo) adeguatamente alla navigazione mobile o desktop.
L'argomento è ampio ed affascinante, e come accennato sul progetto Open Source Detect Mobile Browser, troverete tanti script pronti e testati per tutte le soluzioni e linguaggi. Qui possiamo ampliare la discussione tramite i vostri interventi, lo spazio dei commenti è a vostra disposizione, se vi è piaciuto questo articolo, volete aggiungere qualcosa o porre ulteriori domande, fatelo liberamente, ogni vostro intervento sarà gradito e contribuirà ad accrescere il valore della discussione.