Why the triple slash URI notation in Windows Store HTML apps?

If you've written anything for Windows 8 using HTML/JS you've likely noticed the format of the triple slash:

Is this something strange Microsoft has decided to do to make WinJS work?

Nope - this is a little known portion of URI Schemes that you've probably seen before. RFC 1738 specified this for certain already defined URI schemes, ex file:/// that you may have seen in web browsers. This basically says if the authority happens to be missing from: file://authority/path/anything.jpg then we will default to the current authority. In the case of browsers, you may have seen the triple slash reference to a local file file:///. If you haven't open a local file from your Non-IE browser (I say non-IE because IE just displays the path as we're used to seeing a file path which is a bit friendlier to the eyes) and check it out.


In the case of Windows Store HTML/JS application, triple slash notation means look in your current application's package, which happens to be the current authority. If you reallllly wanted to type this all out then the above uri would be

<img src="ms-appx://YourApplicationName/images/yourimage.png" />

So as you can see this is a nice shorthand to having to type in your app name every time. The URI schemes specific to Windows Store HTML/JS applications can be seen (here) along with their respective RFC links.

Let's first take the case of URIs that point to resources in your project's references. This would be when you include a third party package reference to your application such as Bing Maps or Telerik components. Then we'll talk about the direct content files you have included in your application.

    <!--Telerik.UI references--<
    <link href="/Telerik.UI/css/common.css" rel="stylesheet" />

This is allowable and is the same as this syntax in the default current context. In other words when ms-appx:// is omitted, we default to the current context which could be ms-appx OR ms-appx-web if you happen to be running a page that you have loaded in the web context (see end of post for more info on this)

    <!--Telerik.UI references--<
    <link href="ms-appx:///Telerik.UI/css/common.css" rel="stylesheet" />

This one is more commonly seen since it's in the default app templates. This is a special case as it uses double slashes which is the notation meant to mean 'use a shared framework that is not part of this application but installed on the system in a folder shared by apps'.

<link href="//Microsoft.WinJS.1.0/css/ui-dark.css" rel="stylesheet" />

Note that currently WinJS is the ONLY package that uses this so don't try this syntax for your other package references.
Here we reference Bing maps, which is included as a package reference in our application. Each syntax works just fine.

    <script type="text/javascript" src="ms-appx:///Bing.Maps.JavaScript//js/veapiModules.js"></script>
    <script type="text/javascript" src="/Bing.Maps.JavaScript/js/veapiModules.js"></script>

This is NOT allowed as I mentioned above since // is meant for a shared framework on the system and WinJS is the only one that currently uses this. Thanks to Kraig Brockschmidt for clarfication on this and be sure to check out his blog!

    <script type="text/javascript" src="//Bing.Maps.JavaScript/js/veapiModules.js"></script>

This one below is of course invalid as the reference is supposed to be to for a package Microsoft.WinJS.1.0. You can't leave out the package unless it is your current application package as a folder you have included in your app calls /css.

<link href="ms-appx:///css/ui-dark.css" rel="stylesheet" />

What about local references in this packages not contained in referenced packages? In other words, images and css files you've included directly in your application folder? I prefer the first syntax as that's what we're used to in web apps, however they are all valid

<link href="/css/default.css" rel="stylesheet" />
<link href="///css/default.css" rel="stylesheet" />
<link href="ms-appx:///css/default.css" rel="stylesheet" />

You'll also see on occasion ms-appx-web:// which is useful for loading local content into an iframe to say this locally stored html page runs in the 'web' security context. Why would you do that? When your app loads, its running in what's called local context. In the local context you cannot include remote scripts. To do that you need the web context which is ms-appx-web://. You can read more about local and web context in WinJS applications at this location Features and restrictions by context

Hope this helps!!