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.
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 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.
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'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.