Did you know that you can navigate the posts by swiping left and right?

Das Windows Phone als Webbrowser erkennen

22 Aug 2011 . Unknown . Comments

Es ist vollbracht! Sie haben nach wochenlanger Planung, Programmierung und Testen endlich ihre Windows Phone 7 Anwendung fertiggestellt und im Marketplace veröffentlicht. Gehen wir einmal von einer Webanwendung aus, beispielsweise ein CMS oder ein Eventplaner. Ihre Besucher wissen vielleicht gar nicht, dass es inzwischen eine App gibt um die Verwendung zu vereinfachen. Natürlich, man kann einen Link, einen Button oder auch eine ganze Supporseite zur Verfügung stellen. Doch vor allem auf dem kleinen Display eines Handys wird der Nutzer meistens nur auf ihm bekannte und wichtige Elemente achten, bsp. zum Anmelden. Viel einfacher wäre es, wenn die Seite selber merken würde, dass der aktuelle Besucher eine bessere Option in Form einer App hätte.

Die einfachste und effektivste Form so eines Hinweises ist ein wenig Javascript, dass beispielsweise den User-Agent des Browsers ausliest. Natürlich sollte man den Benutzer nicht ungefragt umleiten, das würde ihn nur verwirren und zwingt ihm die Benutzung der App auf. Besser ist es, einen Dialog anzuzeigen, in dem auf die native App hingewiesen wird und der Benutzer so die Wahl hat entweder die App zu verwenden oder doch lieber die gewohnte Website.

Damit die Abfrage nicht bei jedem Seitenaufruf durchgeführt wird und der User trotz Verneinen der Anfrage jedes mal erneut mit der Frage belästigt wird, muss noch ein Cookie gesetzt werden, welches die Entscheidung speichert. Im Script unten wird die Gültigkeit des Cookies auf 30 Tage gesetzt, nach dieser Zeit oder wenn er zwischendurch die Cookies löscht würde der Besucher also erneut gefragt.

Das Javascript selber ist relativ simpel und überprüft mittels eines einfachen regulären Ausdrucks, ob im User-Agent des aktuellen Browsers die Zeichenfolge “Windows Phone” oder “ZuneWP7” drin vor kommt. Der zusätzliche Parameter “i” lässt eine beliebige Groß- und Kleinschreibung der Zeichenketten zu. Die erste Zeichenkette wird verwendet, wenn der “Handymodus” zur Anzeige einer Website benutzt wird, die zweite Zeichenkette findet sich im User Agent bei der Verwendung der “Desktop”-Anzeige. Durch das Weglassen einer der beiden Bedingungen kann man also noch genauer auf die aktuelle Konfiguration eingehen. So könnte man bei Verwendung der Handyversion eine speziell auf mobile Websites angepasste Version anzeigen und nur bei Verwendung der Desktop-Anzeige auf die native App per Dialog verweisen. Das Javascript entsprechend zu erweitern sollte kein Problem darstellen, im Einzelfall bin ich aber auch gerne behilflich. Smiley

Kommen wir nun aber zum wichtigsten Teil, dem Javascript. Speichern Sie die folgenden Zeilen beispielsweise in ihrem Webverzeichnis unter “/Scripte/WPDetect.js”:

if (document.cookie.indexOf("ZuneRedirect=false") < 0) {
    if (navigator.userAgent.match(/Windows Phone/i) || navigator.userAgent.match(/ZuneWP7/i)) {
        if (confirm("Für diese Website gibt es eine native App für Windows Phone. Möchtest du zum Marketplace weitergeleitet werden?")) {            
            document.cookie = "ZuneRedirect=false"; 
            window.location = "http://social.zune.net/redirect?type=phoneApp&id=<GUID>";
        } else {
            var ablaufdatum = new Date();
            ablaufdatum.setTime(ablaufdatum.getTime() + (30 * 3600000 * 24));
            document.cookie = "ZuneRedirect=false" + "; expires="+ ablaufdatum.toGMTString(); 
        }
    }
}

In Zeile 3 steht die Nachricht, die der Besucher angezeigt bekommt wenn er mit dem Windows Phone auf die Seite geht, in Zeile 5 wird das Ziel der Weiterleitung festgelegt. Im Beispiel gehe ich von einer App im Zune Marketplace aus und man muss nur noch die eigene GUID an die entsprechende Position setzen. Hier kann aber auch die URL einer mobilen Version der Website stehen. In Zeile 8 wird schließlich definiert, wie lange das Cookie gültig sein soll: Der aktuelle Zeitstempel + 3.600.000 Millisekunden pro Stunde x 24 Stunden pro Tag x 30 Tage. Setzen Sie das Ablaufdatum aber nicht zu kurz. Wenn der Besucher sich bewusst gegen die mobile Version entschieden hat, dann hat er dafür vermutlich Gründe und fühlt sich durch oftes Nachfragen vermutlich nur genervt.

Das Einbinden der Javascript-Datei ist nun kein Hexenwerk merk. Laden Sie die eben angelegte Datei einfach innerhalb ihres Quellcodes auf der entsprechenden HTML-Seite:

<script type="text/javascript" src="/Scripte/WPDetect.js"></script>
Questions/Suggestions
As always, for questions or feedback, contact me or leave a comment.

Octocat by GitHubEdit this page on GitHub