A few weeks back, Jonathan Sampson noted that testing the HTML5 AppCache feature is a bit of a pain. One reason is that, in IE10, putting the browser into Work Offline mode is ineffective—the browser will detect that a network connection is available and exit the Work Offline mode automatically. Jonathan wondered whether Fiddler could help him test his HTML5 cache manifest, and I’m happy to say that, yes, Fiddler is quite useful for this sort of testing.

Background on AppCache

First, let’s start with some background. HTML5 introduces the concept of an AppCache, which allows web authors to declare, via a simple manifest file, which resources are a part of their web application. This manifest can specify which resources should be retrieved from the Cache and which resources should always come from the Network. A Fallback section of the manifest allows the specification of resource which should be displayed when a referenced resource fails to display due to a network error or when the client is offline. The browser downloads the manifest when downloading the HTML of the application, parses it, and caches the files it specifies using the rules provided.

Generating AppCache Manifests

Nearly 18 months ago, I announced that Fiddler now includes an AppCache Manifest generator which makes it simple for developers to generate a manifest based on the traffic captured by Fiddler. It’s as simple as selecting the resources in Fiddler’s Web Sessions list, then choosing File > Export > Selected Sessions > HTML5 AppCache Manifest. If you’re interested in more details, please go check out my post on that topic.

Testing your AppCache Manifest

Once you’ve built and deployed your manifest, you’ll want to make sure that it works like you expect. Jonathan observed that testing the Fallback sections of the manifest might be a hassle. There’s no obvious way to test the fallback behavior, short of pulling your desktop’s network cable or putting your notebook in Airplane mode.

However, it turns out that Fiddler’s AutoResponder is perfect for testing the behavior of the AppCache. Fiddler allows you to test fallback sections easily, without taking your computer offline.

The Demo

I built a trivial HTML5 AppCache demo page, which you can visit in any modern browser, including IE10, Chrome 24, or Firefox 18. It contains four images:

The manifest lists the first image in the CACHE section, the second in the NETWORK section, and the 3rd in the FALLBACK section. The final image isn’t referenced directly in the manifest. The HTML page containing the images is implicitly a part of the CACHE section of the manifest, which means that our application is now available offline.

    CACHE MANIFEST

    CACHE:
    cached.aspx

    NETWORK:
    network.aspx

    FALLBACK:   
    / fallback.aspx

Each image file is delivered with a HTTP Cache-Control: no-cache header to ensure that we’re testing just AppCache itself and not relying on the browser’s default cache behaviors.

After visiting the application once in my browser, I have “primed” the AppCache and made the application available for offline use.

To test the fallback code, I simply configure Fiddler’s AutoResponder to block access to the resources within the application by creating a simple rule:

This rule can be read as “If the request URL contains webdbg.com/test/appcache/ then respond by closing the connection using a TCP/IP FIN.”

Using *drop will close the connection using a TCP/IP FIN while using *reset will kill the connection using a TCP/IP RST. Alternatively, you may choose to return a 403, 404, or 502 response; all of these result in a “failed download” that triggers the fallback behavior.

With this rule in place, re-opening the browser to the target application seamlessly switches over to the offline experience:

As you can see, the second image is missing (showing the broken image icon) because it could not be downloaded and its URL is listed in the NETWORK section of the AppCache manifest.

The 4th image (which was not explicitly listed in the manifest) has been replaced with the fallback image from the AppCache.

You will find that the behavior you’ve just simulated with Fiddler matches what would happen if you’d disabled your network connection. The benefit of using Fiddler is that you can easily and selectively simulate downtime for specific websites or applications, without the hassle of disabling your network entirely.