The files listed in the .mf file are the same files i am trying to load when the page first runs. Does having a manifest attribute defer processing of the rest of the document until the appcache loads?
No. On the very first load the cache gets built in the background, using the same files that where just downloaded, provided they have proper cache settings. E.g. If you have foo.css with long cache headers in your HTML page and the manifest, the browser will:
Load and render the page.
Look at the manifest.
Load foo.css from browser cache to appcache.
BUT: Appcache will however result in a FOUC (brief white page on reload), even if online and the page/app was made well enough so far to show smooth reloads.
With AppCache, the browser loads the document and its associated resources directly from the cache, without accessing the network, so this should load just as fast if not faster.
Related
My question is rather simple. Is there a way in the cache manifest file (or In the html) to tell iPhone, iPad or other never to cache specific files?
I have a made a small webpage that also works as a web app and there is some of the page that never should be cached.
Yes, you can list the files in the Network section to tell the browser to never save the files.Lines from the book diveintohtml5
The line marked NETWORK: is the beginning of the “online whitelist” section. Resources in this section are never cached and are not available offline.
For device or browser specific manifest, you can not do anything from JavaScript side. You have to do additional server side detection for that.
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 am playing with HTML5 app cache and right from the beginning I ran into issues:/
I am trying to have simple offline fallback for my page so that there would be nice styled page instead of classic offline error. According to few resources I have red I created this manifest file.
CACHE MANIFEST
# 0.01
CACHE:
NETWORK:
*
FALLBACK:
/ /offline.html
The problem is, that the browser loads into the cache not only the offline.html file, but also the root page, which leads into that page is displayed with lot of errors (no js loaded, no imaged loaded, no CSS, ...) while offline and offline.html is completely bypassed by the browser.
The screenshot below shows logged information about caching progress. You can see there, that the browser downloads both files, instead of only the offline.html as I am trying to do.
All this has been done in latest dev Chrome (23.0.1262.0 dev)
The page which references the manifest file is always included in the offline cache. If you don't want the root page to be cached then you need to create a separate static page to reference the manifest and load it in an iframe.
I've been playing around with the cache manifest file and trying to get it to stop caching the page that it's declared on.
From HTML5 Rocks
any page the user navigates to that include a manifest will be implicitly added to the application cache
Ace. I want the manifest file to cache specific artifacts, one of which is an offline version of my online single page app HTML, but NOT to cache the online version.
This is how I solved the problem. My manifest file
CACHE MANIFEST
# Version 0.1
CACHE:
# Minimised Styles
/css/style.0.1.min.css
# Minimised JavaScript
/js/script.0.1.min.js
FALLBACK:
/ /offline.html
NETWORK:
*
Note everything that goes to mydomain.com/ when offline will now go to /offline.html (from cache)
Now, how to cache only what's in the manifest file, without including the online page at mydomain.com/.
Put the following iframe at the bottom of your page at mydomain.com/
<iframe src="/offline.html" style="display: none;"></iframe>
And put manifest="myapp.appcache" in offline.html.
This means when mydomain.com/ is loaded it won't ever get cached (as there is no manifest attribute on the page). Then the browser goes gets the offline.html via the iframe and everything else you want caching is added using the instructions in the manifest file, including the offline.html page because of the presence of the HTML attribute.
The only overhead I can see is on first page load, the iframe will make an extra HTTP request, but once its cached it'll take it from cache, so not a massive problem.
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