Geräteerkennung. Technische Übersicht. Einleitung

Transkript

1 Geräteerkennung Technische Übersicht Einleitung Bei der Entwicklung von Websites wird heutzutage voll und ganz auf Responsive Web Design (RWD) gesetzt. RWD ist in erster Linie für Client-seitige Informationen zuständig. Es bestimmt beim Aufruf einer Website, in welchem Layout und mit welchen Inhalten sie auf dem jeweiligen Gerät bereitgestellt wird. Entwickler sind somit in der Lage, eine einzige Website für alle Geräte zu erstellen, müssen sich aber bestimmter Herausforderungen bewusst sein. Die Kombination von RWD mit Server-seitigen Komponenten, auch RESS 1 genannt, ermöglicht eine detaillierte Profilerfassung des internetfähigen Geräts, was die Entwicklung mobiler Lösungen, die für das jeweilige Gerät und dessen Geschwindigkeit optimiert sind, erleichtert. Durch RESS fällt die Mehrzahl der Gestaltungsprozesse dem Server zu und entlastet so das Gerät. Eine Website kann daher bereits mit der Anpassung beginnen, noch bevor sie im Browser des Nutzers angezeigt wird, und dies resultiert in erhöhter Geschwindigkeit, besserer Qualität und erfolgreicherem Targeting. Device Detection von Netbiscuits ist eine Art RESS und umfasst eine Gerätedatenbank, Geräteerkennung und Geräteeinordnung für Unternehmen. Mithilfe dieses Service können Webentwickler Geräteund Browsertests zur systematischen Erkennung von Browserspezifikationen, Funktionen und Kontextinformationen durchführen. Zu den Daten, die vom Service erfasst und bereitgestellt werden, gehören Einzelheiten zum Typ und zur Version des Browsers, zur Geräteart, zum Betriebssystem sowie zu unterstützten Eingabemethoden und Funktionen von HTML5, JavaScript und CSS3. Diese Informationen wiederum machen eine gezielt angepasste Nutzererfahrung möglich. 1 Responsive Web Design mit Server-seitigen Komponenten, erstmals von Luke Wroblewski im September 2011 so bezeichnet.

2 Wie funktioniert das? Im Folgenden wird ein typischer Anwendungsfall beschrieben: 1. Das Gerät eines Website-Besuchers ruft eine Website auf (es wird eine HTTP-Anforderung an einen Server geschickt). 2. Die Web-Anwendung auf dem Server erhält die HTTP-Anforderung. Im Hintergrund wird der Versand einer Erkennungsanfrage an Netbiscuits Device Detection ausgelöst (die HTTP-Anforderung wird genehmigt). 3. Die Erkennungsanfrage geht beim Server ein, woraufhin das Gerät identifiziert, die Geräteinformationen aus der Datenbank abgerufen und an die anfordernde Web-Anwendung zurückgeschickt werden. Dabei werden auch die JavaScript-Snippets übermittelt, die von der Web-Anwendung für die Client-seitige Erkennung verwendet werden. 4. Die Web-Anwendung erhält die Gerätedaten und kann nun folgendermaßen verfahren: Den bereitgestellten JavaScript-Code mit der Antwort integrieren und die Client-seitigen dynamischen Parameter ermitteln (Device Detection bietet Ihnen also eine Kombination aus Server- und Clientseitiger Erkennung) Anhand dieser Daten festlegen, welche Inhalte und Funktionen angezeigt und angeboten werden, z. B. Videostreaming oder Bildergalerien 5. Die Web-Anwendung sendet die angepasste Website auf der Grundlage der Geräteinformationen und der Server- und Client-seitigen Erkennung an das Gerät.

