HTML5 introduces the concept of an Application Cache, which allows a web developer to provide a manifest of pages that should be cached to permit offline use. You can see an instance of AppCache over on the IETestDrive site; if you examine the markup, you can find that the HTML tag contains a manifest attribute which specifies the URI of the AppCache manifest.

image

The Manifest specifies which resources the browser should download into the AppCache and which should always be retrieved from the network. You can learn more about AppCache from numerous online resources; a few of those include:

Manifests are simply text files and you can create them with your text editor of choice. However, this process can be somewhat tedious and begs for an automated solution.

Fiddler includes a pluggable import/export architecture that makes it easy to export sessions from Fiddler into any format you can imagine. Yesterday, I decided to add an AppCache Manifest exporter, which you can find in Fiddler v2.3.6.2. Fiddler’s new HTML5 AppCache Manifest Exporter makes the process of generating a manifest a straightforward exercise:

1. Clear your browser cache.

2. Start Fiddler.

3. Load your website in the browser.

4. In Fiddler, click File > Export > All Sessions.

5. In the format selection dialog box, pick HTML5 AppCache Manifest
image

6. Click Next. In the Adjust AppCache Manifest box, check any resources that you wish to exclude from the CACHE section of the Manifest; those will be added to the NETWORK section of the manifest:
image

7. If you’d like, use the text box at the bottom to specify a Base URL if you would like the URLs to be relative to the manifest. For instance, in the example above, I will place the manifest in the folder http://ie.microsoft.com/testdrive, so I will use that as a base URL.

8. Click the Save button to generate and display the manifest.
image

9. If you’re happy with the manifest, save it to your web server in the appropriate location. Ensure that your web server is configured to return the Manifest file type with Content-Type: text/cache-manifest

10. In your web page, ensure that your page will run in Standards mode (e.g. using the HTML5 doctype) and add the manifest attribute pointing to your application’s manifest.

image

Do keep in mind that when the browser is using App-Cached content, those resources will be reused from the cache and not pulled from the network (until the cache is expired). Because the content is cached locally, you will not see requests to re-download that content inside Fiddler. If you wish to use Fiddler to modify such content, you will need to clear your browser’s cache so that the browser is forced to re-download the content from the network on next use.

Please let me know if you encounter any problems with the new AppCache Manifest Exporter. As this is very new code, I’m sure there are a few bugs. :-)

 

Thanks,

Eric Lawrence