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.
[h=2]Browsing for Apps[/h]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.
[h=2]Get the App[/h]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.
[h=2]Switch to the App[/h]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:
[h=2]Behind the Scenes[/h]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 element of their Web pages. Both tags are required for Metro style Internet Explorer to provide the site icon button.
This video shows how Metro style Internet Explorer connects Web sites to Windows 8 Metro style apps
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 tags available for controlling site/store/app interaction. Below is a complete table of the tags.
[h=3]Processing msApplication-Arguments[/h]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-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
name content
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
}
}
}
[h=2]Conclusion[/h]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
More...