Monday, April 6, 2015

AngularJS: issue with progressbar on IE 11

AngularJS v1.3.14
UI Bootstrap 0.12.1

I used AngularJS UI Bootstrap to display a progress bar in my Web app. It works fine in Firefox and Chrome. But on IE 11, the progress is not getting updated. The weird part is that, if I enable the developer tools in IE, then the progress bar works as expected.

A quick search led me to this article which describe the exact same issue, but for IE 10. It was reported back in 2013, and it has been fixed in a newer version of UI Bootstrap. Then I checked the Internet Explorer Compatibility but I didn't find anything relevant. The progress bar demo on UI Bootstrap site is working fine as well.

My next thought was that, perhaps I should detect and add special handling just for IE 11 until I have more time to investigate the root cause. So I started to look for ways to detect IE 11, and the most common practice seems to be using conditional comments. Unfortunately, it does not work with IE 11. It turns out conditional comments are no longer supported since IE 10.

While I was struggling with IE, I noticed something weird. The way my Web app works is that, it polls a .json file through $http.get() to update the progress every 250ms. But looking at the server logs, only 1 GET request was made, which explains why the progress is not getting updated. It suggested that IE is being "smart" and caching the .json response. Searching online, it looks like other people ran into the same issue as well.

In my case, I used Node.js to run the server. I was able to resolve the issue by setting the following headers in my json response:
response.writeHead(200, {"Content-Type": "application/json",
                                     "Cache-Control": "no-cache, no-store, must-revalidate",
                                     "Pragma": "no-cache",
                                     "Expires": 0});

No comments: