I created an app_offline.htm page to place in my site’s folder while I was deploying a new version, but I didn’t want to put a ‘click this link to refresh’ or a suggestion to refresh the page. That seemed to be pushing my problem onto the user.

I decided that jQuery would probably be the way to go, and so added a reference to Google’s latest version of jQuery 1.x (we supposrt IE7 and jQuery 2.x is IE9+):

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>

Research

I did some googling and found an article on GitHub by Dunston. He had created an app_offline.htm page for his deployment that used jQuery to check, every 10 seconds, if the site was back up.

My Code

For my purposes I had to make a few tweaks, but this is what I came up with:

<script type="text/javascript">
   $(document).ready(function () {
      $("#year").text((new Date).getFullYear());
      if (window.location.protocol != "https:") 
      { 
         window.location.href = "https:" + window.location.href.substring(window.location.protocol.length); 
      }
   });
   (function ($, win){
      $(function (){
         var checkSite = function (){
            $.get('/').success(function (){
               win.location.reload(true);
            }).error(function (){
            });
         }
         win.setInterval($.proxy(checkSite, this), 10000);
      });
   } (jQuery, window));
</script>

What it does

When the page loads it:

• updates the year in a copyright statement to the current year
• checks if the current location protocol is https (which my site runs under), and if not redirects to the same url but with the https protocol

Every 10 seconds it:

• checks to see if the root of the site is available (if the app_offline.htm file is still there it will fail, otherwise it will be a success)
• on success the window reloads, and the site will load (the original url that was used)
• on error nothing happens until another 10 seconds has passed

Why the redirect to https?

My site runs completely under https and all users should be coming in using the https protocol, but if they don’t they are automatically redirected to https. This means that if the above script checks to see if the site is available under http (and the app_offline.htm file has been removed) it will receive a redirect to https, which it sees as a failure. It will therefore never try to refresh the window as it will always think the site is down.

I first tried forcing the url that was checked to be https, but this caused an error:

XMLHttpRequest cannot load https://www.mysite.com/ Origin http://www.mysite.com/ is not allowed by Access-Control-Allow-Origin.

So I couldn’t make an https request when the current page (app_offline.htm) had been requested by http. A good security feature I suppose.

This is why I had to check the protocol on page load and then redirect to https if necessary. The jQuery then automatically checks for the https version of the site as the app_offline.htm page was loaded with this protocol. The check is allowed by the server AND no redirect is returned (as with an http request) so when the app_offline.htm page is removed the page refreshes.

No further user interaction required; they can make a cup of tea.