My HTML5 Application Cache Manifest is caching everything

Neo picture Neo · Feb 15, 2012 · Viewed 17.4k times · Source

UPDATE:

** I posted this question when this feature was really new, I realize now that this feature should not be used this way unless it is used via JavaScript. but seems like this hack is a great solution for most beginners who make the same mistake and misuse of this feature. If you want to cache everything except your HTML this should be done with JS or you could use the solution below **

I guess my question boils down to this: If the file referencing the manifest using the manifest attribute of the HTML tag falls under the MASTER CACHE ENTRIES how could you have a dynamic page use the manifest.

My file looks like this:

CACHE MANIFEST

CACHE:
# IMAGES:
/stylesheets/bg.jpg
/stylesheets/cont_bg.png
#and so forth.. 

#EXTERNAL
http://chat.mydomain.com/themes/images/panel_bg.png
http://chat.mydomain.com/themes/images/images_core.png

####################################
#STYLE SHEETS:
/stylesheets/min.css
/stylesheets/css_night.aspx

#####################################
#JAVASCRIPT:
/JAVASCRIPT/header_javascript.js

#EXTERNAL:
http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/jquery-ui.min.js
http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js

FALLBACK:
/ /offline.php

NETWORK:
*

Now the problem is once I browse a page not in the manifest, my actual dynamic php files like index.php, when I first see the page and there in no cache chrome goes:

Adding master entry to Application Cache with manifest http://208.109.248.197/manifest.appcache

Application Cache Downloading event
Application Cache Progress event (0 of 28) 
...
Application Cache Progress event (28 of 28) 
Application Cache NoUpdate event

So far so good until I actually load a page, and chrome goes:

Application Cache UpdateReady event
Adding master entry to Application Cache with manifest http://mydomain.com/manifest.appcache

now as you can see in the last line it adds index.php to my application cache and I have verified this by going to url: chrome://appcache-internals/

It says:

Flags   URL Size (headers and data)
Explicit,   http://mydomain/JAVASCRIPT/header_javascript.js 57.5 kB
Master, http://mydomain/home.php 51.2 kB
Master, http://mydomain/index.php   53.5 kB
Master, Fallback,   http://mydomain/offline.php 49.4 kB

where things like index.php and home.php are not supposed to be cached. I would like to tell it to not cache any html extensions if possible. But here is what I have learned from various RFC I believe: An online whitelist wildcard flag, which is either open or blocking.

The open state indicates that any URL not listed as cached is to be implicitly treated as being in the online whitelist namespaces; the blocking state indicates that URLs not listed explicitly in the manifest are to be treated as unavailable.

well I would like to use one of these online white-list wildcard flags and set it to blocking but I can not find any explanations or examples further more. I also read:

zero or more URLs that form the online whitelist namespaces.

These are used as prefix match patterns, and declare URLs for which the user agent will ignore the application cache, instead fetching them normally (i.e. from the network or locale HTTP cache as appropriate).

I would also like to use some pattern like this but then again I can find no documentation. Why is there no sign of appcache manifest documentation and no other website I've been to is using it , since my chrome appcache directory shows none!?!?

Thank you for your time!

Answer

Neo picture Neo · Feb 15, 2012

Here is a hack I found out by playing around:

I haven't found the ultimate answer but from what I've learned it seems that the manifest is not meant to be set on every page. Again I'm not sure but this is a hack that I came across. I have a page such as manifest.html that has the

<html manifest="manifest.appcache"> 

I learned that pages which do not have this will not be added to the cache however they will still continue using the application cache if on the same domain. Therfore if you include manifest.html a plain html page that has this in an iframe on everypage it will not cache that page like chrome will no longer output:

Adding master entry to Application Cache with manifest 

but if you go to network tab you will see that it is using the cache

<iframe id='manifest_iframe_hack' 
  style='display: none;' 
  src='temporary_manifest_hack.html'>
</iframe> 

content of temporary_manifest_hack.html:

<!DOCTYPE HTML>
<html lang="en" class="no-js" manifest="manifest.appcache">
    <head>
        <meta charset="utf-8">
        <title>Hack 4 Manifest</title>
    </head>
    <body></body>
</html>