About WAT

Guidelines, best practices and technical qualifications for Web App Template solutions

The Web App Template (WAT) template is a great tool for creating Windows apps based on existing web content. Used in the right way, WAT can facilitate the creation of compelling extensions to your web content for Windows users. However, there are several guidelines and best practices to get the best use from WAT.

What does WAT do?

The WAT is a Visual Studio 2013 template that lets developers create Windows apps based on existing web content.

Web content is rendered via a Web Control and extended with native Windows features including:

  • Navigation Bars
  • App Bars
  • Share Charm integration
  • Setting Charm integration
  • Search Charm integration
  • Live Tiles & Notifications

As well as adding several native features to the web content, WAT also allows developers control and customise the web content itself by capturing, redirecting and showing messages for specific URLs within the web content and controlling the style of the web content to include hiding specified CSS selectors, injecting custom style and mandating viewport dimensions.

Which version?

Right now, there are two different versions of WAT which represent the various versions of Windows and Windows Phone in the marketplace. Where possible, you should use the Universal app template as this creates a Windows Universal App which is the best format going forwards as it applies to Windows 8.1 and Windows Phone 8.1. However if you need to launch to an existing user base of Windows Phone 8.0 users, then you should also consider the Windows Phone 8.0 (Silverlight) app template.

WAT Template Target Operating systems
Universal Windows 8.1 and Windows Phone 8.1
Windows Phone Silverlight Windows Phone 8.0

Guidelines for using WAT

To get the best out of WAT, there are guidelines on what you should and should not do in your web content.

You should

  • Take advantage of Windows app capabilities. Use at least one of features listed in the 'What does WAT do' section to differentiate your app from the web content
  • Segment your web content and using links to other sites. Take advantage of the WAT URL redirects to open links to URLs outside the app in the browser
  • Fully support touch interactions, and multi-touch if possible
  • Use responsive design principles to support multiple screen sizes and orientations from 320px wide upwards. Bootstrap is an excellent, well support responsive framework. Bootstraps was used for this site and provides the default framework for new web applications in Visual Studio 2013.
  • Where appropriate, embrace the UX guidelines for Windows Store apps in your web content.
  • Be the owner of the web property you are using as the core of your app
  • Provide custom images for each of the tile sizes, and splash screen
  • Deliver your web content via https to take advantage of advanced caching in the WAT.

You should not

  • Wrap a web site/app for which you are not the owner or administrator
  • Display webpages containing plug-ins such as Adobe Flash or Microsoft Silverlight with no fall-back experience. Plugins are not supported in the app environment.
  • Duplicate Navigation in both the NavBar and the web content. Use the Styles section of the Json config file to add CSS overrides and hide sections of HTML

Store Certification Policy

All Windows apps must go through a strict store certification process which tests that the app complies with the Windows 8 app certification requirements before being available in the store.

Traditionally, hybrid apps have struggled to pass these requirements. However if WAT is used, it will help in the following key areas:

  • Apps should be able to detect an offline state and clearly message that state to the user
  • Apps should be able to recover automatically from loss of Internet connectivity
  • Support snap views and multiple screen resolutions
  • Support touch interactions
  • Support correct url redirect
  • Apps should take advantage of the capabilities of the platform and not just wrap around existing websites (at least one of app bar, share/search contract, live tile notifications)
  • Provide value to user (even if “same” value of website)
  • Provide custom icons and splash screen images (apps using default images will be rejected from store)
  • Should not provide a webview of a website that is not owned or administered by you

Examples

There are several apps already in the Windows store based on WAT: