Connect Your Web Site to Your Windows 8 App


Windows 8 Metro style apps let developers take their Web sites’ experiences to the next level. With Metro style apps, developers can build experiences that are more immersive, beautiful, and better connected with other apps and the rest of Windows. Apps can utilize the Windows Runtime to deliver features beyond what’s possible in a browser alone such as seamless access to local files and folders, integrating with Windows 8 Charms for sharing and search, and interacting with locally-connected devices. The Windows Store will deliver a great end-user experience to browse, find, and get apps users care about. This post describes the features of Metro style Internet Explorer in Windows 8 that connect Web sites to apps. It also describes the mechanisms Web developers use to create that connection.

Browsing for Apps

Browsing the Web is a natural way to find and connect to Metro style apps. Metro style Internet Explorer lets you know when apps for your favorite sites are available. Starting from the address bar, you can seamlessly acquire apps from the Windows Store and you can switch to installed apps from their associated Web sites.

After building a Metro style app, developers can reach their existing Web site audience by adding simple markup to their site that establishes a connection to their apps. This connection makes it easy for users discover your app directly from the Metro style Internet Explorer address bar when they visit your site.

Screen shot of web site offering you to get their appGet the App

You can simply browse to your favorite Web sites and discover they have apps associated with them through the site icon. The site icon turns into a button when IE discovers an app for the site. Tap on it to take you to the app’s description in the Windows Store.

Screen shot of web site whose associated app is installedSwitch to the App

When you navigate to a Web site with an associated installed Metro style app, you can directly switch to that app using the site icon button. For example, a friend shares a link to Web content via email or social media and the link launches the Metro style browser. If there is an app associated with this site, you can tap on the site icon and select “Switch to the app,” which launches it and takes you to very same content within the app.

See this in action in the following video:


This video shows how Metro style Internet Explorer connects Web sites to Windows 8 Metro style apps

Behind the Scenes

Web developers can associate their Web sites with their Windows 8 apps through simple markup on the site by including the following meta tags in the <head> element of their Web pages. Both tags are required for Metro style Internet Explorer to provide the site icon button.

<meta name=”msApplication-ID” content=”microsoft.build.App” />

<meta name=”msApplication-PackageFamilyName” content=”microsoft.build_8wekyb3d8bbwe” />

When these tags are present, Metro style IE uses them to identify if the app is already installed on the PC and, if not, to provide a direct link to the app description page in the Windows Store. The desktop version of IE10 on Windows 8 does not provide this linkage.

These two required tags are among the five possible <meta> tags available for controlling site/store/app interaction. Below is a complete table of the tags.

name content
msApplication-ID Required. Package-relative app-ID from Application Manifest. Used to link your site to your app.
msApplication-PackageFamilyName Required. Package Family Name of the app created by Visual Studio when the app is published. Used to link your site to the store.
msApplication-Arguments Optional. Argument string passed to your app. By default, IE passes the URL of the Web page but you can use this to pass a context-relevant string.
msApplication-MinVersion Optional. Enforces a required minimum version for the installed app. If the user tries to switch from the Web page to an outdated app, he or she is first taken to the Store to update the app.
msApplication-OptOut Optional. Allows pages to opt-out of all or parts of this functionality:
  • “install” prevents offering the user to get the app when they do not have it installed
  • “switch” prevents offering the user to switch to an already installed app
  • “both” prevents both offers

Processing msApplication-Arguments

Developers can build the best experience for consumers by ensuring that the switch from the site to the app is contextual. For example, in the above video, when the user switches to the app while reading a review of a phone on the Web site, the app automatically navigates the user to the phone review within the app. This provides users with a continuous experience from the site to the app.

msApplication-Arguments enables this. The content string of this meta tag is passed to the app as an argument string. The app parses this parameter and navigates users to the relevant in-app content.

The following code fragment shows how to handle this parameter in a Metro style app written in HTML/JavaScript:

// Function available in default.js file in Visual Studio Express 11 templates provided in Developer Preview Build

WinJS.Application.onmainwindowactivated = function (e) {

if (e.detail.kind === Windows.ApplicationModel.Activation.ActivationKind.launch) {

// Insert this code to handle incoming argument when Metro style Internet Explorer launches the app

if (e.detail.arguments) {

// Parse the value of the msApplication-Arguments string

// Direct incoming user to relevant in-app content

}

}

}

This fragment could be used in a Metro style app written in XAML/C#

// Function available in App.xaml.js file in Visual C# templates provided in Developer Preview Build Visual Studio Express 11

partial class App

{

protected override void OnLaunched(LaunchActivatedEventArgs args)

{

// Insert this to handle incoming arguments, when Metro Style Internet Explorer launches the app

if (!String.IsNullOrEmpty(args.Arguments))

{

// Parse the value of the msApplication-Arguments string

// Direct incoming user to relevant in-app content

}

}

}

Conclusion

Metro style Internet Explorer lets users discover and experience the Web through associated Metro style apps. It enables Web developers to drive their existing site audience to their apps, giving them new opportunities to engage their users with an immersive experience on Windows 8.

—Rahul Lalmalani, Program Manager, Internet Explorer

