My HTML5 Application Cache Manifest is caching everything

Asked 15/2, 2012 at 2:17 Answered 16/8, 2013 at 12:52

Solved manifest cache-manifest html5-appcache manifest.cache

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!

Irvingirwin answered 15/2, 2012 at 2:17 Comment(0)

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>

Irvingirwin answered 15/2, 2012 at 3:48 Comment(8)

I understand that, my point was that: how do you use and introduce the application cache to the browser without including the main html page itself... if that makes any sense. – Irvingirwin 13/8, 2012 at 21:28

@Irvingirwin you could serve the main page, which you don't want cached, with the "no-store" cache directive. – Atwater 16/10, 2012 at 14:35

Are you able to provide a link to a working example? This doesnt work for me, I can see the appcache init log messages but my JS and CSS are still being loaded despite the cache. – Mindi 29/1, 2013 at 6:11

@Mindi perhaps to JS and CSS have a no-cache header? Do you see the JS and CSS files in the list when it is initializing? Chrome displays the whole list in the console. Did you list these files in the appcache.manifest files? – Irvingirwin 30/1, 2013 at 23:2

@Atwater That seems like a great work around too I will play around with that to see if it overrides the appcache in all cases and browsers. – Irvingirwin 30/1, 2013 at 23:5

Sorry, but with this hack app cache works only within that iframe. At least for me. – Childbirth 7/5, 2013 at 15:33

@Childbirth yes this is a hack for when you don't want the HTML of your page to be cached but static files and content, back when I wrote this question I was using the app cache for the wrong reasons, this was my method of caching everything without defining cache in HTTP headers. – Irvingirwin 28/5, 2013 at 23:11

Yes it seems the implementation of this has changed since, at the time I wrote this Chrome did load the files from cache. – Irvingirwin 26/8, 2013 at 20:47

The appcache always contains the page that contains the manifest attribute in the html tag.

If you want that page itself to be dynamic, you must load content into it with an ajax call to a service that is in the NETWORK section.

Ringside answered 8/5, 2012 at 21:34 Comment(2)

+1 this is a better method. When I wrote this question the app cache was new and many people including myself used it for a quick cache solution without having to deal with HTTP headers, I still think it could be used that way as a hack if fully understood, what you are suggesting is the right way to use this technology, my answer is how to use it as a hack for caching static content, on a dynamic page that is noy fully ajaxified. – Irvingirwin 28/5, 2013 at 23:14

@Joeri it would still save that page in appcache so it doesn't work if you have many routes (e.g. domain.com/userId ). – Hujsak 25/12, 2013 at 10:24

I guess the Iframe-workaround doesn't work. If you think the files are loaeded from appcache: no. they're coming from browser cache.

disable browsercache in devtools-settings und look at "network". you can see, that all elements will be loaded via network and don't come frome (app)cache.

Beriosova answered 16/8, 2013 at 12:52 Comment(2)

Then you must have not specified the files in your appcache manifest. Do you see the init log? – Irvingirwin 26/8, 2013 at 20:50

Yes. I set no-cache to the js and css, and then find that all of them are 200 from server, NOT from cache!! – Ticknor 27/1, 2017 at 7:37

Recommended topics

Hot tags