What to do to make a responsive and Windows-integrated website on Windows 8.0 and 8.1

September 13, 2013September 13, 2013 nguyenquyhy Leave a comment

IE10 in Windows 8.0 has many nice features that help your website to look more like an app and also function better on touch screen devices. IE11 in Windows 8.1 improve those feature even further.

I have recently continued on one of my beta web app, http://bookmarks.vsoftstudio.com, built mainly to keep interesting URLs from all my devices (including Windows Phone), as well as to test all the amazing JavaScript framework and the new features of Internet Explorer. In IE10 and IE11, there are many new meta tags and APIs being introduced, but I will list some that you should definitely put in all your websites. Those are the ones that are very simple to use and really worth the little time spent.

Be aware that IE11 is still in preview, so those below relating to this version may changed in the future. So if you use them, make sure you re-visit your website after the final version of IE13 have been release to check all the preview features.

Pin tiles

You can pin any site onto your Start Screen from IE10 or IE11 Modern version (or Metro or Immersive as stated in IE11). In IE10, you can tap on the Pin button on the right of the address bar and choose Pin to Start. In IE11, it is slightly different: you will tap on the Favorite button (one with a star) that replaced the Pin button, then pinning the current site.

However, although you can pin basically any site, the pinned tiles will look very ugly if you do not provide some meta tags. IE simply gets the favicon and puts in the center of the tile; the background color is determined automatically by some “smart” algorithm, and the text is the current header of the page. The example below is when I tried to pin flickr.com to my Start Screen from IE11.

In IE10, you can overwrite the default behavior by providing 3 meta tags in your head section: application-name, msapplication-TileColor, msapplication-TileImage. Here is an example from my own page bookmarks.vsoftstudio.com.

The tile image must have the size of 144x144px (I have not tried otherwise), and it should be a transparent PNG since the background will have a little gradient from the top left to the bottom right corner. So now you could have a big logo with your own background color when the users pin your site.

The meta tags in IE10 also work in IE11. However, IE11 supports pinned tile resizing (all the 4 tile sizes of Windows 8.1), so it introduce 4 new meta tags: msapplication-square70x70logo, msapplication-square150x150logo, msapplication-square310x150logo, msapplication-square310x310logo. You may also realize that the sizes of the tile images are now the actual size of the tiles, so the image will cover the whole tile and it will be easier to design an amazing background as well.

In IE10, you can also put a badge icon or number on the bottom right corner. The badge icon will be set in a online XML file and that file will be polled in a defined periodic interval.

In IE11, you can even set a tile template in the XML file, and using multiple files at the same time, so it will look even more like a live tile from a native app.

You can read more on Pinned Tiles, periodic update, jump list, some new JavaScript APIs and see some examples here: http://msdn.microsoft.com/en-us/library/ie/bg183312(v=vs.85).aspx

@-ms-viewport

This one is not really a features, but a new way the Modern version of IE handle the width of the page.

If you have some experience with mobile web design, you may already know the idea of viewport. Basically, viewport will decouple the actual device width (and height)in pixel and the width (and height) that the page is rendered onto, so that a page does not look too small on a high DPI device. So it is like a virtual size of the browser.

The problem occurs when you implement a page with a responsive design and hope that it will look wonderful when you snap IE on the side. You will then quickly realize that all you get is a zoomed out version of the page, which looks awful and does not responsive as well. And you would not experience this in the desktop version of IE.

That problem is caused due to the way IE Modern handles viewport size. Basically, the viewport will be fixed at 1024 in width, no matter what the actual size on screen is. You can check this easily by outputting window.innerWidth by JavaScript (you can type javascript:alert(window.innerWidth) on the address bar).

The solution is to overwrite the default behavior by putting @-ms-viewport into your CSS. The easiest way is to put the below snippet on top of your main CSS file.

@-ms-viewport {
width: device-width;
}

This is basically tell IE to set the viewport size exactly as the pixel size of the browser on screen. Then you can try to snap IE10 or resize IE11 and see the page changes exactly as you have expected (the width will now show as 320px when you snap the page).

You can also put @-ms-viewport inside the @media block, so that each block will correspond to 1 viewport size. More on this here: http://msdn.microsoft.com/en-us/library/ie/hh708740(v=vs.85).aspx.

