Offline web applications with HTML5

The Rapid Apps team builds its apps using HTML5 as we believe this is the quickest way for us to create and release apps that can be used on any device without the need for lots of bespoking for each of the platforms that are out there. One of the key things needed with an app is the ability for it to work offline using  a manifest. Here’s how we do that.

When working with an HTML5 web app that you want to run offline you will need to rebuild the manifest (over and over and over) whenever you make changes to the code so that your browser knows it has changed and you can test/use it. This is a pain, so we have created this nice little console app that you can run in the background and it will keep the file up to date for you.

Download the manifest generator

How do I make a web app cachable I hear you ask?

To make a web app cachable, you first need to tweak the markup.

In the <html> element you need to add a manifest attribute that points to your appcache file.

e.g.

<html manifest=”fymp.appcache” xmlns=”http://www.w3.org/1999/xhtml”>

The appcache file needs to be served by IIS as type text/cache-manifest, so you’ll need to tweak your web.config file. In system.webServer add a staticContent element and then a mimemap for the file extension. ALWAYS remember to put a remove element in first incase the server hosting your app is already configured to serve appcache files, otherwise it will fail miserably as you can’t have the same mimeMap twice.

e.g.

<system.webServer>
    <staticContent>  
      <remove fileExtension=”.appcache”/>
      <mimeMap fileExtension=”.appcache” mimeType=”text/cache-manifest” />
    </staticContent>
</system.webServer>

The appcache file should be called {application name}.appcache and live in the root folder, where the index.html page is kept. In addition to this, you also need to create a file called AppCacheExclude.txt which lists out the files/folders you don’t want to put in the cache (e.g. any visual studio files, web.configs and the like). An example of the contents of an AppCacheExclude.txt file is shown below.

AppCacheExclude.txt
mycache.appcache
MyApp.csproj
MyApp.csproj.user
MyApp.sln
MyApp.v12.suo
Web.config
bin\*
obj\*
Properties\*
.svn\*

Using a * means all files/folders in the folder specified. You must include this or it will fall over and die on you horribly. It is also, obviously, crucial you don’t cache the exclude or the appcache file.

With all the above done, simply run the console app, tell it where to monitor and off you go. When you are done coding the manifest file can be checked back in to source control so CI tools can pick them up, deploy them, and then all the consumers of your app will seamlessly receive the changes!

If you are really interested (and I know you are) you can get the source code here

Matt Stutely

About Matt Stutely

Dev manager/scrum master/tech lead of the Parliamentary rapid apps team. Trying hard to get development done a little bit better with every passing sprint!