I want to cache javascript libraries and other static assets - but no HTML whatsoever.
I was under the impression
CACHE MANIFEST
somefiles.js
somemorefiles.js
NETWORK:
*
Would do the job. It caches the html anyway. Please advise.
The HTML page containing the reference to the cache manifest is always added to the cache. See the specs.
Note: Authors are encouraged to include the main page in the manifest also,
but in practice the page that referenced the manifest is automatically
cached even if it isn't explicitly mentioned.
You can create a hidden iframe with a reference to page with a manifest. Then remove the manifest from your HTML page that you don't want to be cached.
Related
I want to cache only a few files like JavaScript and CSS, font files and image sprites.
Is it better to add a manifest file for the files or should I let the browser do the cache?
If it's better with manifest, can I still leave the pages inaccessible if a user has no network connection? How?
I don't want this website to work offline, I just want a faster page load on secondary pages.
No, the page you use to reference the manifest file will itself always be cached. See:
HTML5 cache downloads root everytime
HTML5 cache manifest no cache for html file itself
So you will always have at least one page which is available offline. However this can be a page which is otherwise not normally accessed, and you can reference it in an iframe from your online pages.
I have got a HTML manifest with the lines:
CACHE MANIFEST
images/foo.png
Also, the page includes e.g. jQuery and many other ressources. All of them are not loaded, except the ones named in the manifest (here: images/foo.png). How can i tell the browser to load all files but the ones explicitly defined in the manifest?
Thanks
HTML5 Cache Manifest: Fallback section & Network *
see the NETWORK piece, which prevents caching (also helpful in managing dynamic pages like PHP, etc)
I want to use html5 manifest file. To cache the mose important things of the website. I have make a manifest file and cache the most important things. I cache the important images that are used in all the pages. And i cached the css file. But this is going broken.
This is my manifest file:
CACHE MANIFEST
# VERSION 10
CACHE:
static/img/bg-friends-selection.jpg
static/img/bg-home.jpg
static/img/bg-selection.jpg
static/img/logo.png
static/css/style.css
But now the problem. When i open the page. The first time it's good. But when i open the page for the second time. The images and items that i not cached. Are not loaded. How can i fix that.
Here you have a live link
The live link site doesn't specify a manifest attribute in the <html> tag. You need to point your document at the manifest so it knows what to cache.
In any event, you probably want this at the bottom of your manifest file:
NETWORK:
*
See HTML5 cache manifest: whitelisting ALL remote resources? for more information.
I'm reading through details on HTML5's app cache manifest (especially from this excellent article). I'm curious if this idea would work:
We host all of our static resources (scripts, css, fonts, images) on a CDN within a subdomain (e.g. cdn.example.com and app is on www.example.com). Is it possible to host the app cache manifest on the CDN as well? For example,
<!doctype html>
<html manifest="http://cdn.example.com/appcache.manifest">
...
<script src="http://cdn.example.com/foo.js"></script>
...
</html>
If yes, can the manifest listings be from the CDN root? For example, in the manifest:
CACHE MANIFEST
/foo.js
Does anyone have any experience with this and/or know of any caveats?
EDIT: The working draft of the WHATWG spec it says "Offline application cache manifests can use absolute paths or even absolute URLs" and then shows an example with CDN URLs for images.
I tested with my manifest (in real example)
CACHE MANIFEST
# 2010-06-20:v1
iscroll.js
http://peach.blender.org/wp-content/uploads/big_big_buck_bunny.jpg
It works to me... You can check you manifest with validator http://manifest-validator.com/.
W3C only says the document (HTML file that have manifest attribute) must be same origin source with the manifest, they don't tell URL of resources must be too... You should read it carefully (at here). I also found the cross-site URL in W3 example (check here), that means it works correctly...
Finally, DON'T TRY TO PUT MANIFEST FILES ON CDN, JUST PUT IT IN YOUR SERVER AND LINK RESOURCE TO CDN. Manifest files have to have the same origin as their master entries, which includes their HTML files, and the browser checks the manifest file to see if its list of HTML pages has changed, rather than checking your HTML page to see if it points to a different manifest file.
The cached contents must satisfy the same origin restriction and the origin for comparison is determined by the calling page (the HTML page). If all of the resources you are trying to cache have a different host name then according to the spec they should be rejected. So even if you could specify the manifest to be on the cdn and not your main host, the caching should fail.
index.php:
<html manifest="/cache.manifest">
cache.manifest
CACHE MANIFEST
CACHE:
/img.png
FALLBACK:
/ /offline.html
NETWORK:
*
Everything works great, except that the index.php file itself is fetched to cache (tested in chrome). Can I disable caching for the file specifying the manifest so that only the img.png is cached?
Thanks
No, the file which references the manifest is always itself cached. From the spec:
The resource that declares the manifest (with the manifest attribute) will always get taken from the cache, whether it is listed in the cache or not, even if it is listed in an online whitelist namespace.
I had the same problem.
I used an iframe to load a page called 'go_offline.html'
this page has the manifest attribute on the html element and some dummy content.
the iframe is hidden using css
this way only the dummy page is cached and all requests are caught by the fallback page in the .manifest file
I have tried the iframe work around, and find it ripe with errors. Most browsers cache the data for the iframe where the page cannot get it.
Instead make the page's content load via AJAX. Basically have a blank html page with the manifest and javascript which pulls and adds its content from the server. This way only the blank html is cached, and content is always updated from the server.
Converting a page to this method can be very difficult, but it works. Making sure the appropriate javascript gets run at the correct time, probably requires some detangling. Moving around server code which won't be called when pulling from cache to the new ajax method.
Note: no need to pull conditional content from the server if the condition is in the query string, different query strings make a separate cache