Anforderungen für Device-Weichen
Je mehr Anforderungen an die Unterstützung von unterschiedlichen Devices kommen, desto öfter steht man vor der Frage, wie die verschiedenen Ausgabegeräte zwecks unterschiedliche Behandlung auf einer Seite unterschieden werden können, um dann z.B. jeweils eine Weiterleitung auf unterschiedliche Zielseiten vorzunehmen welche das entsprechende Device unterstützen, also eine sogenannte Device-Weiche oder Browser-Weiche.Klassische Use Cases sind hier:
- Je nach Device die "klassische" Website oder die mobile Site anzeigen
- Eine Landing Page erstellen, welche unterschiedliche mobile Devices zu unterschiedlichen Zielseiten (z.B. Subdomains) verzweigt
- Eine Redirect-Verteilerseite, welche mobile Devices in die verschiedenen Stores für einen mobile App Download weiterleitet
Das letztgenannte Beispiel möchte ich hier einmal exemplarisch demonstrieren. Man stelle sich folgendes Szenario vor:
Demo-Szenario
Im Rahmen einer Web-Anwendung werden native mobile Apps für iOS un Android Devices angeboten oder ansnsten auf eine mobile oder klassische Website weitergeleitet. Wir nehmen als Beispiel Wikipedia und wollen folgende Regeln abbilden
- Wenn Device ein iOS Device ist, leite um in den App-Store
- Ist es ein Android Device, leite um auf den Google Marketplace
- Ist es ein sonstiges mobile Device, leite um auf die mobile Website
- Alle anderen sollen auf der klassischen Website landen
Zentral wird eine URL bereitgestellt, welche die hereinkommenden Anfragen nach den aufrufenden Device-Typen erkennt und dann an die entsprechenden Ziel-URLs weiterleitet.
Lösungsansatz
Zu Umsetzung wird in diesem Beispiel PHP herangezogen, selbstverständlich lässt sich das Konzept auch in anderen Programmiersprachen analog umsetzen.
Das Prinzip ist recht einfach: Aus dem Http-Call des Aufrufs werden bestimmte Request-Header Variablen extrahiert und dann analysiert. Je nachdem welche Variablen existieren oder mit Inhalten belegt sind kann man dann Regeln für eine Weiterleitung oder andere Aktion definieren. Dabei können allgemeine Request-Header Variablen wie:
- HTTP_USER_AGENT
- HTTP_ACCEPT
- HTTP_PROFILE
genutzt werden oder auch hersteller- und carrierspezifische wie:
- HTTP_X_NOKIA_IPADDRESS
- HTTP_X_VODAFONE_3GPDPCONTEXT
- HTTP_X_HUAWEI_USERID
- HTTP_X_ORANGE_ID
(Für die Regeln sei hier auf den Quelltext von Mobile_Detect (s.u.) verwiesen).
Umsetzung
Framework Mobile_Detect
Für PHP gibt es ein sehr schönes und schlankes Open Source Framework, welches die oben stehende Logik in einer Klasse gekapselt bereits abbildet und sich einfach in eigene Applikationen einbinden lässt. Es kann hier bezogen werden:
Mobile_Detect bietet verschiedene Klassen Methoden, um vom anfragenden Device den Typ (
mobile, Tablet) das Betriebssystem (z.B. iOS, Android) oder den benutzten Browser (z.B. Safari, Chrome, Opera) zu erfragen.
Dazu sind nur zwei Zeilen notwendig. Beispiel um zu erfahren, ob ein anfragendes Gerät ein Apple iOS Device ist:
// detect device
$detect = new Mobile_Detect();
// is iOS?
if ($detect->isiOS())
echo "Welcome iOS Device";
Landing Page
Nun wird eine Landing Page in PHP erstellt, die genau diese Funktion übernimmt:
- Evaluieren der Devices
- Rückmeldung eines 302 redirects, bei dem als Location, also Ziel-URL die entsprechende Zieladresse zum App-Download bzw. zu den Websites gesetzt wird.
Der Quelltext der Device-Weiche gestaltet sich also wie folgt:
<?php
$iOSURL = "itunes.apple.com/de/app/wikipedia-mobile/id324715238";
$androidURL = "play.google.com/store/apps/details?id=org.wikipedia";
$mobileURL = "en.m.wikipedia.org";$desktopURL = "en.wikipedia.org";
// include Mobile_Detect class
require_once 'Mobile_Detect.php';
// set 302 header variable to notify that the sites was found
header($http["HTTP/1.1 302 Found"]);
// detect device
$detect = new Mobile_Detect();
// redirect to AppStor if iOS
if ($detect->isiOS())
header( 'Location: http://'.$iOSURL );
elseif ($detect->isAndroidOS())
header('Location: http://'.$androidURL);
elseif ($detect->isMobile())
header('Location: http://'.$mobileURL);
else header( 'Location: http://'.$desktopURL);
exit;
?>
Die ersten Zeilen definieren Variablen für die Redirect-Ziele. Danach wird im Response-Header die Information für einen 302 Redirect gesetzt. Die folgenden Zeilen sind bereit bekannt. Die Mobile_Detect Klasse wird instantiiert, es werden die Informationen zu dem aufrufenden Device abgefragt und die Redirect-Ziele gesetzt.
Eine Live-Demo existiert hier.
Die Quelltexte können (inkl. Mobile_Detect Klasse) hier heruntergeladen werden.
Es gibt verschiedene Online Emulatoren, mit denen man die Weiche testen kann, z.B. mobilephoneemulator.com
Oftmals erfolgt die Publizierung von App-Downloads mit der Verbreitung von QR-Codes über klassische Median wie Print. Wer das in unserem Beispiel einmal ausprobieren möchte kann das hier tun:
(QR-Codes lassen sich auf verschiedenen Websites wie dieser mittlerweile leicht Online erstellen).
Referenzen:
http://en.wikipedia.org/wiki/HTTP_302
http://mobilephoneemulator.com/
http://demos.auconsil.com/deviceswitch
http://goqr.me/de/
http://mobilephoneemulator.com/
http://demos.auconsil.com/deviceswitch
http://goqr.me/de/
Kommentare
Kommentar veröffentlichen