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.
Related
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 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.
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 trying to get a simple html5 webcache to work.
This is my one and only html page, index.html:
<!DOCTYPE HTML>
<html manifest="./main.manifest">
<body>
<p>Hi.</p>
</body>
</html>
This is my only cache file, main.manifest:
CACHE MANIFEST
# 2011-05-02-03
index.html
I'm running on apache shared hosting, I put a .htaccess file in my web directory where these other two files are, because I thought maybe I have to define the mime type:
AddType text/cache-manifest .manifest
So in the end I just have these three files in that directory:
index.html
main.manifest
.htaccess
When I visit the page on chrome from my mac, safari from my iphone, or chrome from my android 2.3 device, nothing happens, the page just loads as usual. If I turn airplane mode on (killing all connections) the page can't be loaded (so I guess caching failed).
What am I missing here?
Thanks
------------ Update ------------------
I think the mime type was not being recognized correctly. I updated .htaccess to:
AddType text/cache-manifest manifest
Now if I run in google chrome with console on, I see:
Document was loaded from Application Cache with manifest
http://example.com/foo/main.manifest
Application Cache Checking event
Application Cache NoUpdate event
Firefox prompts me when I load the page about the website wanting to let me store it to disk, so that's good. Looks like it's also working on android 2.3.4. The browser still says "This page cannot be loaded because you are not connected to the internet", but then it loads anyway.
Thanks!
First, you were right the first time on your mime type declaration. It should be like this:
AddType text/cache-manifest .manifest
Next, read this paragraph from Dive Into HTML5:
Q: Do I need to list my HTML pages in my cache manifest?
A: Yes and no. If your entire web application is contained in a single
page, just make sure that page points to the cache manifest using the
manifest attribute. When you navigate to an HTML page with a manifest
attribute, the page itself is assumed to be part of the web
application, so you don’t need to list it in the manifest file itself.
However, if your web application spans multiple pages, you should list
all of the HTML pages in the manifest file, otherwise the browser
would not know that there are other HTML pages that need to be
downloaded and cached.
So, in this case, you don't need a cache manifest. The browser will automatically cache your page (as long as it's the only resource, such as a CSS file or Javascript file, for example).
For more information, visit the link above.
I have had some trouble using "explicitly cached" items in my manifests, so I usually set it up like this:
CACHE MANIFEST
# 2011-05-02-03
CACHE:
index.html
But the other answer is correct, the browser will automatically cache any URLs that include an application cache manifest.
I recommend using Chrome's JavaScript Console -- it outputs application cache events as they are happening, including errors.
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