3 Device Detection: Beispiele 1. Der kleinste gemeinsame Nenner? Angenommen, ein Entwickler möchte eine simple Seite mit einem Formular zur Erfassung der - Adresse eines Nutzers erstellen. Er könnte dann beispielsweise wie folgt vorgehen: <input type= name= required placeholder= /> Der -Eingabetyp, das Platzhalterattribut und die erforderliche Pseudoklasse wurden jedoch nur mit HTML5 hinzugefügt, was von vielen Browsern nicht unterstützt wird. Das folgende Beispiel zeigt, wie Sie dieselbe Funktionalität mit einer Kombination aus HTML (4.01) und JavaScript erzielen. <input type= text name= /> <script> // Code zur -Validierung // Code, mit dem überprüft wird, dass das -Eingabefeld nicht leer ist // Code zur Bestimmung des Platzhalters </script> Diese Methode erfordert allerdings mehr Ressourcen als die HTML5-Lösung (für die Ausführung von JavaScript ist generell mehr Prozessorleistung erforderlich als für integrierte Browserfunktionen) und ist fehleranfälliger. Entsprechend befindet sich der Entwickler in einem Dilemma: Er kann mit HTML5 arbeiten und muss dann hinnehmen, dass die Funktionen in vielen Browsern und auf vielen Geräten nicht nutzbar sind. Er kann sich auf den kleinsten gemeinsamen Nenner beschränken und eine Seite erstellen, die wahrscheinlich auf den meisten Geräten läuft, aber ohne die Vorteile moderner Browser auskommen muss. Und genau hier kommt Device Detection ins Spiel, denn damit wird stets die beste Lösung für jedes Gerät ausgewählt. Nachfolgend finden Sie ein einfaches Beispiel in Java (JSP): page language= java import= com.netbiscuits.dcs. detection.domain.deviceprofile, com.netbiscuits.dcs. detection.service.detection <% Detection detection = Detection. getinstance(); DeviceProfile dp = detection. detect(request); boolean supportsmyformreqs = ( BrowserHTML5FormsInputTypeCan ) && ( BrowserHTML5FormsOtherCanPlaceholder ) && ( BrowserHTML5Forms ValidationCanRequired );

