I am developping a HTML5 application. I cache all the files thanks to the .manifest solution, so the app can be used when you don't have access to Internet.
I want to synchronise some data to the server whenever it is possible. Since the variable navigator.online seems to not be reliable enough, I do an AJAX request (using jQuery.get()) to detect if I get something in response, meaning the user is online.
The problem is that, as soon as the whole application is cached, every AJAX request towards a file on Internet fails with no reason. I tried on Chrome, Firefox, and Safari (on iPad) with the same result.
I use jQuery.get() to get the content of some files that are part of the application (and cached at the same time), these requests work flawlessly.
I first tought of a Same-origin problem. So I tried to do a request to https://graph.facebook.com, just to see if I get anything in return. In the Chrome console, the request status is "Pending", with 0bytes received.
When I deactivate the manifest and empty the cache, there is no problem at all.
Do you have any idea or hint on why this is happenning ?
Thank you :)
PS : English isn't my mother tongue, so please excuse (and feel free to correct) any mistakes I might have made. :)
Check that you have the network section. The network section of a cache manifest file specifies resources for which a web application requires online access. * is a wildcard which matches all.
CACHE MANIFEST
# 2013-11-21:v1
CACHE:
/Content/Site.css
/Scripts/jquery-1.8.2.js
NETWORK:
*
FALLBACK:
/ /Home/Offline
Related
In one of the online documents that talks about appcache for HTML5, it indicates that the cached files get updated once an offline user reconnects. I checked the original HTML5 appcache definition by W3, and I am not able to find anything that supports this statement.
Does anyone know if this is to be true?
Thanks in advance
MDN says the following, although if you scroll up on that page it says it's being deprecated.
If an application cache exists, the browser loads the document and its associated resources directly from the cache, without accessing the network. This speeds up the document load time.
The browser then checks to see if the cache manifest has been updated on the server.
If the cache manifest has been updated, the browser downloads a new version of the manifest and the resources listed in the manifest. This is done in the background and does not affect performance significantly.
And logic tells me that it would also depend on the app you're using, server you're trying to connect to and any special settings it might have, how long your browser keeps it's history, what it keeps, and if you saved the page to view offline - whether or not you have all the code/images saved in the right location(s).
Example:
Imagine you saved a page to view offline, and that page has a JS event handler that ran a while loop that did an ajax request every n seconds to do something, like make a number on a page change as long as you were online... As long as the loop is running, you suddenly connect to the internet, and it makes the request to the proper url with the right arguments, then it should go through, even though the url in your browser might say something like file:///C:/Users/you/Desktop/....
I've done this before, even though my url was like the one above. One time I was using braintree's drop-in javascript to a website, and using it's api on my backend. Trying to load the page when offline = Nothing. Online = Updated the spot on the page just fine when I had the required arguments, and it was pointing to the right url. If I got offline again, I could refresh the page, see the same images loaded in the <div>, but I couldn't send any data with it.
I had an application that worked perfectly on iOS6. The process is :
Login
Check/update the cache manifest
Read all the pages from the cache (in order to work offline, and it worked).
but since the iOS7 update, the cache manifest update itself correctly if needed, but it seems that no page is loaded from the cache...
Page index is redirecting to login each time (maybe because of the server request)
Offline mode does not working
I already try to change the name of the cache manifest to name it "cache.manifest"...
Please help me, i'm going to get crazy ! :)
Woooow... After lots of researches, I figured out the problem.
Instead of calling "login.aspx" the first time into safari (in order to create the webapp), I must call index.aspx which redirect me to the login page because I'm not logged.
Using this, the behavior of my webapp is normal (I cannot explain why...) and the cache manifest REALLY cache the webapp.
I can access offline and online.
I hope this helps someone else with the same problem... (iOS mystery)
I am working on an HTML app for a client. The entire app front end is done with 1 HTML file, 1 Javascript file, 1 CSS file (plus jquery) and a few images. There are a few php scripts sitting on the server, which are called using AJAX, but only if an internet connection is available. If no connection is available, then the site will use locally cached data (using localStorage).
To make the site available offline, I'm declaring the cache manifest in my HTML. My HTML looks like this:
<!DOCTYPE html>
<html manifest="cache.manifest.php" language="en">
...
</html>
The cache.manifest.php's output look like this:
CACHE MANIFEST
#VersionHash: 80b9345e6c39efbbe8431e394b014b4f
CACHE:
/css/ebot.css
/favicon.ico
/images/appicon.png
/images/list-arrow.png
/images/list-checkmark.png
/images/woman.png
/index.html
/js/jquery-1.8.3.min.js
/js/ebot.ls.js
NETWORK:
/emaillog.php
/getdata.php
/uploadlog.php
So far so good. Now, I access the site from a browser with the internet connection available. I get a little notification asking whether to allow the site to store information for offline use - I allow it. When I check in settings, I see that the site stores 316K of data - about right.
Now I turn off internet connection and attempt to access http://www.mysite.com/index.html - and get an error message saying "Internet connection not available" (or something to that extent) and the page is not displayed. This is happening in 3 browsers I tested on my dev machine (firefox, safari and chrome) as well as on the client's ipad (the app is eventually for consumption on an ipad).
What am I missing here? What am I doing wrong?
There could be many reasons for this.
Take a look at this articles:
http://www.fuckyeahtml5.com/2011/06/debugging-html5s-offline-web-apps
http://appcachefacts.info/
http://diveintohtml5.info/offline.html
https://developer.mozilla.org/en/docs/HTML/Using_the_application_cache
I guess that you didn't specify proper content type (MIME) for your manifest. It shoud be 'text/cache-manifest'.
Check events in console in Chrome. You should see something like this when appcache manifest is correct:
Creating Application Cache with manifest http://example.com/manifest.appcache
Application Cache Checking event
Application Cache Downloading event
Application Cache Progress event (YYY of XXX)
Application Cache Cached event
I would suggest to start from the simplest manifest to make sure that manifest is parsed. Try:
CACHE MANIFEST
NETWORK:
*
such manifest should cache only your start html page.
I am trying create an app which has offline features. The manifest file that I have created looks like this-
CACHE MANIFEST
# version 1.0.0
CACHE:
/ShareBill.Web-Offline/
/ShareBill.Web-Offline/Groups
/ShareBill.Web-Offline/Content/Site.css
/ShareBill.Web-Offline/Content/jquery-ui.css
/ShareBill.Web-Offline/Scripts/ShareBill.js
/ShareBill.Web-Offline/Scripts/lib/jquery-1.7.2.min.js
/ShareBill.Web-Offline/Scripts/lib/jquery-ui.min.js
/ShareBill.Web-Offline/Scripts/TransactionsIndex.js
/ShareBill.Web-Offline/Content/Images/ajax-loader.gif
/ShareBill.Web-Offline/Content/Images/br_down_icon.png
NETWORK:
/ShareBill.Web-Offline/Transactions/Filters
What I expect is when I view this url /ShareBill.Web-Offline/Groups. My browser should not make any requests to the server else the whole purpose of being offline would be void.
But as I can observe using fiddler is that, the browser makes a request for the manifest file every time i refresh the page. I made sure that I see the cached resources in the Chrome dev tools.
Now when I turn my IIS off and make a request like this, I end making my AppCache status as OBSOLETE. Then on the very next page refresh, I get a 404 response. Am I missing something in terms of implementation?
I applied the Expires header to request that was asking for the Manifest file. And that worked :)
Gurus of SO
I am trying to play with CACHE MANIFEST/HTML5. My app is JS heavy and built on jquery/jquerymobile.
This is an excerpt of what my Manifest looks like
CACHE MANIFEST
FALLBACK:
/
NETWORK:
*
CACHE:
/css/style.css
/js/jquery.js
But somehow, the app doesn't load the files the first time itself and the entire app breaks down.
Is my format wrong?
Should I never load JS into the Cache?
How should I treat this differently to always check the network first if anything isn't available and only load stuff available from the Cache?
Thank you.
I tried a simple page with your cache manifest and it worked fine for me, so I'm not really sure what the problem is. But,
Yes, there is something wrong with the format. The entries in the FALLBACK section need to have two parts: a pattern, and a URL. This says "if any page matching the pattern is not available offline, display the URL instead (which will be cached)." The main example of this (as shown here) is "/ /offline.html", which means "for all pages, if we are offline and they are not cached, display /offline.html instead." However, I don't think this is the source of your problem since I tested it with your exact manifest and it still worked.
There is nothing special about JS files. It should be fine to load them into the cache.
I don't understand the third question. There are possibly two goals here: a) how do you check to see if there is a newer version of the file available online first, before going back to the cache, and b) how do you check the network to see if there is a file that is not cached, and if we are offline, fall back to an error page. The answer to (a) is that once you have turned on the cache manifest, things work very differently. It will never check for new versions of the files unless there is a new version of the manifest also. So you must always update the manifest whenever you change any files. The answer to (b) is the FALLBACK section.
See Dive Into HTML5's excellent chapter on this, particularly the section "The fine art of debugging, a.k.a. “Kill me! Kill me now!”" which explains how the manifest updates.
Also I don't think we've gotten to the meat of your question, because it's unclear what you mean by "the app doesn't load the files the first time itself". Which files don't load? Do they load properly after a refresh? Etc.
The only way I got this to work to refresh a cache was to rename the manifest file with a commit number or timestamp, and change the cache declaration to
<html manifest='mymanifest382330.manifest'>
I made this part of my build.