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
Related
im using HTML5 feature cache manifest and it seems to be not working properly when i am offline and trying to access the webpage. Problem is that it tries to get jquery library from google website, although it should be cached. As result webpage does not work properly due to absence of jquery libraries
Here is my webpage:
http://www.tud.ttu.ee/web/Evald.Tali/movies/
Supposed to load offline.html when offline
Here is my cache file:
CACHE MANIFEST
#updated on 22/2/2015 7:10PM
#updated cache, added links to jquery
CACHE:
index.html
CSSfile.css
script.js
jquery-1.11.2.min.js
jquery.mobile-1.4.5.js
jquery.mobile-1.4.5.css
offline.html
https://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.3/jquery.mobile.min.css
https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js
https://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.3/jquery.mobile.min.js
OFFLINE:
/ /offline.html
NETWORK:
*
Thats because the cache works for same origin resources only. You can't specify external files in your cache manifest. See the answer here for more information:
App cache manifest on CDN?
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.
Ok I have a problem with my cache, and just can't figure it out D:
Every time I try to reload the page (To get cache), I get this error: Application Cache Error event: Failed to commit new cache to storage?
Someone who know why this doesn't work?
Links (In case you want to see yourself):
Index.php
Cache file
.htaccess: AddType text/cache-manifest cache
Some files in you cache-manifest don't exist (404).
According to the spec. if not all files can be retrieved the new cache will not be used/committed.
It seems you are using Chrome. Your application cache might be broken. Try clearing it but entering the following to address bar:
chrome://appcache-internals/
Say I have a simple appcache manifest that looks like:
CACHE:
# v1
# images
images/one.jpg
images/two.jpg
images/three.jpg
I then use some server side method to update the manifest to:
CACHE:
# v1
# images
images/one.jpg
images/two.jpg
images/three.jpg
images/four.jpg
And then call a function client side to update the appcache:
function updateCache(){
var appCache = window.applicationCache;
appCache.update();
if (appCache.status == window.applicationCache.UPDATEREADY) {
appCache.swapCache();
}
}
I would like to 'add' my new image to the existing cache without downloading everything again (which is what's currently happening). Is this possible or am I missing something fundamental?
It will download everything again, that's the way it's designed to work. However if you have set far future expiry headers on your images then the chances are the browser will fetch them from the local browser cache rather than requesting them off the server again.
Note that if you do this during development this can lead to some strange behaviour, but you should definitely do it for production sites.
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/