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 :)
Related
When navigating my site, my browser is loading the JS files from cache, but not the CSS files. This happens both running a local server and on the live site (to me and apparently to other users, which is apparent since the logs show mostly .css files getting loaded).
I've tried the other solutions (example): I am clicking around on hyperlinks (not refreshing) and my Chrome Devtools do not have "Disable Cache" checked.
Here is the initial request (using CTRL+F5 for a hard refresh):
Then navigating back to that page creates another request:
(Note: there is no Cache-Control sent in the second request, proving that I indeed did not refresh)
As expected, the server responds with a 304 Not-Modified for the .css file, but I don't understand why it's making a trip to the server at all (notice below the .js file is retrieved without a server request).
I believe you can look at the issue first-hand on your own machine by going to https://up.codes. I'm using Chrome 71.0.
Why are the CSS files not being cached?
#Allen found the issue (Vary header included cookie and the cookie was changing between requests), but I'll show how to fix it for the case of Flask for posterity. You can use Flask's #app.after_request() hook to make sure Flask does not add cookie when it hits this line:
#app.after_request
def add_header(response):
url = request.url
if ('.css' in url or '.js' in url or '.svg' in url or '.png' in url or
'.gif' in url) :
# Flask adds to the header `Vary: cookie` meaning the client should
# re-download the asset if the cookie changed. If you look at the Flask
# source code that comes next after the below return, it will add
# `Vary: cookie` if and only if session.accessed is true.
session.accessed = False
return response
Your server responded with different session cookie when requesting these css files, and your header set with Vary: Cookie, which caused the browser to send request again because of the session cookie change.
Check out for your web.config's compilation attribute, if its:
<compilation debug=”true”/>
CSS will get continually downloaded by clients on each pageview request and not cached locally within the browser.
If its set to false, the resource is only downloaded once to the client and cached there.
Check out this post: Chrome will not cache CSS files. .js files work fine
Chrome uses multiple types of caches.
Blink (the rendering engine that Chrome uses) uses an in memory cache and a disk cache. It uses this cache for images, fonts and js files.
As long as a file of that type is still in the memory cache or the file cache it will be loaded from there and skip the WebRequest API, this means that no call is made to the server.
I don't know exactly why css files are not being cached by Blink, but this is the reason why you see an HTTP request for css files and not for js ones.
Note, that if, for some reason, the js file is evicted from the memory cache and the disk cache you will see an HTTP request for the js files also.
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
I have already one site, for that I have created one mobile site using jquery mobile with application cache features. (Both have same urls)
Using apache2 userAgent settings I redirected to mobile site for (Android and Iphone).
When It redirected to mobile site, I get below error:
Application Cache Error event: Manifest fetch failed (404)
test.manifest
CACHE MANIFEST
# version 1
CACHE
/index.html
/static/js/main.js
/static/css/style.css
Example:
main site:
www.example.com/
mobile site
www.example.com/
www.example.com/test.manifest open directly but using redirection it give 404 error randomly.
Please suggest any solution.
One thing wrong with your manifest. You need a colon after CACHE.
Is your redirect using code something like this?
$.mobile.changePage
I see similar issues if I use bookmarks to some of my pages rather than $.mobile.changePage.
404 is standard for the page not existing. My guess is your link is incorrect or you might have forgotten to upload your manifest file.
Maybe your paths should start without / that's often the case for me, even if the first element is a folder. But you've probably already checked that.
In my case I was able to make it working like
CACHE MANIFEST
#v1.0.1
NETWORK:
*
I had the 404 error when it was like:
CACHE MANIFEST
#v1.0.1
NETWORK
*
so without : in the NETWORK section.
I have been trying to figure out HTML5's new AppCache, but I feel extremely limited here.
Let's assume that I have a website with four pages:
index.html
about.html
portfolio.html
contact.html
I have the above resources outlined in the manifiest, along with all of the website's resources. The manifest looks like the below:
CACHE MANIFEST
# 2013-05-23 2:33 PM
# Master Manifest
index.html
about.html
portfolio.html
contact.html
styles/reset.css
styles/styles.css
NETWORK:
*
I have added the appcache file type to the server configuration and have used the correct HTML tag attribute on each page listed above. Just for the record, the element looks like so:
<html lang="en" manifest="example.appcache">
I have tested this setup out on my mobile device, and everything works perfectly fine... Unless I don't load every page. It seems that I have to go to each page and cache it via my mobile browser, after which I may turn off DATA and go offline for my device to be able to browse the APPCACHE'd website.
But, here's my question - How do I setup AppCache to allow me to go to index.html, cache that page, and cache the rest of the resources in the manifest? Without having to visit and manually cache each resource?
If you cannot, then I would have to ask; doesn't that sort of defeat the idea behind AppCache and Offline Accessibility?
Thank you so much for the help all! :)
You shouldn't need to visit every page. I know you mentioned you've set the MIME type in Apache, but are you 100% certain it's working correctly?
You can check it by opening your manifest in a browser and checking the Response Headers in Chrome Web Inspectors's Network tab:
Content-Type should be text/cache-manifest
It's a bit hard to debug without having access to your site, but here's some instructions for how to interpret what happens in Chrome's Web Inspector with AppCache to help you debug the problem yourself:
The Resources tab will show you the contents and status of the Application Cache. It looks like this whilst it's downloading files:
The console will also log events when it's downloading:
Application Cache Progress event (0 of 48) http://cachedfile.url
Once it's done downloading it'll look like this and show you the list of cached files:
When you go back it'll log three events (assuming there aren't any changes):
Document was loaded from Application Cache with manifest http://manifest.url
Application Cache Checking event
Application Cache NoUpdate event
And then when you're offline it looks like this:
Hopefully between the console and the appcache table you'll be able to figure out what's happening.
The manifest file is correct and you do not need to visit each page to get in cache in your mobile. You could try if this is a problem with your mobile or browser and if you have defined in your server text/cache-manifest MIME type.
The appcache will only store the cache the first time it's downloaded. It's just a list of files that says, when it's downloaded the first time, cache it.
What you could do is after load in the background do an ajax call to load each of the intended resources but it's not particularly pretty.
So looks to me like it's acting how it should be.
CACHE:
This is the default section for entries. Files listed under
this header (or immediately after the CACHE MANIFEST) will be
explicitly cached after they're downloaded for the first time.
http://www.html5rocks.com/en/tutorials/appcache/beginner/
Ahmed
I get the following when visiting your site:
Creating Application Cache with manifest
http://www.iamaaron.com/appcache/example.appcache
Application Cache Checking event
Application Cache Downloading event
Application Cache Progress event (0 of 6)
http://www.iamaaron.com/appcache/styles/reset.css
Application Cache Progress event (1 of 6)
http://www.iamaaron.com/appcache/index.html
Application Cache Progress event (2 of 6)
http://www.iamaaron.com/appcache/contact.html
Application Cache Progress event (3 of 6)
http://www.iamaaron.com/appcache/attendees.html
Application Cache Progress event (4 of 6)
http://www.iamaaron.com/appcache/events.html
Application Cache Progress event (5 of 6)
http://www.iamaaron.com/appcache/styles/styles.css
Application Cache Error event: Resource fetch failed (404)
http://www.iamaaron.com/appcache/styles/styles.css
So, it looks like it's working correctly despite the Content-Type being empty, except for the CSS file which seems to be missing (the URL is wrong, it should be main.css by the looks of things).
BUT my developer tools don't show the app cache being filled and it doesn't work when it's offline.
Try and fix your 404 error with the CSS and make sure your apache it configured correctly to return the correct Content-Type, I reckon that's what's causing issues.
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.