deploymentiis-7app-offline.htm

app_offline.htm file does not work


I have been battling with this for ages now but I just can not get it to work.

Every blog/site I have been too says there is nothing you need to do in IIS but this cannot be correct as there are multiple website configurations such as Application, virtual directory, simple php/asp websites, vitual.

Can someone please explain to me what the setup needs to look like in IIS7.

I have:

I have multiple websites set up that I have tested with, namely:

All of the above are working, and placing the app_offline.htm does absolutely nothing.

Please can someone provide some clarity.


Solution

  • So I never did find a solution to this problem but I did find an alternative to what I was trying to achieve.

    Basically, I wanted to show a specific "offline" page per app which would show when the site was offline. Here is what I did...

    I created a website I called "_offline" in IIS. I then added a generic "catch all" binding for Port: 80 and left the host name blank. You may need to disable your current default website before this binding will be accepted.

    Create an index.html page and put whatever content in there you want to show and shove it as the default page for "_offline". I'll include a bit of script below that works pretty well.

    Now you can test by turning off your website, you should see your new index page. If you can't turn off the website, add a binding in your hosts file to anything like "testdomain.com" and point that to your server. Entering that in your browser should then show your offline page.

    Just bare in mind, this page will show any time your IIS can not find an active website at the address coming in. Depending on your setup, this may or may not be acceptable in which case you should not use this method.

    Now for my index page. I put some javascript in to determine which site the user is trying to reach, then reveal a portion of the html. I also have a countdown that runs and tries to refresh the page every 10 seconds.

    Anyway, not the ideal result, but it works.

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="viewport" content="width = device-width">
    <title>Under Maintenance</title>
    </head>
    <style>
    body{
    color:#014795;
    }
    .container{
    max-width:650px;
    margin:auto;
    font-size:18px;
    font-family:Arial, Helvetica, sans-serif;
    padding:20pt;
    text-align:center	
    }
    #logo img {
    max-width:100%;
    }
    a {
    color: inherit;
    text-decoration: none;
    }
    a:hover {
    color: inherit;
    text-decoration: none;
    }
    </style>
    <body>
    <table class="container">
    <tr>
    	<td>
    		<span id="logo"></span>
    		<p>This site is currently under maintenance and will be available shortly.</p>
    		<p>We apologize for any inconvenience caused.</p>
    			<table  style="text-align:left;margin:auto;">
    				<tr><td>Telephone:</td><td><a href="tel:+27111111111">+27 11 11 1111</a></td></tr>
    				<tr><td>Fax:</td><td>+27 11 111 2222</td></tr>
    				<tr><td>Email:</td><td><a href="mailto:support@fubar.com">support@fubar.com</a></td></tr>
    			</table>
    			<p>We will automatically try to reconnect you in <span id="timeleft"></span> seconds</p>
    	</td>
    </tr>
    </table>
    <script type="text/javascript">
    var refreshEvery = 10;
    var currentSec = 0;
    
    var timer = setInterval(function() {
        currentSec++;
        if (currentSec >= refreshEvery) {
            clearInterval(timer);
            location.reload();
        }
    
        document.getElementById("timeleft").innerHTML = "" + (refreshEvery - currentSec);
    }, 1000)
    
    document.getElementById("timeleft").innerHTML = "" + (refreshEvery - currentSec);
    
    // Use this site to create a base64 image http://www.base64-image.de/step-1.php
    if (document.domain.indexOf("stacksnippets") >= 0) {
        // Cusomise the site here, you can also show hide html content.
    
    	document.body.style.backgroundColor = "black";
    	document.body.style.color = "white";
    } else {
    	// put default stuff here
    }
    </script>
    </body>
    </html>