I'm using a .manifest file to tell browsers what resources to cache. Basically contains the following:
CACHE MANIFEST
# This manifest was generated by grunt-manifest HTML5 Cache Manifest Generator
# Time: Fri Jul 24 2015 09:57:13 GMT+0100 (BST)
CACHE:
app.min.js
app.min.css
js/libs/require-min.js
img/leaf.png
NETWORK:
*
This file is linked in the HTML as follows:
<!DOCTYPE html>
<html manifest="/app.manifest">
<head>
<style type="text/css" media="all">
....
Following reports from Safari users that their UI wasn't respecting the cache file, I changed the filename from manifest.appcache to app.manifest after reading that Safari requires manifest files to have the .manifest extension.
I'm now seeing (in Chrome especially) that the browser hasn't re-fetched the HTML source, so isn't seeing that the manifest file has changed, so isn't loading the new app.manifest file, and is failing to download any of the source. The cache headers (Expires, ETag and Last-Modified) for the /index HTML file have all changed, as has the content of the file, yet Chrome refuses to re-fetch the HTML unless the cache is disabled via devtools.
Does anyone know why Chrome is being so aggressive in holding onto this cached HTML? Any ideas as to how I can get it to re-fetch?
Make sure that /manifest.appcache returns a 404, that's what makes browsers understand that it's obsolete now, they will remove all local cache and reload the page next time, so they'll get it at the new location.
You need to make a change to the the old manifest file (manifest.appcache). Your /index file is a part of the appcache and it's still being used by Chrome.
From the HTML5 recommendation:
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.
Chrome gets the old manifest and there are no changes so it carries on. Try to add a random comment to manifest.appcache and try again.
Related
For an html5 game I'm making at a company we've hit a snag. In safari it doesn't even seem to be trying to load our manifest file while in chrome it is. And it runs offline too. Is there any huge differences between how the two handle it that trip it up?
I'll check how firefox handles it and update in a bit. This is literally how the cache looks. Already had it validated and everything.
CACHE MANIFEST
#v 1.01
CACHE:
/graphics/Apalia_Map 02.jpg
/graphics/comic/PAGE4.jpg
/graphics/comic/PAGE2.jpg
/graphics/comic/PAGE8.jpg
/graphics/comic/PAGE7.jpg
/graphics/comic/PAGE3.jpg
/graphics/comic/PAGE6.jpg
/graphics/comic/PAGE5.jpg
/graphics/comic/PAGE1.jpg
/graphics/gameComplete.jpg
/graphics/ui/main_menu_bg.jpg
/graphics/ui/apaliaCredits.jpg
/graphics/levels/elpala3-lvl1.jpg
/graphics/levels/elpala1-lvl1.jpg
/graphics/levels/elpala2-lvl1.jpg
/graphics/effects/fswipe_northwest_1_4.png
/graphics/effects/spinfx08.png
/graphics/effects/shieldfx_7.png
/graphics/effects/spinfx01.png
etc...
I have found the answer about this question.....
Safari is more funny than chrome, I can easily make chrome cache my page, but safari does not.
I list these key to make the instruction clearly for the dump like me:
The HTML tag contain Manifest file name like this:
< !DOCTYPE html>
< html manifest="safari.manifest" >
addType, I use apache server, my http.conf contain this in IfModule which contain those addtype:
< IfModule >
....(other content...)
AddType text/cache-manifest .manifest
< /IfModule >
The manifest file name is "safari.manifest". Its content is the most funny part, I have a html that only contain the javascript. I have no image so I don't have anything in NETWORK and FALLBACK. So I don't even fill them in the safari.manifest.
My failed safari.manifest content is:
CACHE MANIFEST
So it does not work.
My success safari.manifest content is:
CACHE MANIFEST
NETWORK:
FALLBACK:
SO FUNNY that I STILL need that "NETWORK FALLBACK" empty blocks in the file to make safari cache the page. If I don't add that two words, Safari will not cache anything.
That's all I found.
not sure as I can't see what is happening, but the problem could be related either to the way you link to the manifest file or (and I'll place my bets now) to the mime-type the file gets sent with (has to be "text/cache-manifest").
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've been using HTML5 Offline caching on my website for a while and for some reasons I am considering turning it off. To my surprise it doesn't work.
This is how I've implemented HTML5 Offline caching.
In my index.html I give path to the manifest file
<html manifest="app.manifest">
In the app.manifest file I list all the js/css/png file that I would like to be cached by the browser for offline usage. Every time I deploy updates, I update the app.manifest file, which causes the browser to fetch latest version of all the files listed in the manifest file.
In order to turn off the offline caching, I changed my index.html's opening tag to
<html>
I made a dummy change to app.manifest file, so that browser (which has already cached my website), will detect the change and download latest version of all the files (including index.html).
What I noticed is, the browser indeed gets the latest version of all the files. I see the new <html> tag in the updated version without the manifest declaration, however the behavior of the browser for future changes does not change. i.e. I now expect the browser to immediately fetch the new version of the index.html file, when it's changed on server. However that doesn't happen. The browser doesn't download updated index.html until I make any changes to the manifest file.
Thus it appears to me that the browser has permanently associated app.manifest file with my website URL and it won't get rid of it even when I don't mention it in <html> tag.
I have tested this on both Google Chrome and Firefox, same results. I also tried restarting Chrome, but it won't forget that my site ever had app.manifest defined for it. I haven't found any discussion on this aspect of offline caching on the web.
Update: I managed to get rid of the behavior in Chrome by clearing all the browsing data (by going to settings). But that's not something I can tell the users to do.
Make the manifest URL return a 404 to indicate you don't want offline web applications anymore. According to Step 5 of HTML5 §5.6.4, this marks the cache as obsolete, and will remove it.
You can also manually delete the offline web application in Chrome by going to about:appcache-internals.
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