app_offline.htm file does not work

Question 1

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>

Question 2

I recently had the same issue with the app_offline file and the real problem I had was that windows was set to hide known file extensions. So when the file app_offline.htm was created I thought that the name was correct, but windows was hiding the extension .txt.

Question 3

Create a web.config file with following content

<?xml version="1.0"?>
<configuration>
    <system.webServer>
        <modules runAllManagedModulesForAllRequests="true" />
    </system.webServer>
</configuration>

Hope that helps.

Question 4

I was also struggling a little bit with this issue.

Along with the fore-mentioned criteria in the other answers. It turns out that the file type MUST be specified specifically .htm NOT .html.

Question 5

I had the same issue, and although I couldn't solve it, I found a reasonable workaround. I added the same file, but named "appoffline.htm" to the root directory and leave it there permanently.

When I need to take application offline, I use the IIS HTTP Redirection setting for the website to redirect all incoming requests to appoffline.htm (make sure to tick "Redirect all requests to exact destination").

Question 6

Try to start out with a fresh and simple app_offline.htm file, like

<html><body>offline</body></html>

to see if that fixes the problem. In my case the problem was that the file encoding of the app_offline.htm file was "UTF-8 with BOM" rather than plain UTF-8.

Question 7

The following handler also needs to be present:

ExtensionlessUrlHandler-Integrated-4.0

Question 8

Make sure that in IIS Manager, on the website's Properties, the Application name has been created. Properties > Directory > Application settings > Application name. Tested in IIS V6.0