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.
1 2 | 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.
1 2 3 4 5 6 7 | // 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.
j! 14:20 on 23.08.2010 Permalink
hoi widi,
bin auch am überlegen, wegen neuem fernseher. aber heutzutage brauchst ja fast schon einen abschluss in nachrichtentechnik, um ein neues gerät anzuschaffen.
wenn du eh eine dreambox verwendest, brauchst du da die ganzen tuner überhaupt? das signal könnte ja auch die box liefern oder?
theoretisch würds ein riesenmonitor doch auch tun …
gruss
j!
mwidmann 15:11 on 23.08.2010 Permalink
Hey Jürgen,
theoretisch würde es ein Riesenmonitor wirklich tun, aber die zusätzlichen Tuner sind schon praktisch. So kann ich z.B. bei der Dreambox was aufnehmen und mit dem Fernseher was anderes schauen. Oder was tu ich, sollte mal die Dreambox nicht mehr gehen? Ich find’s ganz praktisch nun alle möglichen Tuner zu haben.
Und ob’s einen 46″ Monitor um den Preis des Fernsehers gibt, weiss ich nicht so genau. Glaube allerdings nicht.
Grüße!