I am having a problem with a web app that I'm working on and I have posted a question here which is a bit vague and probably not very helpful. I have decided to create a really basic site and build it up to be like the main app and see where it breaks. I have done this and got stuck straight away with the offline caching.
This is a basic 3 page static website hosted locally in IIS 7.5. I created the folder c:\inetpub\wwwroot\ManifestTesting, added it to IIS as a web application and added a new MIME type of text/cache-manifest for the .appcache extension. I am also using FireFox 9.0 for testing as this has an offline mode feature.
I created 3 html pages and added them to the ManifestTesting folder:
index.htm - this page contains 2 links to page1.htm and page2.htm
page1.htm - just contains a header that says page 1
page2.htm - just contains a header that says page 2
So now if I browse to http://localhost/manifesttesting if get the index page and can navigate to the 2 pages.
I then created a file called manifest.appcache and added it to the ManifestTesting folder:
CACHE MANIFEST
CACHE:
index.htm
page1.htm
page2.htm
and added the reference to the manifest file in the index.htm:
<html manifest="manifest.appcache">
So if I clear all history and browse to the index.htm, FireFox asks if I want to allow the website to store data for offline use. I click allow, switch the browser to offline mode then attempt to navigate to page1.htm which works fine! So all is good so far.
Now for the bit that I don't understand. I then created a new folder in the ManifestTesting folder called 'pages' and moved page1 and page2 into it. I updated the links in the index to reference the new location and if I browse the website without the manifest reference, it all works fine just as before. I then re-reference the manifest file in the index and update the manifest to be like:
CACHE MANIFEST
CACHE:
index.htm
pages/page1.htm
pages/page2.htm
I then clear history, refresh, firefox asks to allow the website to store offline data, enable offline mode and then attempt to navigate to page1 - it doesn't work! FireFox tells me it's in offline mode and can't browse the web!
What am I doing wrong?
There could be a few possibilities here :
1) Can you try putting in "/pages/page1.htm" instead of "pages/page1.htm"
2) also make sure that all the link and what you type on the browser is Case-Sensitive. ('pages/page1.htm' is not the same as 'pages/Page1.htm')
3) you mentioned that you cleared the history... if you're doing it this way for testing, you need to be clearing the physical files cache too, not just the history.
4) this is probably the most likely cause : when you made changes to the manifest file, and you refresh the browser, this is what happens (assuming you're online)
the browser first loads back all the files in the cache
then the browser check online for your manifest file
it detects that the manifest file has changed, it will then proceed to download the new files
however, at this time, you will still be looking at your 'old files' because the browser has loaded the old files before going online to download the 'new files'
if at this point, if you hit refresh
again (2nd time), you should get the 'new files' (and you would be able to go to the page1 and page2 after going offline
This is currently the standard behaviour. Some people put some event handlers to prompt the user to do another refresh (after the 1st refresh)
Related
Here is my manifest :
CACHE MANIFEST
CACHE:
//code.jquery.com/jquery-2.0.3.min.js
NETWORK:
*
My index.html which defines that manifest (<html manifest="app.manifest>) is always stored as "Master" even with the NETWORK wildcard part of my manifest.
The problem is that my MASTER index.html is stored in the cache... and won't be refreshed if it changes on the server side if the manifest file is not updated.
I've seen multiple not really beautiful solutions to that problem (like the iframe solution), so my question is : is there a clean HTML 5 way to do this ?
The clean way to do it is to only have static content in your index.html file then load the data dynamically (eg. via AJAX) to create the page the user sees. An alternative would be to have a big link which says 'Enable Offline Support' which links to a page with the manifest link in it.
Other than that, the iframe solution is the cleanest way - you're hacking around the intended use of AppCache, why do you expect that to be 'clean'? What application scenario do you have that jquery-2.0.3.min.js needs to be available offline but not the index page of the app which accesses it?
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'm using HTML5 appcache and mostly it's working well. However, sometimes, users' browsers (Chrome or Safari) will hold onto the cached manifest file even though I'm positive that the server has a brand new manifest file with a unique version number inside of a comment (like with "# app version 1.0.0.8" or whatever).
In IIS (version 6), the content expiration was set to 1 day, so could that be the problem? I can't seem to reproduce this issue which makes debugging difficult. As a precaution, in IIS I've changed the content expiration to "expire immediately" for the directory that stores the manifest file. Could that explain why some browsers were hanging onto manifest files even when a new version was available?
I also noticed that when a browser was behaving this way, even if I deleted the manifest file on the server, the user's browser would use its own cached copy of the manifest file which isn't supposed to happen if the file is no longer available in my understanding.
Thanks,
Andy
Taken from my answer here : https://stackoverflow.com/a/13282735/727575
Yes, this is the current "correct" behaviour. It has nothing to do with IIS content expiration. This is what happens:
When you just made changes to the manifest file, and you refresh the browser, this is what happens (assuming you're online)
the browser first loads back all the files in the cache
then the browser check online for your manifest file
it detects that the manifest file has changed, it will then proceed to download the new files
however, keep in mind, at this time, you will still be looking at your 'old files' because the browser has loaded the old files before going online to download the 'new files'
if at this point, if you hit refresh again (2nd time), you should get the 'new files'
This is currently the standard behaviour. Some people put some event handlers to prompt the user to do another refresh (after the 1st refresh)
So basically, you need to refresh twice or throw one of the event from 'window.applicationCache' to handle it
To look at an example of using window.applicationCache, go here : http://www.html5rocks.com/en/tutorials/appcache/beginner/
it's under the "Updating the Cache" section.
I have a special kiosk-solution with chrome where I need chrome to upon application start, load the start-url from cache, not try to fetch it online.
The reason is that this is, like I said, a kiosk-mode presentation, is is a screen standing in the public that reboots every night, and if the reboot happens while the ISP has downtime on the internet connection, chrome will only show an error page.
If I can get it to load the cached version of the page though, instead of trying to fetch it online, then the last valid version of the page will show, and through some nifty ajax-workings of mine ;) it will automatically update after a while. If THAT update fails, the currently displayed version of the page will remain until a subsequent update succeeds.
See my problem?
In a browser like firefox I could do it by starting the browser in off-line mode and after page load switch it to online-mode. Only FF doesn't work for me in the particulat project, and Chrome doesn't seem to have an off-line mode?
You could use HTML5 Offline Web Applications to accomplish that. It's probably very easy to set up in your case, just add a file like the following to your app's directory:
CACHE MANIFEST
index.html
help.html
style/default.css
images/logo.png
images/backgound.png
NETWORK:
server.cgi
This manifest should contain all the files you'll need to display some useful information and later grab current content via AJAX. There's also a NETWORK section, where you have to specify things that should not be cached (ie the script that delivers your Updates via AJAX).
You can load the manifest file by adding a manifest attribute to your tag (cache-manifest is the name of the file above):
<html manifest="cache-manifest">
Make sure your server delivers the cache manifest with a MIME-type of
text/cache-manifest MIME
Type or copy-paste the below flag setting into the chrome address bar.
chrome://flags/#enable-offline-mode
scroll down to enable offline stale mode.
Restart your browser.
If an offline version of the page is available in the system cache it will load up when you are not connected.
One thing I'm not fully grasping is if the cache manifest is also acting as a prefetch when it is online for all the files listed.
For example, lets say I'm visiting:
/page1.html
Each of the pages on my site will have the same declaration:
<html manifest="/cache.manifest">
In the cache manifest file, I have:
CACHE MANIFEST
/page2.html
/page3.html
/page4.html
So what will happen is I visit /page1.html first, and when I'm online my browser will know to cache pages 2-4 also. And when I'm disconnected and I visit pages 2-4 everything will load just fine because it was already cached.
QUESTION: If I visit /page1.html, and I'm STILL connected online, and visit /page2.html, will my browser still request /page2.html, or will it not make another request to the server and use what it cached from the /cache.manifest file? Essentially acting like the prefetch link that firefox uses?
Well, the spec says "all files," without any exceptions for html files, so I figure it works for html files just like any other, it gets taken from the cache, not the server. However, I have not done any testing to confirm this. I would do the following:
Create the following cache manifest file:
CACHE MANIFEST
/page1.html
/page2.html
/page3.html
/page4.html
Include it in each of the four cache manifest files. Then:
Visit page1.html
Edit page2.html to make it different than before you visited page1.html
Visit page2.html
See which version you get.
Make sure you try it out on all browsers. I'll be interested to see your results.
When we use cache manifest it takes the files from the cache each time you load the page.
There is a solution for this.
You have to change the version number in the manifest file, If at all you have done any changes to the HTML files. so that your manifest pulls in the latest version of the HTML from the server and Stores it in Cache.
CACHE MANIFEST
#v01
/page1.html
/page2.html
/page3.html
/page4.html
You can just Increment the V01 to 02,03... So on, this will ensure your cache will have latest version of html pages
I think it takes it from the manifest file even if you are online :). Can't you try it out by uploading a file and then navigating to the page?