Connect your website to your Windows Store app

  • Article

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.

This topic contains the following sections:

  • The user experience
    • Browse for an app
    • Get the app
    • Switch to the app
  • Behind the scenes
    • Essential markup
    • Processing msApplication-Arguments
  • Conclusion
  • Related topics

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.

<meta name="msApplication-ID"content="microsoft.build.App"/>
<meta name="msApplication-PackageFamilyName"content="microsoft.build_8wekyb3d8bbwe"/>

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 app using JavaScript:

// Function available in default.js file in Visual Studio templates provided 
WinJS.Application.onmainwindowactivated = function (e) {
  if (e.detail.kind === Windows.ApplicationModel.Activation.ActivationKind.launch) {
    // Insert this code to handle incoming argument when 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
    }
  }
}

The following fragment could be used in a Windows Store app using C++, C#, or Visual Basic.

// Function available in App.xaml.js file in Visual C# templates provided in Visual Studio
partial class App
{
  protected override void OnLaunched(LaunchActivatedEventArgs args)
  {    
    // Insert this to handle incoming arguments, when 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

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.

For more information, including an instructional video, see the post titled Connect Your Web Site to Your Windows 8 App on the IEBlog.

Creating a link to your app

Windows 8 Integration

Internet Explorer 10 Guide for Developers