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.
Get
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.
Switch 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:
|
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