WebKit Webapps für den IEMobile/9.0 anpassen

Mit dem Release von Mango hat Microsoft einen Browser auf die Windows Phone 7 Platform gebracht, der gar nicht mal so schlecht ist, wie der Name Internet Explorer verlauten würde.

Zwar hinkt der Browser der Konkurrenz auf iPhone und Android nach wie vor meilenweit hinterher (html5test.com bescheinigt ihm gerade mal 30-40% der Punkte, die ein WebKit-Smartphone bekommt), jedoch kann der Browser, wenn er richtig eingesetzt wird, durchaus auch sehr schöne Webapps auf den Bildschirm zaubern.

Falle 1: Console.who?

Wenn die Webapp gar nicht laufen will, dann liegt es aller Voraussicht nach daran, dass im JavaScript Code irgendwo ein console.log() verwendet wurde. Das bringt (fast) jeden Internet Explorer zu Fall. Am Einfachsten wird das Problem umgangen, wenn einfach vor dem ganzen anderen JavaScript console.log definiert wird, wenn es nicht bereits vorhanden ist.

if ( window.console == undefined )
	window.console = { log: function( msg ) { } };

Dadurch müssen die nützlichen console.log Ausgaben nicht gelöscht werden und sogar im Internet Explorer 9 auf dem Desktop verwendet werden, wenn über F12 die Entwicklertools eingeschaltet sind.

Falle 2: window.setTimeout( callback, time, [ ] )

Die zweite Falle, in die ich mehrmals getappt bin, war die die Sache, dass der Internet Explorer keine Argumente für den callback in window.setTimeout unterstützt. Auch hierfür gibt es aber eine sehr einfache Lösung.

// das funktioniert im IEMobile nicht
window.setTimeout( myCallback, 100, arg1, arg2, arg3 );

// das funktionert im IEMobile einwandfrei
window.setTimeout( function() {
	myCallback( arg1, arg2, arg3 );
}, 100 );

Falle 3: no transitions (yet)

Microsoft wird erst mit dem Internet Explorer 10 CSS3 Transitionen und Animationen unterstützen. Dafür wird dann der -ms- Prefix verwendet werden.

Setzt die Webapp Transitionen voraus, sollte ein Fallback gebastelt werden. JavaScript Animationen sind zwar sehr aufwendig und langsam, als letzter Ausweg kann man sie aber durchaus in Betracht ziehen. jQuery bietet hier eine sehr schöne API dafür.

Und wie teste ich das Ganze?

Webapps für das Windows Phone 7 zu testen, ist nicht einfach. Weinre funktioniert leider nur mit WebKit Browsern und das fehlen einer console macht auch simpelstes Logging unmöglich. Zum Glück ist die Browser Engine des IEMobile der des Internet Explorer 9 auf dem Browser sehr ähnlich und bei eingeschalteten Developer Tools (F12) kann der Browser auch Debuggen, console.log. Oben drein gibt es dann auch einen Inspector, wie man ihn vielleicht von FireBug oder den WebKit Inspector kennt.

**update**

I have no touchevent and I must touch

Das wohl größte Problem des IEMobile 9.0 ist das Fehlen der Touch Events. Die in Desktop-Browsern verwendeten Drag’n’Drop Events werden leider auch nicht unterstützt. Einzig click wird als Event unterstützt. Das macht in gewissen Maßen mobile Entwicklung komplizierter als nötig.

Alternativen habe ich bis Dato leider keine gefunden. Da muss wohl Microsoft dran und die Events weiter reichen. Lustigerweise müssen sie sich dadurch ja auch selbst beschneiden. So bietet z.B. Nokia mittlerweile in den Webversionen ihrer Maps Anwendung für iOS und Android Offline Daten an. Im IEMobile/9.0 kann nicht mal die Online-Variante verwendet werden.

Windows Phone 7 und ich.

Seit ein paar Tagen bin ich stolzer Besitzer eines LG-e900 Optimus 7, einem wunderschönen Smartphone mit Windows Phone 7 Betriebssystem. Gekauft habe ich es aus verschiedenen Gründen. Allen voran wohl der, dass ich WP7 schon immer faszinierend schön fand.

Diese schlichte GUI mit den großen stylischen, minimalistischen Buttons, der klare Font, die weichen Farben und diese elegante Art von paralaxem Scrolling im Interface haben mich von Anfang an sehr fasziniert.

LG-Optimus-7-745x559-e22c4b192f9eb371.jpeg

Der zweite Grund für diese Anschaffung war der, dass das Telefon ohne Simlock gerade mal 175€ inkl. Versand gekostet hat. Da musste ich nicht lange nachdenken. Seit dem hat es mein iPhone 3GS ersetzt, welches sich langsam schon recht langsam anfühlt.

Von No-Go zu NoDo

