We Keep Coding

Only cache images with app cache

Is it possibly to only cache images in the html5 app cache?
My manifest which almost works!
CACHE MANIFEST
#Version: 4
CACHE:
Public/Images/about.png
Public/Images/android.png
Public/Images/back-hover.png
Public/Images/back.png
Public/Images/contact.png
Public/Images/HTML5.png
Public/Images/info.png
Public/Images/linkedin.png
Public/Images/mail.png
Public/Images/message.png
Public/Images/portfolio.png
Public/Images/profession.png
Public/Images/ram.png
Public/Images/stack.png
Public/Images/tile.png
Public/Images/vs.png
Public/Images/About/me.jpg
NETWORK:
*
FALLBACK:
The issue is that the landing page of my website is also getting cached, this means when I update the content the user isn't receiving the content.
I could force a manual update of all cached files by incrementing the version number in the cache, but it's not ideal as my main pages content is dynamic.

Use an iframe to load a static HTML file which references the manifest.

Grails Resources, 302s, SSL, and Chrome

Grails 2.1.1 with the resources plugin.
I'm using the jstree library and it utilizes themes. You specify a theme name in the config:
"themes":{
"theme":"default",
"dots":false,
"icons":true
}
And the JavaScript finds it relative to the library's path. That means the URL is built and is relative, then gets added to the document. For example, it might look like:
/a/js/jsTree/themes/default/styles.css
I have the following in my ApplicationResources.groovy:
tree {
resource url: '/js/jsTree/1.0/_lib/jquery.cookie.js'
resource url: '/js/jsTree/1.0/_lib/jquery.hotkeys.js'
resource url: '/js/jsTree/1.0/jquery.jstree.js'
}
When I deploy this on our server with SSL, on Firefox and Safari, I see the that styles.css being 302'd to the static path that the resources plugin does.
/a/static/js/jsTree/themes/default/styles.css
And then that new path is pulled in, and I can see it is coming over SSL. However, in Chrome I see the 302 and then the new URL is trying to stream over non-SSL and Chrome is blocking it (silently even) so the tree styles do not render at all, which obviously makes it unusable.
Sorry, but I cannot at this time make an example of this problem that anyone can publicly view. I'm hoping someone else might have ran into this situation before.

The issue ended up being something with jsTree. I changed the config to include the URL instead of letting jsTree figure it out:
"themes":{
"theme":"default",
"dots":false,
"icons":true,
"url": contextPath + "/js/jsTree/1.0/themes/default/style.css"
}

HTML5 Caching misbehaving

I have this nice little cache manifest file, which I embed into my index.html page:
CACHE MANIFEST
# version 8
9341.js
9341.css
none.cur
NETWORK:
http://*
Everything goes smoothly and the enlisted resources get cached. However, despite my efforts on the last two lines of the manifest file, the browser refuses to load http://www.google.com/jsapi file on the consequent reloads stating that it Failed to load resource (Chrome).
The problem is present in Opera 11, Chrome 15, Mozilla is for some reason fine. The problem disappears when I remove the manifest file. Any of you knows what might be causing this? It's rather bothersome. >> Online demonstration

Setting the NETWORK directive to * solved the problem. Answer found here.

Problem While Doing html5 webapp cache

