Undoubtedly you’ve heard of the app_offline.htm file by now. If you haven’t, you can read more about it on ScottGu’s blog post. This technique has been one of my favorite tricks for many years. From time to time, like all of us, I need to take down a high profile site to apply some “enhancements” and I unfortunately can’t wean users off gracefully. I always feel bad when I publish that file to the server, knowing there could be hundreds of users sitting at, in their mind, an inexcusable system maintenance page.
So what are we to do?
I thought, why not make that experience a little bit friendlier. Why not show them a Flikr slideshow, a YouTube video or maybe a count down of the estimated repair time. Maybe even a screencast of the new features that will be available when the updates are done. The possibilities are endless. So I threw together a simple app_offline.htm that utilizes a little client side scripting to improve the experience.
For my example, which you can view here (be sure to start the video right away to see the full effect), I added a YouTube video for their enjoyment. The app_offline.htm file pings the application every 5 seconds. If the site returns ok (status 200) we pass them on to the application. To help usability, I only redirect them if the video is in a “not started”, “ended” or “cued” state. If the video is playing, I update a message on the page, letting them that the site is back up and they can navigate to it when they are ready.
I also thought it might be nice for this example to pull in a Twitter feed account that is set up for applicaition outages. This way users get an idea of what is going on.
Really the possibilities are endless. Just remember, you’re restricted to resources with the app_offline.htm file or pulled in from another domain. That’s right, no local images or scripts. If you come up with a creative app_offline.htm file, please post a comment and link for others to gain inspiration.