There’s one catch here! IE10 on Windows Phone will recognize @-ms-viewport and react the same way. It is very stupid and will cause the page’s elements become very small on a Lumia 920 (or any at a similar DPI). You will find the same problem on www.modern.ie as well. It is considered as a bug in IE10 for WP8 (IE9 for WP7 is not affected), but I can confirm that it is not fixed in GDR2 update.

My current solution is to check the user agent string and only add those code when it is not a windows phone 8 (or only add when it is IE metro). I still don’t know how to properly solve this problem, so if you did figure something out, please let me know in the comments below! I could see that www.microsoft.com does not have that problem, but I am not sure how they fix that yet. I guess they use some JavaScript to change the width after the page is loaded.

Even More

There are even more interesting stuffs including Prerender, Prefetch and Flip Ahead that you may want to try on your website. You can see many demoes and documentations at http://ie.microsoft.com/testdrive/!

Commands with Entity Framework’s migration

September 9, 2013September 9, 2013 nguyenquyhy Leave a comment

Supporting for Code-First and Code First Migration are two of many useful features Entity Framework provides us with. However, as far as I know, using Code First Migration still requires us to open the Package Management Console and type in commands. Text commands are very useful when you want to batch or automate them or save them for later use, but they are really painful for inexperienced users.

I found a very good blog post where the guy lists all the necessary commands with Code First Migration with some extra explanation and comments as well. It should be good for anyone who forget some parameters or forget the command get-help.

http://coding.abel.nu/2012/03/ef-migrations-command-reference/

Unfortunately, the blog post does not state how to roll back all the migrations (this is different from re-creating an empty database, especially when EF supports multiple DbContext on one database already). I tried to do that when my database was created in EF6-alpha3, and upgrading to EF6-rc1 required rolling back and removing all migrations created by the alpha version. A quick search on Bing get me the answer I need:

Update-Database -TargetMigration:0

Update-Database -TargetMigration:$InitialDatabase

This one and all the commands in the blog post above should help you to work with Code First Migration in a breeze.

Windows Store and error 0x80080206

September 1, 2013September 1, 2013 nguyenquyhy 18 Comments

Recently I have reinstalled Windows 8.1 on my laptop and had to reinstall all Windows Store apps. The process with Windows Store apps is much easier than reinstalling “legacy” Desktop app. Basically you just have to go to the Store app, right click to open Navigation bar and choose “Your apps” to see all the apps that you have installed on any of your Windows 8 (and 8.1) devices.

You can choose every app you want to reinstall, then press Install button and let the store do the rest.

In Windows 8.1, you can also click on the “placeholder” tiles on your Start Screen (those with the download icon on the bottom right corner). And the app will be downloaded right away. Pretty neat when you want to restore all the app on your old Start Screen.

The experience is definitely much better than reinstalling Desktop apps before except that the Store sometimes throws out error with strange (and useless) error code, preventing you from installing your apps. Many of them usually disappear after you install all the updates after installing Windows. However, one of them remain no matter how much I tried: 0x80080206.

The Journey

So you can skip this and go directly to the next part if you just want to solve the problem, but I will list out everything I have tried, maybe it can help me in the future with another one.

When the Store has some issues, I will first try to reset it by simply call wsreset.exe from an elevated command prompt (right click Start button, choose Command Prompt (Admin) and type in wsreset.exe and enter). Unfortunately this did not solve my problem.

I then try to search for the problem code on the internet. I could not find any working answers for this, but I found out where event logs of the store reside, which was very valuable in this case (for those kind of errors, the event logs usually show much more information about the problem). So you can open Event Viewer, and go to Applications and Services Logs/Microsoft/Windows/AppXDeployment-Server/Microsoft-Windows-AppXDeploymentServer/Operational. Those logs were very details about each step the Store took to install an app (including error logs and information logs as well). So what did it say about my problem? Here are the 2 error logs:

