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.
Related
I am attempting to make a webpage available offline.
I have added <html lang="en" manifest="cache.manifest"> to my page.
I have created cache.manifest with the following content:
CACHE MANIFEST
css/base.css
http://cdnjs.cloudflare.com/ajax/libs/jquery.selectboxit/3.8.0/jquery.selectBoxIt.css
http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css
http://cdnjs.cloudflare.com/ajax/libs/entypo/2.0/entypo.woff
http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css
css/affixed-sidebar.css
css/bootstrap.css
css/components.css
css/dodfont.css
css/helpers.css
http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js
http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js
http://www.parsecdn.com/js/parse-1.3.0.min.js
http://cdnjs.cloudflare.com/ajax/libs/toastr.js/2.1.1/toastr.min.js
http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js
http://cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.3/moment.min.js
http://gitcdn.github.io/bootstrap-toggle/2.2.0/js/bootstrap-toggle.min.js
http://cdnjs.cloudflare.com/ajax/libs/jquery.selectboxit/3.8.0/jquery.selectBoxIt.min.js
http://google-code-prettify.googlecode.com/svn/loader/run_prettify.js?lang=js&skin=sunburst
js/components.js
js/so-cat.js
http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/fonts/fontawesome-webfont.woff?v=4.2.0
fonts/glyphicons-halflings-regular.woff
http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/fonts/fontawesome-webfont.ttf?v=4.2.0
fonts/glyphicons-halflings-regular.ttf
http://fonts.googleapis.com/css?family=Raleway:400,200
http://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css
fonts/glyphicons-halflings-regular.woff2
fonts/glyphicons-halflings-regular.woff2
fonts/glyphicons-halflings-regular.woff
fonts/glyphicons-halflings-regular.ttf
When I first visit the page in chrome, the browser will deliver the page and cache the page and all of the resources.
I expect that when I leave the page and come back, I will be served the live version of the page and I will only ever see the cached version if the server is not available.
Instead, on every visit after the first, I am served the cached version of the page. I can confirm I am seeing the cached version because, if I change the html file and refresh the webpage, I do not see the changes. If I clear or disable the cache and refresh, I see the changes as expected.
What do I need to do to ensure that, if the server is reachable, I am always served the live version of the page and all of its resources?
What do I need to do to ensure that, if the server is reachable, I am
always served the live version of the page and all of its resources?
Unfortunately, the simple answer here is: You can’t. For real. That is, at least not if you’re using a cache manifest. This a well-known serious design bug in the HTML5 appcache/offline-cache mechanism. It’s essentially broken by design.
And that's why using appcache is basically no longer recommended. It's just too broken.
And that's why the Offline Web applications section of the HTML Standard now says this:
This feature is in the process of being removed from the Web platform.
(This is a long process that takes many years.) Using any of the
offline Web application features at this time is highly discouraged.
Use service workers instead.
The only way to work around it and make clients quit using the cached contents is: completely remove your cache.manifest file from the server.
Do that and they’ll go back to fetching the current content.
The good news is that there’s a much better solution for offline Web applications in the works: Service Worker—more specifically, the Service Worker Cache and CacheStorage interfaces.
well ..
Solution 1 :
nowadays you can use ServiceWorkers but will only work over HTTPS .
Solution 2 :
you may add a hashed line and a version number to the manifest file like
# version 1.0.0
and change it every time you want to update the files in cache
Solution 3 :
you can use manifest in away that if online the browser will get the online data and if not you can write some js code to get some saved data .. maybe from indexedDB or localStorage
for more info read This Article
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.
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'm trying to get HTML5 offline storage working in a basic way. I read the information on DiveIntoHTML5 and it seems to make sense, but it just doesn't seem to be working for me. I wondered if someone could help me to debug this.
Basically I've set up a home page for the application, index.htm. So my application is on the web at http://www.mydomain.com/online/index.htm. Users will visit this page, where they'll ordinaraily do all of their stuff day-to-day. Visiting this URL will create a bunch of cached files so they can then visit http://www.mydomain.com/offline and view a working version of the application when they're offline.
The top few lines of code in the online homepage are:
<!DOCTYPE html>
<html manifest="cache.manifest">
<head>
...etc
I've generated a plain text file called 'cache.txt' and added the following content to it in Notepad:
CACHE MANIFEST
http://www.mydomain.com/offline/scripts/jquery-1.6.3.min.js
http://www.mydomain.com/offline/scripts/jquery-ui-1.8.16.custom.min.js
http://www.mydomain.com/offline/scripts/modernizr.min.js
http://www.mydomain.com/offline/scripts/json2.min.js
http://www.mydomain.com/offline/scripts/jquery.deserialize.js
http://www.mydomain.com/offline/scripts/jquery.cookie.js
http://www.mydomain.com/offline/scripts/main.js
http://www.mydomain.com/offline/css/main.css
http://www.mydomain.com/offline/css/structure-details.css
http://www.mydomain.com/offline/css/ui-lightness/jquery-ui-1.8.16.custom.css
http://www.mydomain.com/img/header.gif
http://www.mydomain.com/offline/img/bg.png
http://www.mydomain.com/offline/img/header_riser.gif
http://www.mydomain.com/offline/img/logo.png
http://www.mydomain.com/offline/img/offline.png
http://www.mydomain.com/offline/index.htm
I've then renamed this file to 'cache.manifest' and uploaded it to the root of the online application (at the same level as my home-page) so that it's accessible at http://www.mydomain.com/online/cache.manifest.
The hosting company have supposedly added the content type of 'text/cache-manifest' to all files with the extension of .manifest in IIS. I think this is working because when I view the file in Firefox at http://www.mydomain.com/online/cache.manifest Firebug tells me the content type is:
Content-Type cache-manifest
Or should this be returning 'text/cache-manifest'? Perhaps this is the problem?
When I view the offline storage folder on my system (C:\Users\Me\AppData\Local\Mozilla\Firefox\Profiles\b12u6xza.default there's nothing in there related to this domain at all.
Can anyone suggest what might be going wrong - as I'm a little stumped?
First of all, the specification have changed, you should now use .appcache as manifest extension.
Second, the mime type should be defined as you say text/cache-manifest. I'm not really related to IIS but seems like there's two ways to add this MIME type , either trough IIS administration UI or via web.config file
Also, I would recommend you testing this with Google Chrome, since its console show all the manifest parsing data and errors, including when the manifest MIME type is not being correctly recognized.
There are some issues you have to be care about:
Chrome (And I guess that all the browsers at last) only handles the cache file over secure requests. If your request is not secure, your cache won't be executed.
Mobile browsers (At least, the devices I could test), doesn't care about secure or unsecure requests. But I'd prefer to be ready for the politics change.
I was breaking my head trying to understand why in Android my file worked fine and in iOS it was failing, and the reason was that I was running my browser in incognito mode. iOS in incognito mode can't cache the page, and you get error.
If I find more issues, I'll write it down.
Regards.
I spend a lot of time on this (on my own problem), offline cache was not working. Did everything possible I could do, changed cache file name, added handler via htaccess, uploaded the file from local to live server, still the same problem. Finally got some help from this question myself.
I tested it in safari and it was working fine. The problem was Chrome browser. I also tried https as another user suggested, that also did not fix the problem. So may be there is an extension in chrome that is forbidding it from using the cache file. Before troubleshooting your problem first test it in standard browsers Safari, FireFox, IE, Opera. Do not test in non-standard browsers such as Brave, it did not work in it.
Officially from google
Which confirms deprecation in Ver 61 and onward. I am running 80.
Chrome support for applicationcache and manifest for offline html5 application.
Application Cache / Offline Application / Manifest Cache.
Aware that applicationcache has been deprecated, but whilst
replacement (service workers) not ratified have yet to replace in
legacy systems we have.
However, recent browser update seems to have disabled offline
functionality on HTTPS site. Our manifest files are now ignored and
chrome dinosaur displayed instead.
On checking back through browsers seems this is common from Chrome 61
and newer however it only seems to have manifested recently.
Chrome issue? or combination of Chrome and underlying OS? We have
android/windows both showing same problem from 61 onwards.
Note : HTML5 Cache is being deprecated
All browsers are going to drop this feature, I noticed they are not working in any of the latest browsers. This MDN Mozilla strongly advises against it and not to use it.
try to add these lines in httpd.conf ..this might help you
AddType text/cache-manifest .manifest
<IfModule mod_expires.c>
ExpiresActive On
ExpiresByType text/cache-manifest "access plus 0 seconds"
</IfModule>
You'd better test using chrome's console !(you can't see these in chrome's network)
My example(visit:www.mustrank.com/views/1.php ).
Look at chrome's console output below,manifest file "website.appcache" is created first,and then sources "1.html" and "main.css" are downloaded
[Creating Application Cache with manifest
www.mustrank.com/views/website.appcache 1.php:1
Application Cache Checking event 1.php:1
Application Cache Downloading event 1.php:1
Application Cache Progress event (0 of 2)
www.mustrank.com/views/1.html 1.php:1
Application Cache Progress event (1 of 2)
www.mustrank.com/css/main.css 1.php:1
Application Cache Progress event (2 of 2) 1.php:1
Application Cache Cached event ]