Associating Windows Store Apps with Websites

How to make a Windows App findable? If there’s already a Website that is known, it is easy to associate this site with the app. Users can find the app easily by opening the Website. A requirement for this is using IE in the new modern mode, and adding two meta elements to the Website.

This article shows what’s needed to associate a Windows Store app with a Website, and what’s the result.

The Website http://www.kantine.at already uses these meta elements. If you open this page with IE 10, you’ll have a direct link to the Kantine App.

Deutschsprachige Version dieses Artikels

For all my friends outside of Austria, the Kantine app currently is only available in the Austrian marketplace. You can use http://www.bing.com for showing these features as well.

Internet Explorer offers buttons to Refresh and Pin the website, Page Tools, and Forward. The Forward button only becomes active if the Back button was clicked before, or with the Flip Ahead feature turned on. The Page Tools allow to switch the browser in the desktop mode, and find content within the page.

If the Website is associated with a Windows Store app, the Page Tools button receives an additional plus sign:

Clicking this button if the app is not installed yet, a menu is opened with the new entry Get app for this site:

Clicking this menu entry directly opens the page of the app in the store:

If the app is already installed, the menu entry is replaced with Switch to Kantine app, and clicking this menu the app is started:

All this is possible just by adding two meta elements within the HTML head element: msApplication-ID and msApplication-PackageFamily:

<meta name="msApplication-ID" content="App" />
<meta name="msApplication-PackageFamilyName" content="CNelements.Kantine_x1ms6s50zdxze" />

You can get the values for these elements directly from the package manifest of the application. msApplication-ID is the ID of the application that is found using the XML editor. The Application element is child element of the Applications element. Get the value of the Id attribute. The value for msApplication-PackageFamilyName can be read using the manifest editor, Packaging Tab:

Summary

Just by using two meta elements it’s becoming easier to find your Windows Store app. Maybe it will take some time before users find this AppBar button in IE. As soon as the user finds this information, it works the same with all the associated Web sites. In any case, it just takes two meta elements for this feature.

Christian

CN innovation

More information about this feature in the IE Blog: http://blogs.msdn.com/b/ie/archive/2011/10/20/connect-your-web-site-to-your-windows-8-app.aspx

More info's to Windows Store apps in my workshops and in the book Professional C# and .NET 4.5.

Comments

[replica rolex watches]

after read your post,i can not wait for writing somethin on your blog,i like your pose,and will share it with my friends.i think they will also love it.

[E-Ticaret sistemi]

thank you very much for this very useful information