Your first Windows web application

Since Windows 8, you could make native Windows applications using HTML and JavaScript. With Windows 8.1, this kind of application also include Windows Phone.

With Windows 10, this kind of application is now officialy called « Windows web applications » or « Windows web apps » and is part of the Universal app platform. It means you will be able to make Windows web apps for all Windows devices : phone, PC, tablet, Xbox, Hololens, etc.

But it’s not just about the name. Windows 8 was really strict about security in those apps, and has restrictions on referencing scripts outside of the applications sandbox, or using things like innerHTML to prevent script injection.Those restrictions prevent using some libraries, tools and workflow from a web developper perspective.

With the Windows web apps in Windows 10, the goal is to put you a lot more in control, and even allow some brand new kind of scenarios. Windows web apps use a security model based on the W3C standard « Content Security Policy », or CSP, to define the security for your application. It means you are in control of where your scripts or iframe code can resides. It also means that using most libraries, like AngularJS, should come without friction.

Another great improvement is that Windows web apps use the rendering and JavaScript engines of Microsoft Edge, and not Internet Explorer. It means that you could use all new HTML, CSS, and Javascript goodness coming from Edge like ECMAScript 6 features, @support, interaction media queries, … When new feature will come to Edge, you will also be able to use them in your applications (as the time of this writing ASM.js, css filter and more are in but with an experimental flag).

But that’s not all. The sandbox have been expanded to allow an application to run pages, iframes or webviews from outside your application. You could now make applications running partially, or entirely from web content.

Windows web hosted applications

This new capability is called hosted applications, because your app can be entirely or partially hosted in the web. Lets see together how you could make such applications. To run this, you will need Visual Studio 2015 and Windows 10.

First create a new Windows web application by clicking file / new / project. In the templates, expand JavaScript / Windows / Windows Universal and pick the « Blank App (Windows Universal) » template.

new project

To use hosted content, we must allow the http domains we want to access within our app. We must declare those domains in the manifest of our application.

In Visual Studio, open your « package.appxmanifest » file. Within your manifest, you should have something like this.

<Applications>
    <Application Id="App" StartPage="default.html">
        <uap:VisualElements
            DisplayName="App1"
            Description="App1"
            BackgroundColor="#464646"
            Square150x150Logo="images\Logo.png"
            Square44x44Logo="images\SmallLogo.png">
            <uap:SplashScreen Image="images\splashscreen.png" />
        </uap:VisualElements>
    </Application>
</Applications>

Inside the application, just after the « uap:VisualElements » node, add a node called « uap:ApplicationContentUriRules ». If you start typing, you will see that Visual Studio provide intellisense. In that node, add a « uap:Rule ». To that rule, the « Match » attribute indicate the http domain, and the « Type » attribute indicate if you want to include or exclude the http domain.

You should have something like this

<Application Id="App" StartPage="default.html">
    <uap:VisualElements>
    ...
    </uap:VisualElements>
    
    <uap:ApplicationContentUriRules>
        <uap:Rule Match="http://www.mcnext.com" Type="include" />
    </uap:ApplicationContentUriRules>
</Application>

Lets make a full hosted app. For that, we will change our starting page to point to our http domain. Change the « StartPage » attribute on the Application node to reflect that change.

<Application Id="App" StartPage="http://www.mcnext.com">
    <uap:VisualElements>
    ...
    </uap:VisualElements>
    
    <uap:ApplicationContentUriRules>
        <uap:Rule Match="http://www.mcnext.com" Type="include" />
    </uap:ApplicationContentUriRules>
</Application>

Now just run your application by hitting F5. A brand new application will run with your web content.

As configured here our web site can not use Windows Runtime API (WinRT). To enable this kind of scenarios, you must explicitely enable this http domain to access WinRT. Update the « uap:Rule » you set with the WindowsRuntimeAccess attribute to « all ».

<Application Id="App" StartPage="http://www.mcnext.com">
    <uap:VisualElements>
    ...
    </uap:VisualElements>
    
    <uap:ApplicationContentUriRules>
        <uap:Rule Match="http://www.mcnext.com" Type="include" WindowsRuntimeAccess="all"/>
    </uap:ApplicationContentUriRules>
</Application>

Congratulations, your website can now access WinRT features like Cortana, native share, and all other APIs available in WinRT (just look at MSDN documentation to see them all). Your application can also be deployed in the Windows Store, and add visibility to your site and services.

Obviously, just wrapping a website like we did is not the most valuable story. You will probably want to add a few files to bootstrap your application and show a decent (and branded) error page in case the user access your application without network. You may also mix packaged and hosted content by opening an iframe on that same uri, or whatever scenario respond to your needs.

This new hosted applications and new security model is really interesting because it unlocks many scenarios, for both public store applications, and line of business applications. We will try to expand on such scenarios in future posts.

Une réflexion sur “Your first Windows web application

Laisser un commentaire

Entrez vos coordonnées ci-dessous ou cliquez sur une icône pour vous connecter:

Logo WordPress.com

Vous commentez à l'aide de votre compte WordPress.com. Déconnexion / Changer )

Image Twitter

Vous commentez à l'aide de votre compte Twitter. Déconnexion / Changer )

Photo Facebook

Vous commentez à l'aide de votre compte Facebook. Déconnexion / Changer )

Photo Google+

Vous commentez à l'aide de votre compte Google+. Déconnexion / Changer )

Connexion à %s