Deployment Stage operation on Package GAMELOFTSA.Asphalt7Heat_1.0.2.1_x64__0pp20fcewvvtj from: (x-windowsupdate://6AEE2A89-893B-4620-96BB-E4DE8F907FBD/45223cd2f4f5e6ed57fd4a1d5e8ad2714b7ceba4) failed with error 0x80080206. See http://go.microsoft.com/fwlink/?LinkId=235160 for help diagnosing app deployment issues.

error 0x80080206: AppX Deployment operation failed. The specific error text for this failure is: Deployment Stage operation on Package GAMELOFTSA.Asphalt7Heat_1.0.2.1_x64__0pp20fcewvvtj from: (x-windowsupdate://6AEE2A89-893B-4620-96BB-E4DE8F907FBD/45223cd2f4f5e6ed57fd4a1d5e8ad2714b7ceba4) failed with error 0x80080206. See http://go.microsoft.com/fwlink/?LinkId=235160 for help diagnosing app deployment issues.

I could not believe why all those information did not show up directly in the Store. It was astonishing that there was a link to troubleshoot the problem, but hidden deep inside a place where the general users could never reach.

Jumping to the link, I saw all the information about the problem including error code (APPX_E_CORRUPT_CONTENT), value (0x80080206) and description (The package contents can’t be read because it’s corrupted), but again, the solution was totally missing!

At least then I could guess that the problem was caused by the corrupted installation files, so I needed to clean this up and try again. I tried to look at several places, including C:ProgramDataMicrosoftWindowsAppRepository and C:Program FilesWindowsApps (you will need to go to security tab of those folder and change the owner to yourself) but the app or the installation file was not there.

And then I tried another suggestion, deleting (or renaming) this folder C:WindowsSoftwareDistribution. This is actually the place where the installation files are stored until the app is installed, however, I could not rename the folder because something was still accessing this. I decided to go inside and rename the folder Download instead (you should close all the running apps, and run wsreset first). Amazingly, the problem was solved! I had to redownload the app, but the installation worked without any hiccup.

The Solution

In brief, the error code 0x80080206 means “The package contents can’t be read because it’s corrupted“. So you can solve this by renaming or deleting the folder C:WindowsSoftwareDistributionDownload. The folder could be locked by some running apps (especially the Store), so you should try in Safe Mode or run wsreset and close the Store completely before trying. You will then have to download all those problematic apps again, but the issue should be away now.

Conclusion

I really think that Microsoft should show up the description of the error directly in the Store instead of a webpage on MSDN. Seeing the description of a problem might not help you to solve the problem, but it is much easier to ask for help in English rather than in mysterious error codes!

Imagine Cup 2013

July 16, 2013July 16, 2013 nguyenquyhy Leave a comment

We came to the competition with a very simple application and then got to the World Wide Final. I did not expect that, but I believed we were worth that place in the top 3 because I believed the judges must have seen what we were trying to achieve: we were trying to make our phones handier and make life simpler; we did not try to just showcase technology. Then I arrived in Russia, super proud of our project. I prepared my presentation before all the judges, not following the scoring criteria, but everything we have imagined on the first day we started the project. Those might not be so innovative or mind-blowing to seize the first prize, but those were the true “value” we want to give people, and I believed those were also what we were all proud of. And I presented almost perfectly (in my opinion only, and comparing to my past presentations) without having to write any notes.

I knew we might not win because we focused more on providing people the best experience with every current technology available at the current time, not creating some futuristic tech like many other participating projects. But I also strongly believed that we could win, if we could make the judges saw what we saw: we did not make the technology or the only app using the technology, we made the app using the technology in the most efficient and thoughtful way.

That was how we won the competition. That was how Saint Petersburg became a new milestone of my life!

Windows Store Protocol to check for app updates

July 7, 2013July 7, 2013 nguyenquyhy Leave a comment

If you have used a Nokia Lumia phone, you may already see how Nokia forces the users to update their apps. They put the blank page with a background image and an Update button right after the splash screen (if there is one); tapping the button will get you to the app’s detail page in Windows Phone Store and you can update the app directly there. On the developer side, to do the same thing, you just have to use the API exposed through MarketplaceDetailTask to jump to that detail page.

The situation seems to be more complicated on Windows 8 with the Windows Store. Unlike the Windows Phone Store, going to the app’s detail page in Windows Store will not show you any update buttons. Instead, you will have to go to Settings charm of the Store, choose App updates and tap on Check for updates. How to do all these steps programmatically from your app (to help your users to quickly update the app)?

I had thought about showing a screen with screenshots telling people to do all the above steps by themselves, but it seemed to be too troublesome for the users. Then I saw an ads on Bing Sport app showing that there was an update in the Store, tapping on the ads jumped us directly to the Check for updates page, which is so nice and convenient! Therefore, I realized the Windows Store must already handle some special kinds of protocols or URL formats for that, and after some times trying, I figured out the magic words:

ms-windows-store:updates

Basically, you will just have to call that URL by a Launcher and the Store will start checking for app’s updates immediately!

Update: I have also checked that URL in Windows 8.1 and can confirm that it still works in the new Store.