How to host HTML5 Offline Web applications on an IIS web server

Posted by . (4 comments)

Introduction

By providing a manifest file to the browser, you can specify which files should be available for offline usage, which files always have to be fetched form the internet and you can define fallback resources (what to use when the online ressources are not available).

This is not only good for Offline Applications, you can also speed up live websites with this technique. (See “Tip 5: Use cache manifest for live sites, not just offline apps” on HTML5 Rocks)

Short example:

In your HTML file, specify the manifest file: <html manifest="myapplication.appcache">

Sample content of a manifest file:

CACHE MANIFEST
# Revision 1
# These files will be cached for offline usage,
# also if they are not otherwise linked or used by the current document 

CACHE:
index.html
css/default.css
images/logo.png
scripts/main.js

# These resources require online connection and will never be cached
NETWORK:

http://your.sharepoint.server/_vti_bin/ListData.svc


http://api.twitter.com

# profile-placeholder.png will be served in place of all images
# from the Gravatar service
FALLBACK:

http://www.gravatar.com/avatar/

img/profile-placeholder.png

For this technique to work with files hosted on Microsoft Internet Information Services (IIS) you have to teach the old server new tricks.

What to configure in IIS: MIME Type

The manifest file hast to be served with the mime type “text/cache-manifest“, otherwise the browsers will ignore it.

You can add a new mime type to IIS via the UI, command line, configuration files or WMI. (See documentation “Add a MIME Type“ on MSDN)

When you’re done, it should look sth. like this:

Screenshot: IIS settings for MIME type Screenshot: IIS settings for MIME type

You will find older examples on the net, where it says, that your manifest file should be called “cache.manifest“. Unfortunately, “.manifest” is already used by Microsoft, so the new recommendation is to use “.appcache“. (see HTML5 tracker, rev. 5812)

What else to configure in IIS: Control expiration of your files

You might want to adjust your settings so you are sure that the browser always gets the current manifest file. Otherwise you have no control over when the Offline Web application will be updated on the client.

You can configure this via UI, command line, configuration file or WMI.
(See documentation “Configure the HTTP Expires Response Header” on MSDN)

By the way: If you are running your web applications on an Apache web server, you might want to have a look at the pre-configured .htaccess file that comes with the HTML5 Mobile Boilerplate.

Want to learn more?

4 Responses to “How to host HTML5 Offline Web applications on an IIS web server”

Leave a Reply

  • (will not be published)