Das erste, was ich tat, war dank dieser Anleitung die Windows Registry (!!!) freizuschalten und das Vodafone Branding zu eliminieren, damit ich auf NoDo aktualisieren konnte. Microsoft hat sich leider dazu entschieden, die Update Authority an den Provider abzutreten, wenn das Telefon mit einem Branding versehen ist. Ist das weg, werden die Updates von MS geladen. Was ich natürlich wollte.

Mit NoDo war schon vieles besser! Vor allem Copy & Paste, welches für 1Password – ja, das gibt’s für WP7 – ein absolutes Muss ist.

Softwaretechnisch hatte sich mittlerweile gezeigt, dass viele, mir sehr wichtige Apps, auch für Windows Phone 7 verfügbar waren. Twitter und Evernote müssen sein, Kindle ist ein schöner Zusatz. Meine erste gekaufte App wurde Wonder Reader, ein RSS Reader, der mit Google synchronisieren kann.

Oh Mac-Oh mio!

Das Zusammenspiel zwischen Windows Phone 7 und meinem Mac erwies sich dann doch einfacher als erwartet. Im App Store gibt es den Windows Phone Connector, der für die Synchronisierung von Musik, Bilder oder Videos und das Update des Gerätes verantwortlich ist.

Eine Möglichkeit das Adressbuch, Apps oder sonstiges zu synchen ist aber nicht vorhanden. Für Kontakte und Kalender funktioniert der Weg über Google einwandfrei! Im Adressbuch und im iCal kann eingestellt werden, dass mit Google synchronisiert wird und eben dieser Account kann auch am Phone eingerichtet werden. Einfacher als erwartet.

Seit dem Update auf Mango funktioniert leider der Windows Phone Connector nicht mehr. Synchronisieren geht nun nur noch über BootCamp.

Von NoDo zu Anacardiaceae

Sprich Mango. Das Update auf Mango erwies sich als brutal einfach! Wir sollten zwar in der Firma einen Entwickleraccount für WP7 haben, schließlich haben wir die vol.at App auch im Marktplatz (unter Spiele), ich wollte aber nicht warten und nachfragen. Also ging ich den inoffiziellen Weg.

Ein Wenig abschreckend war anfänglich die Tatsache, dass ein Update auf die endgültige Version von Windows Phone 7.5 nur von NoDo, nicht aber von einer Mango Beta möglich ist. Deshalb bin ich aktuell ein Wenig am mit mir selber ringen, ob ich wieder auf NoDo zurück soll. Schließlich passiert in 2-3 Monaten sehr viel auf dem Gerät und ich möchte nicht alles noch einmal einrichten müssen.

Das Update an sich verlief dann dank der Anleitung auf Windowsphonehacker ganz einfach von Statten. Software laden, eine Batch Datei starten, warten. Lange warten. Schon ziemlich lange warten.

Der Hauptgrund, wieso ich Mango wollte, war der Internet Explorer 9.

Shadows from the past

Windows Phone 7 fehlen noch einige Features. So ist z.B. kein VPN in die Firma möglich oder ich kann meine 3G Verbindung nicht mit meinem Rechner teilen.

Das größte Problem von WP7 lässt sich aber ganz einfach identifizieren: es ist der Internet Explorer. Offizielle Releases sind noch mit einer aufgebohrten Version vom IE7 unterwegs. Mango lockt zwar mit einem IE9, diese Engine muss aber erst explizit eingeschaltet werden! Was sich Microsoft dabei gedacht hat, ist ein Rätsel.

So kann Mangos IE9 zwar viele schöne Sachen, wenn die Seite, die man ansurft, aber nicht den IE9 Modus aktiviert, wird wieder nur mit der alten Version gerendert. Das hätte deutlich besser gelöst werden MÜSSEN.

Außerdem hätte ich mir mehr Kompatibilitäts-Bestreben seitens MS erwartet. Alle Konkurrenten setzen auf den WebKit. Es ist ja durchaus verständlich, dass Microsoft den eigenen Leuten vom IE Team nicht sagen kann: ihr kriegt’s eh nicht gebacken, wir nehmen auch den WebKit. Trotzdem hätten sie mehr dafür tun können, damit der IE so tut als wäre er ein WebKit. Es müssen ja nicht alle neuesten -webkit-* Erweiterungen unterstützt werden, sobald eine Seite einen “viewport” definiert, könnte der IE aber zumindest so tun, als wäre er modern.

Hier sehe ich 2 Chancen: MS macht’s Apple nach und erlaubt auch alternative Browser, z.B. einen WebKit. Oder MS bietet die Möglichkeit die Browserengine zu ändern (am Desktop kann ja auch der Chrome verwendet werden, um im IE zu rendern). Oder MS macht den IE kompatibel zum WebKit und faked diesen auch in den User-Agent rein. Und aktiviert die IE9 Features von Haus aus!