Using the appcache

If you want to use a manifest file to give your users a better offline experience, you have to modify the manifest a little bit in order to work properly with FIT.

Example appcache

Your example.appcache may look like:

CACHE MANIFEST
# 2015-05-17:v1

CACHE:
index.html
style/styles.css
script/main.js
img/logo.webp

and the reference in the html output like:

<!DOCTYPE html>
<html manifest="example.appcache">
  <head>
    <meta charset="utf-8">
    <title>Appcache</title>
    <link rel="stylesheet" href="style/styles.css">
    <script type="text/javascript" src="script/main.js"></script>
    <body>
    <h1>This site uses offline application cache, if available!</h1>
    </body>
</html>

Step 1: Rewriting the URLs

You have to use URLRewriting to ensure correct paths:

CACHE MANIFEST
# 2015-05-17:v1

CACHE:
# index is a special case as the calling file is automatically cached.
/*!ai-rewriteurl */index.html/*!ai-end*/
/*!ai-rewriteurl ai-url-role="css" */style/styles.css/*!ai-end*/
/*!ai-rewriteurl ai-url-role="js" */script/main.js/*!ai-end*/
img/logo.webp

Step 2: Preparing the image(s)

You may want to use Images Scaling for the image(s) in your manifest:

CACHE MANIFEST
# 2015-05-17:v1

CACHE:
/*!ai-rewriteurl */index.html/*!ai-end*/
/*!ai-rewriteurl ai-url-role="css" */style/styles.css/*!ai-end*/
/*!ai-rewriteurl ai-url-role="js" */script/main.js/*!ai-end*/
/*!ai-rewriteimage ai-scaling-width="50%" ai-quality="50" */img/logo.webp/*!ai-end*/

Example output

This is how your manifest may look like:

CACHE MANIFEST
# 2015-05-17:v1

CACHE:
/dev/test/
/dev/test/;m=css/style/styles.css
/dev/test/;m=js/script/main.js
/dev/test/;m=is;f=webp;k=15-4HMdiB8xjIp3MagDATQ;mw=600;q=44/img/logo.webp