I have a webapp which has the domain http://draft.mo2do.com
when i am accessing the url it will resolve like the below url and redirect to the corresponding site home page
http://draft.mo2do.com/s/_91665/Home
Here i implemented offline cache. My cache.manifest file is the below
CACHE MANIFEST
# Offline cache v4.0
# All other resources (e.g. sites) require the user to be online.
NETWORK:
*
# Additional resources to cache CACHE:
# Add the pages in to the cache
/s/_91665/Home /s/_91665/CachedDraftBoard
http://draft.mo2do.com
# Add the images in to the cache
/s/store/-1/webapp/styles/webapp.css
/s/store/-1/webapp/styles/nba_draft.css
/s/store/-1/webapp/styles/add2drafthome.css?v2
# Add the js files in to the cache
/s/store/-1/webapp/scripts/jquery-1.5.min.js
/s/store/-1/webapp/scripts/iscroll.js
/s/store/-1/webapp/scripts/webapp.js
/s/store/-1/webapp/scripts/nba_draft.js
/s/store/-1/webapp/scripts/cacheUpdate.js
/s/store/-1/webapp/scripts/add2drafthome.js?v0.9.4
/webapp/icon.png /webapp/startup.png
/s/store/-1/webapp/nba/addtodrafthome/arrow.png
/s/store/-1/webapp/nba/addtodrafthome/close-bubble.png
/s/store/-1/webapp/nba/addtodrafthome/icon.png
/s/store/-1/webapp/nba/addtodrafthome/plus.png
/s/store/-1/webapp/nba/addtodrafthome/share.png
FALLBACK:
http://draft.mo2do.com
If i am directly accessing the site url the caching is working and that time i didnt mention the "http://draft.mo2do.com" in the cache section.During this time offline cache is working fine.
If i directly access only the domain url "http://draft.mo2do.com" in the browser it is not opening 404 in the offline mode.
Then i added the "http://draft.mo2do.com" in the cache section that time i am getting exception
Application Cache Progress event (2 of 3) http://draft.mo2do.com/ Application Cache Error event: Resource fetch failed (-1) http://draft.mo2do.com/
If i access the domain also it should load the app in the offline mode. If i access direct url app is loading fine.
How can I solve this issue?

The cache has to directly reference specific resources, be they Javascript, CSS, HTML pages, images, whatever. From what I can tell from the content above, you've done that. Simply placing a domain in there however won't work (you also need to reference all of the pages you want off-line, e.g. /s/_91665/Home needs to be in there).
So, there's an error somewhere along the line, but it's hard to figure out what you mean by this:
If i directly access only the domain url "http://draft.mo2do.com" in the browser it is not opening 404 in the offline mode.
Can you be more clear? Do you mean that going to that URL results in a 404, or is there something in the page itself that's in error?
Are you sure that your cache file is functioning as intended? If there are any errors at all in your cache file, your off-line application simply won't work. This page offers some debugging code which may help:
Debugging HTML 5 Offline Application Cache

html5 manifest fetch failed (-1)

I am developing a web app in which I am trying to use the HTML5 application cache.
I am running the application on apache tomcat 7. When the server is running it's OK; file downloads in Google Chrome and I get cached or update ready event. But once I shut down the server and refresh the page, I get an error manifest fetch fail (-1).
How to get over this error and why does it occur?
my manifest file is as follows(sample.manifest):
CACHE MANIFEST
# version 4
CACHE:
css/styles.css
js/script.js
js/jquery-latest.js
js/jquery.validate.js
img/blue-line.png
img/main-img.png
img/logo.png
img/green-li.png
img/gline2.png
img/gline3.png
img/gline4.png
img/gline5.png
img/diversity-img.jpg
img/facebook32.png
img/mail40x32.png
img/main-img-298.png
img/ppl-img.jpg
img/twitter32.png
leavevbc.html
diversity.html
NETWORK:
*
I added the correct MIME type but I'm still getting the problem.

The manifest load fail error is exactly what you have to expect if the server can't be reached. The manifest can't be loaded. It's a little bit confusing that this is reported as an error - but that's what the standard says. All you have to do is ignore the error and you should have an offline cached webapp.

In Chrome, inspect all your app cached items. You may be surprised to see that what is inside of your cached files are not what you put into them. I've run into this exact situation. I had a javascript file that contained my FALLBACK: offline.html page. The Webkit cache loader has issues when the type of content its loading is not what it expects. To me this is just wrong, but on the upside, it did reveal the problem. In my case, it looked in my js file and crimped when it saw the at the top of the file.
If there are resources that must be pulled when online only then list them in NETWORK: section.
To fix current situation do following:
clear out your browser cache
change comment at top of your manifest file so that new copy will be downloaded
fire up chrome with developer tools
pull down web page while online
inspect your chrome application cache files again
go offline and browser refresh
http://www.html5rocks.com/en/tutorials/appcache/beginner/