4 <head> </head> <% if (supportsmyformreqs) { <input type= name= required placeholder= abc@abc.de /> <% } else { <input type= text name= /> <% } <% if (!supportsmyformreqs) { <script> // Code zur -Validierung // Code, mit dem überprüft wird, dass das -Eingabefeld nicht leer ist // Code zur Bestimmung des Platzhalters </script> <% } 2. Hotfixes Code sollte immer so klar und einfach wie möglich gehalten werden. Mehr Code bedeutet in der Regel auch mehr Komplexität. Manchmal allerdings ist das Hinzufügen eines speziellen Codes, zumindest vorübergehend, der beste Weg, ein bestimmtes Problem zu lösen. Das gilt vor allem für die Arbeit mit den unterschiedlichen Eigenschaften diverser mobiler Plattformen, die kontinuierlich aktualisiert werden. Nehmen wir einmal eine fiktive Website, als Beispiel für ein mobiles E-Commerce-Portal mit breit gefächerter Klientel. Die Stabilität der Website, bei der es sich um eine Verkaufsplattform handelt, ist von entscheidender Bedeutung, da sich jegliche Ausfallzeiten direkt auf die Erträge auswirken. einer externen JavaScript-Datenbank mit etlichen praktischen Funktionen. Das Team fasste zudem die eigenhändig programmierte JavaScript-Funktionalität in einer JavaScript-Datei zusammen. Die Website wurde auf verschiedenen Geräten getestet und schnitt auf allen hervorragend ab. Auch die Meinungen der Nutzer sind positiv. Nun stellen Sie sich bitte folgendes Szenario vor: Eine neue Aktualisierung für Android wird veröffentlicht (beispielsweise Android 4.4). HTC -Nutzer, die ihre Geräte damit aktualisieren, haben plötzlich schwerwiegende Probleme mit ihren Geräten. Nutzer anderer Geräte hingegen bleiben von Schwierigkeiten verschont. Das Management verlangt eine sofortige Korrektur der Software, denn der Kundenstamm besteht zu 8 % aus HTC-Besitzern. Nach einer ersten Analyse gelingt es dem Entwicklerteam, einen potenziellen Hotfix bereitzustellen, der jedoch ein neues Problem mit sich bringt: Es ist einerseits nicht absehbar, wie sich der Hotfix auf andere Geräte und Plattformen auswirken würde, denn genaue Tests würden sich über Tage hinziehen. Andererseits muss der Fehler so schnell wie möglich korrigiert werden, da das Management mögliche finanzielle Verluste befürchtet. Normalerweise würde man sich hier für einen Kompromiss entscheiden. Der Hotfix würde beispielsweise auf ein Testgerät geladen werden, um die wichtigsten Funktionen zu testen. Anschließend würde der Hotfix veröffentlicht werden in der Hoffnung, dass keine kritischen Probleme übersehen wurden. Eine bessere Lösung wäre der Einsatz von Device Detection (Geräteerkennung). Sobald die Serverseitige Installation abgeschlossen ist, werden durch die Implementierung des Codes Serverseitige Entscheidungsprozesse aktiviert, die auf den angeforderten Parametern beruhen. Das Team kann den Hotfix somit auf genau die Geräte bzw. Gerätegruppen anwenden, die von dem Fehler betroffen sind: <%@ page language= java import= com.netbiscuits.dcs. detection.domain.deviceprofile, com.netbiscuits.dcs.detection. service.detection Den ursprünglichen Vorgaben entsprechend entschied sich das Entwicklerteam zur Einbindung

5 <% Detection detection = Detection. getinstance(); DeviceProfile dp = detection. detect(request); <head> src= path/to/external.js > <% if (dp.getstringvalue( Device. Vendor ).equals( HTC ) && dp.getstringvalue( Device. OperatingSystem ).equals( Android ) && dp.getstringvalue( Device. OperatingSystemVersion ).equals( 4.4 )) { src= path/to/internal_htc_hotfix.js > <% } else { src= path/to/internal.js > <% } </head> nach Möglichkeit über ein und denselben Code für sämtliche Geräte verfügen würde. Natürlich können HTC-Geräte mit Android 4.4 auch durch Prüfen des User-Agent-Strings des jeweiligen Geräts erkannt werden. User-Agents sind aber leider nicht immer eindeutig: Manchmal weisen identische Geräte viele verschiedene User-Agents auf, manchmal sind die Informationen zum Betriebssystem unvollständig, und manchmal werden nur Daten zum Betriebssystem, nicht aber zum Hersteller oder zum Modell geliefert. Darüber hinaus ändern sich User-Agents häufig, sogar bei relativ kleinen Aktualisierungen eines Betriebssystems. Die Geräteerkennung muss also vermutlich für jede Neuversion von Android 4.4 angepasst werden. Genau deswegen ist eine umfangreiche Gerätedatenbank, die vom Anbieter verwaltet und betrieben wird, die beste und zuverlässigste Lösung. Fazit Wer Inhalte, Layout und Funktionen an die ständig steigende Zahl von Geräten und den besucherspezifischen Kontext anpasst, erreicht mehr Nutzer, verbessert die Interaktion und verzeichnet höhere Konversionsraten. Sie können die Performance Ihrer Website beträchtlich steigern, indem Sie die Verarbeitung zum größten Teil über den Server laufen lassen und mithilfe von Responsive Web Design einige der typischen Hindernisse bei der Entwicklung aus dem Weg räumen. Da der Hotfix nur einer bestimmten Gerätegruppe zugänglich gemacht würde, bestünde bei der Veröffentlichung lediglich ein minimales Risiko. Dem Team bliebe danach genügend Zeit, um eine nachhaltige längerfristige Lösung zu erarbeiten, die Über Netbiscuits: Netbiscuits ist ein global führender Anbieter im Bereich Mobile Analytics und Geräteerkennung. Die überzeugenden Analyse- und Geräteerkennungsprodukte von Netbiscuits ermöglichen es Unternehmen, ihre Reichweite und Performance zu erhöhen sowie die Konversionsrate und Kundenbindung zu verbessern. Weltmarken wie ebay, Coca Cola, MTV, BMW und T-Online vertrauen auf unsere Cloud-Software, die mehr als eine Milliarde Seitenaufrufe pro Monat erfasst. Seit dem Jahr 2000 haben wir durch systematische Katalogisierung und eingehende manuelle Tests die exakteste und umfangreichste Gerätedatenbank der Welt aufgebaut. Diese Datenbank enthält detaillierte Daten zu Gerätefunktionen für mehr als Geräte, 157 Betriebssysteme und 343 Browserprofile. Die Technologie von Netbiscuits zeichnet sich durch einzigartige Server- und Client-seitige Erkennung aus. Unternehmen erhalten dadurch Zugang zu Kontextinformationen wie Standort und Verbindungsgeschwindigkeit ihrer Website-Besucher und können für jedes einzelne der Mobilgeräte, die auf ihre Website zugreifen, die ideale Nutzererfahrung bereitstellen. Weitere Informationen finden Sie unter: Hauptniederlassung: Netbiscuits GmbH, Europaallee 10, Kaiserslautern Alle Rechte vorbehalten v1.1_032014