Buying Apps in the Windows Store with Family Safety
Tiles, Toasts, and Notifications in Windows Store Apps

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.

KantineWebsite_thumb[1]

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.

NotAssociated_thumb

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

Associated_thumb

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

AssociatedOpen_thumb[1]

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

Store_thumb[4]

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

image

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:

VStudio_thumb[1]

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

Feed You can follow this conversation by subscribing to the comment feed for this post.

E-Ticaret sistemi

thank you very much for this very useful information

Homepage

Currently, I am working developing Windows8 Metro App using JavaScript using developer licence. So, the link "Get the app" is not working as expected because the app is not deployed to Windows App Store yet.
If I installed the app using developer licence (not from Windows App Store), "Switch to the app" should be showing but it is not. How can I make working this?
Any information would be great. Thank you in advance. If you have been interested just click to read more.

Restaurant düsseldorf

Wow, marvelous blog layout! How long have you been blogging for? yoou made blogging look easy. The overall look of your web site is excellent, as well as the content!

Verify your Comment

Previewing your Comment

This is only a preview. Your comment has not yet been posted.

Working...
Your comment could not be posted. Error type:
Your comment has been posted. Post another comment

The letters and numbers you entered did not match the image. Please try again.

As a final step before posting your comment, enter the letters and numbers you see in the image below. This prevents automated programs from posting comments.

Having trouble reading this image? View an alternate.

Working...

Post a comment

Your Information

(Name and email address are required. Email address will not be displayed with the comment.)