Windows 10 Web Hosted Apps

Seit Windows 8 kann man mit Web Technologien nativ auf die Windows Runtime zugreifen und System-APIs ansprechen. Das ging bisher allerdings nur wenn man die Anwendung lokal paketiert hat. Mit Windows 10 ist eine neue Möglichkeit hinzugekommen: Web Hosted Apps.

Definition Web Hosted App

Was ist eigentlich eine Web Hosted App? Im Prinzip ganz einfach erklärt. Eine native Windows 10 Anwendung deren Inhalt von einem Web Server kommt.

Dieses Szenario erlaubt es eine App im Store zu haben, aber die Aktualisierung auf dem Web Server durchzuführen. Man hat die volle Kontrolle über die Update Zyklen.

Ist das neu?

Die Grundlegende Idee Web Content in einer App anzuzeigen ging bisher auch. Das Web Application Template war ein solcher Ansatz. Doch es gab unter Window 8 bzw. 8.1 zwei Dinge zu beachten.

  1. JavaScript das dynamisch das DOM manipulierte musste Unsafe deklariert werden. Das gestaltete sich schwierig für Bibliotheken die die App einfach eingebunden hat, wie z.B. Angular.js. Hier musste man auf Dinge ausweichen wie z.B. die JavaScript Dynamic Content Shim for Windows Store apps.
  2. Man hatte keine Möglichkeit lokale APIs aufzurufen.

Der Windows 10 Ansatz

Mit Windows 10 öffnen wir die Plattform wieder komplett so das die Entwickler selbst entscheiden können was funktioniert. Und wenn der Entwickler entscheidet, ja, meine App soll den Web Content hosten und diesem vollen Zugriff auf die lokale API gewähren, dann kann er dies tun.

Die Client Seite

Um Web Content in einer App anzeigen zu können müssen zwei Einstellungen getätigt werden. Zuerst muss die App auf den Web Content verweisen. Hierzu ändert man im package.appxmanifest die Startseite. Im folgenden Beispiel

<Application

Id=App

StartPage=http://lockscreenweb.azurewebsites.net/>

 

Damit der Inhalt auch geladen und angezeigt wird muss man noch URI Regeln hinzufügen.

<uap:ApplicationContentUriRules>

<uap:Rule Match=http://lockscreenweb.azurewebsites.net/ Type=include WindowsRuntimeAccess=all/>

</uap:ApplicationContentUriRules>

 

Die Regel sagt aus, alles was von der Domäne http://lockscreenweb.azurewebsites.net kommt wird innerhalb der App angezeigt. Sämtliche links die auf diese Domäne gehen werden auch innerhalb des App Containers geladen. Links die auf eine andere Domäne verweisen werden im Standard-Browser geöffnet. Zudem darf dieser Inhalt auch auf die Windows Runtime zugreifen.

Die Server Seite

Damit man auch die Windows Runtime funktionalität aus der Server gehosteten App nutzen kann muss man abfragen ob man diese zur Verfügung hat.

if (window.Windows) {

 

Ist das wahr so hat man vollen Zugriff auf die Windows Runtime und kann diese nutzen.

Beispiel

Unter http://lockscreenweb.azurewebsites.net habe ich eine Webseite die in einer Windows 10 App gehostet werden kann. Diese Webseite ist in der Lage den LockScreen des Benutzers auf seinem Windows 10 Gerät auszutauschen. Dies funktioniert sobald man diese als Windows 10 Hosted Web App einbindet. Um nachzuvollziehen wie das ganze funktioniert habe ich ein Video aufgenommen das die Schritte zur Hosted Web App zeigen.

Windows 10 Bridge für Web Hosted Apps from Dariusz on Vimeo.

Das package.appxmanifest habe ich zudem als Gist abgelegt è https://gist.github.com/writeline/94d3713c80f922ff0ec3

Das Web Projekt gibt es ebenso auf Github unter http://github.com/writeline/LockScreenWeb