Comments (16)

  1. Stan says:

    Nice!  A commendable alternative to the obnoxious and intrusive "WE HAVE AN APP!" splashscreens websites insist on showing all the time.

  2. RF says:

    I'm saying this to amuse myself (Microsoft's course is set), but the Metro Web apps strategy seems all wrong to me — more like webOS's approach than the successful models Apple and Google have promoted, where vendors take HTML and add progressive, potentially standardizable enhancements. (How many webOS apps are out there, compared to how many mobile-flavored Web apps?)

    In many ways the Metro HTML model seems awesome. The UX guidance for Metro style apps seems wise. Semantic zooming, snapping to zoom levels, extra standards support (and well-thought-out extensions to HTML), standard widget libraries: all great. But Web tools lose their appeal if they aren't smoothly integrated with the Web at large. Adobe found it out with AIR. Palm found it out with webOS. It's partly that those ecosystems were small, but it's mostly that nobody's ecosystem is as big as the Web.

    If I were King of Microsoft, I think I'd do something un-Microsoft-y: parallel to Metro, work on a Future Framework for Web Apps (capitalization and all :) ) that offers consistent, Microsoft-style UX, a good, consistent API, and HTML5 features on all browsers — and progressive enhancement with Windows 8-only features when available. If MS doesn't, someone else will, but it will be jankier (look at most existing Web widget frameworks) and not optimized to shine on Windows 8.

    Anyway, ell oh ell — I'll be here all week; it felt good to get the thought off my chest at least.

  3. SamYeager says:

    "Package Family Name of the app created by Visual Studio when the app is published."

    So Visual Studio is a prerequisite for Metro Apps?

  4. JGL says:

    makes great sense; long needed; good job

  5. Clive London says:

    The video doesn't work in Firefox without Flash, which is how I happen to run Firefox. Pro tip: if you include a WebM version of the video in the video tag it will play natively in Firefox. Come on, guys. This is a website for a web browser. You must try harder to make your website work better across more browsers. Don't make it look all amateur hour.

  6. @IE Team says:

    IE Team I hope you hear my thoughts:

    Use the basic architecture of B8 blog.

    B8 is more accessible allows the translation of the articles.

    B8 is faster does not load unnecessary things.

    B8 displays only an introduction for each article and does not require downloading the images or upload videos of old or unnecessary because already seen.

    Allow comments to load only on demand eases the way from the pages.

    Solve the problem of HTML5 Video Video fallback for browsers that do not support it.

    Your audience should be wider than just the developers browser HTML5 H.264 video who know the English language.

    Developers are much more numerous than those that you address today try to broaden your horizons and do not stay locked in your room warm.

    I say this because this site not appreciate the good content and articles that I'm sure will cost time and effort. Enhance your work will not kill him. I hope my comment to be considered a constructive improvement that the fastest way possible. An admirer.

  7. FremyCompany says:

    Is it possible for a website to "automatically open the app if available"? Seems a very common usecase.

  8. @RF says:

    Metro is an additional environment in Windows 8. Don't take Metro too hard on yourself. Its just a luxury for touchscreen.  You can develop Metro apps using C++, C#.NET, Silverlight and HTML5/CSS/JavaScript as well.

    At the same time, you can also enter the desktop environment by clicking the desktop tile OR pressing WindowKey+D. If you are a niche desktop user like me, you can press one keycombo: WindKey+D and get back to your desktop world!

    But if you are plagued by all that made-by-Apple/Google trolling to prove MS products fail and theirs win, then nothing can change your opinion.

  9. Mike says:

    This is all very interesting.  I develop Web Applications that work in all browsers on all platforms including mobile.

    None of Windows 8 features interest me, nor does the El Camino desktop in Windows 8.  I personally find the Metro UI to be the ugliest UI I've ever seen (except for the transitions and animations that are a welcome improvement).

    window.external was the bane of developing for the Web and getting locked into craptacular IE-only experiences.  Lucky for us you seem to think the community wants even more of this garbage.

    Also glad that Metro development requires Visual Studio – If I needed another reason why I had no plans to develop in it, there it is.

    Heck this blog doesn't even work (4th attempt to post a comment!) – I've therefore got no faith in Metro, IE, or Windows 8. FAIL

  10. Windows7user says:

    Will IE10 be for Windows 7? If yes Release another Preview for us!!!!

  11. Michael says:

    Would it be illegal if somebody was to hack into IE10's and windows8's coding to get its source code?

  12. Anonymous says:

    @Michael

    Not so much illegal as it would be impossible.

  13. Michael says:

    @Anonymous Actually my friend did get the source code of them both.

  14. @Michael says:

    I am flattered! OMG.. your friend deserves a World Cup! Now get lost.

  15. etacarinae says:

    "None of Windows 8 features interest me, nor does the El Camino desktop in Windows 8.  I personally find the Metro UI to be the ugliest UI I've ever seen (except for the transitions and animations that are a welcome improvement)."

    @Mike Hear hear. You're not the only one sharing those sentiments, believe me. I think it's the ugliest design I have ever seen and a huge regression.

    @IETeam Please, give us back a separate search box. How many times do we need to ask for the option? Kthx.

  16. murad3399@live.com says:

    Password