Connect your website to your Windows Store app

Windows Store apps enable you to take your website's experience to the next level. You can build experiences that are more immersive, beautiful, and better connected to other apps and the rest of Windows.

By using the Windows Runtime, you can deliver features beyond what's possible in a browser alone, such as seamless access to local files and folders, integration with Windows 8 Charms for sharing and search, and interaction with local devices. Plus, the Windows Store delivers a great user experience for browsing, finding, and buying the apps that users care about.

This topic shows you more about the features of Windows Store apps in Windows 8 that connect websites to apps, plus the mechanisms you can use to create that connection.

The user experience

The three steps described in this section represent new ways for users to browse for, acquire, and use Windows Store apps with the help of Internet Explorer in Windows 8.

Browse for an app

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

After building a Windows Store app, you can reach your existing website audience by adding simple markup to your site that establishes a connection to your app. This connection makes it easy for users discover your app directly from the Internet Explorer address bar when they visit your site.

Get the app

Users can browse to their favorite websites and easily discover whether they have apps associated with them by using the site icon. The site icon turns into a button when Internet Explorer sees that an app is associated with the site. Users simply tap the button to go to the app's description in the Windows Store.

The following image shows a site icon when the site has an associated app.

Switch to the app

When you navigate to a website that has an associated installed Windows Store apps, you can directly switch to that app using the site icon button. For example, suppose a friend shares with you a link to web content via email or social media and the link launches Internet Explorer in the new Windows UI. If there is an app associated with the linked site, you can tap on the site icon and select Switch to the app, which launches it and takes you to the very same linked content within the app.

The following image shows a site icon when an associated app is installed on the user's system.

Behind the scenes

This section shows how to associate an app with a site and how to customize that experience on a website.

Essential markup

You can associate your website with your Windows 8 app by using a few simple lines of markup. Just include the following meta tags in the head element of your page. Both tags are required for Internet Explorer to provide the site icon button.

When these tags are present, Internet Explorer uses them to identify if the app is already installed on the user's computer and, if not, to provide a direct link to the app description page in the Windows Store.

Note Internet Explorer for the desktop on Windows 8 does not provide this linking ability.

These two required tags are among the five possible meta tags available for controlling interaction between the site, store, and app. The following table shows a complete list of tags.

Name

Content

msApplication-ID

Required. The name of your app Package, which can be found in the application manifest in Microsoft Visual Studio (under Packaging, Package name through the UI or /Package/Identity/@name in the XML) or on the Windows Dev Center website. Used to link your site to you app.

msApplication-PackageFamilyName

Required. The Package family name of the app can be found in the application manifest in Visual Studio (under Packaging, Package family name) through the UI. Used to link your site to the store.

msApplication-Arguments

Optional. Argument string passed to your app. By default, Internet Explorer passes the URL of the webpage, 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 webpage to an outdated app, he or she is first taken to the Windows 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

You can build the best experience for your customers by ensuring that the switch from the site to the app is as seamless as possible. For example, suppose a user switches to your app while reading a review of an item on your website. To provide a continuous experience from the site to the app, the app should automatically navigate the user to that same item review.

Setting the name attribute to "msApplication-Arguments" in the meta tag enables this. The content attribute 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 Windows Store app using JavaScript:

Conclusion

Internet Explorer lets users discover and experience the web through associated Windows Store apps. It enables you as a web developer to drive your existing site audience to your apps, giving you new opportunities to engage your users with an immersive experience on Windows 8.