One of the most common gotchas when you're trying to deploy your Windows 8 Metro* HTML app to the Windows Store, is that the application does not support SnapView. In case you're not familiar with SnapView, it is the mode where your app is "snapped" to a side window while another app is in use in the main FillView window.
There are easy ways to implement this in Windows 8, but one striking things about the width of our SnapView window is the fact that it is 320 pixels wide, which happens to be the standard screen width of many mobile devices in portrait mode.
So if we have an existing web application that is "mobile-friendly" - meaning we've used Responsive Design and CSS Media Queries to ensure it will adapt to whatever environment it is being viewed in - this HTML code is not only portable into Windows 8, it also satisfies the SnapView requirement.
That’s one of the great stories about Windows 8 HTML apps that isn’t really being played up as much as it should – the fact that portability of traditional web applications INTO a Windows 8 HTML project is fairly seamless. As a web developer, one of the things that first impressed me about Windows 8 was the ease of running a traditional HTML application within a default new Metro* HTML project. Even an app that uses jQuery or other JavaScript frameworks.
After merely adding a traditional app’s .html, .css, and .js files to a new, empty Visual Studio 2012 HTML application, the only thing that prevented it from running as a full-screen Windows 8 app was the fact that the references to the WinJS javascript files needed to be added. Once these 3 JavaScript includes were added to the page, the application was instantly running full-screen, like any other Metro* application. Here are the required .js files
Of course, referencing these WinJS-specific files excludes the reuse of this HTML code outside of the Windows 8 environment. But the “portability in” story is still nice – I say this as a web developer who originally came across Windows 8 as part of an experiment in HTML portability.
There are easy ways to implement this in Windows 8, but one striking things about the width of our SnapView window is the fact that it is 320 pixels wide, which happens to be the standard screen width of many mobile devices in portrait mode.
So if we have an existing web application that is "mobile-friendly" - meaning we've used Responsive Design and CSS Media Queries to ensure it will adapt to whatever environment it is being viewed in - this HTML code is not only portable into Windows 8, it also satisfies the SnapView requirement.
That’s one of the great stories about Windows 8 HTML apps that isn’t really being played up as much as it should – the fact that portability of traditional web applications INTO a Windows 8 HTML project is fairly seamless. As a web developer, one of the things that first impressed me about Windows 8 was the ease of running a traditional HTML application within a default new Metro* HTML project. Even an app that uses jQuery or other JavaScript frameworks.
After merely adding a traditional app’s .html, .css, and .js files to a new, empty Visual Studio 2012 HTML application, the only thing that prevented it from running as a full-screen Windows 8 app was the fact that the references to the WinJS javascript files needed to be added. Once these 3 JavaScript includes were added to the page, the application was instantly running full-screen, like any other Metro* application. Here are the required .js files
<!-- WinJS references --> <script src="//Microsoft.WinJS.1.0/js/base.js"> </script> <script src="//Microsoft.WinJS.1.0/js/ui.js"> </script> <script src="/js/default.js"></script> <link href="//Microsoft.WinJS.1.0/css/ui-dark.css" rel="stylesheet" />
Of course, referencing these WinJS-specific files excludes the reuse of this HTML code outside of the Windows 8 environment. But the “portability in” story is still nice – I say this as a web developer who originally came across Windows 8 as part of an experiment in HTML portability.
*I'll still be using the word Metro until there's an official term for applications that target the WinRT
