I started to use HTML5 cache to view a simple HTML page with one css file and two js files.
My problem is that the cache is used whether I'm offline or not. But I just want to use the cache when I'm offline.
Does anyone know how to solve this?
index.html file manifest:
<html manifest="app.cache">
app.cache manifest file:
CACHE MANIFEST
/index.html
/css/style.css
/js/jquery-1.7.1.min.js
/js/functions.min.js
Thank you!
According to the standard as given at whatwg, this is possible by changing the cache mode from the default fast to the prefer-online state. There, the instructions given are to add the following at the end of your appcache manifest, after listing all the files you need available offline:
SETTINGS:
prefer-online
NETWORK:
*
Apparently the idea behind this is to allow adding basic offline support to "legacy" applications that cannot help having to change the html document everytime it is served. I have not verified that this works in any current browser.
manifest="app.cache" - not going to solve your problem. It caches all the file listed in manifest file. You have to save your data in local storage or in local db and have to retrieve data from server/local based on connection status [online/offline].
Related
This is my first time in stackoverflow so if i break any rule or something, please tell me and ill try to fix it asap.
Im trying to configure a manifest (appcache) file to download 2 files( one html and one JS) and be able to use that HTML in offline mode, but after many trys, i couldnt configure the manifest file (or maybe is something else fail?) to store the appcache files.
At the moment i have in the same folder, 3 files: juego.html , damas.appcache and juego.js
damas.appcache:
CACHE MANIFEST
CACHE:
juego.html
juego.js
NETWORK:
*
and in the html file...
juego.html:
<!DOCTYPE html>
<html manifest="damas.appcache">
...
I dont think that more HTML code or the javascript code is needed for my explanation but if needed, ill put it.
¿How can i got the files to be stored in local?
Thanks to all
It's possible that you have an older version of the html cached. This seems to be the case because your setup looks correct, but you are missing a unique value—such as a timestamp—in your damas.appcache. The cache manifest only gets updated when there is a change to that file.
It's also possible that your mime-type is incorrect. Ensure that the mime-type set for the cache manifest is set to text/cache-manifest.
Apache:
AddType text/cache-manifest .appcache
References:
See Cache manifest on my website: http://pygeek.com
See A Beginner's Guide to Using the Application Cache: http://www.html5rocks.com/en/tutorials/appcache/beginner/
I am trying to make an xPages desktop application work offline, the challenge is how to make all the require resource available offline.
i have created the following manifest file and specified the same in pageManifest .
CACHE MANIFEST
#version: 0.0.15.7
jquery-1.10.2.min.js
angular.min.js
/DbPath/Angular.nsf/trashicon.gif
/DbPath/Angular.nsf/editicon.gif
/xsp/.ibmxspres/.mini/css/#Da&#Ib&2Tfxsp.css&2TfxspLTR.css&2TfxspSF.css.css
/xsp/.ibmxspres/dojoroot-1.6.1/dojo/dojo.js
/xsp/.ibmxspres/.mini/dojo/.en-us/#Iq.js
/DbPath/Angular.nsf/xsp/.ibmmodres/.css/bootstrap.min.css&custom.css
/DbPath/Angular.nsf/xsp/.ibmmodres/.js/jquery-1.10.2.min.js&bootstrap.min.js&angular.min.js&angularMisc.js
NETWORK:
/xsp/.ibmxspres/
/domjs/dojo-1.4.1/
/domjava/xsp/
I am not sure it is correct, it cache following image / Lib
/DBPath/Angular.nsf/trashicon.gif
/DBPath/Angular.nsf/editicon.gif
/xsp/.ibmxspres/dojoroot-1.6.1/dojo/dojo.js
/xsp/.ibmxspres/.mini/dojo/.en-us/#Iq.js
and the main page...
but it does not cache the
/DBPath/Angular.nsf/xsp/.ibmmodres/.js/jquery-1.10.2.min.js&bootstrap.min.js&angular.min.js&angularMisc.js
which is important, may b i am doing it wrong. Also how can we cache the oneui theme .
i am using Angular JS/JQuery which works fine when not cached, but it do not work with the manifest
if their is any simple example please share the link.
What part of the app do you want to make available offline?
If you're using full or partial updates, Server Side JavaScript and other server based stuff it cannot work offline.
Although this refers to Mobile apps it does have a sample showing you how to use HTML5 offline mode in XPages.
http://mobilecontrols.openntf.org
Offline.nsf contains basic HTML5 samples for how to do offline with XPages. MobileControlsOffline.nsf shows how to take a Dojo based mobile app offline.
The definition of a manifest makes an interesting read, as well as the URL document with the section about valid URLS.
As far as I know & is not a valid URL character if is isn't part of a parameter string that starts with ?.
So there are a set of actions you can try:
Switch off js/css combination. Since the files get cached locally anyway you don't benefit from it
Try (it might work) to replace & in the manifest with &
Let us know how it goes.
I did some tests (using Domino Designer) with Firefox and Chrome and it seems that everything can be cached in these browsers. My sugestion:
Instead of
/DBPath/Angular.nsf/xsp/.ibmmodres/.js/jquery-1.10.2.min.js&bootstrap.min.js&angular.min.js&angularMisc.js
Try a relative path without /
xsp/.ibmmodres/.js/jquery-1.10.2.min.js&bootstrap.min.js&angular.min.js&angularMisc.js
I used relative paths everytime. This is the cache manifest file used in my tests (all files were cached successfully):
CACHE MANIFEST
# 2013-01-07 v1.0.0
xsp/.ibmmodres/.js/js%2Fvendor%2Fmodernizr-2.6.2-respond-1.1.0.min.js&js%2Fvendor%2Fjquery-1.10.2.min.js&js%2Fvendor%2Fbootstrap.min.js&js%2Fvendor%2Fhandlebars.runtime-v1.1.2.js&js%2Fplugins.js&js%2Fmain.js
xsp/.ibmmodres/.css/css%2Fbootstrap.min.css&css%2Fbootstrap-theme.min.css&css%2Fmain.css
xsp/.ibmmodres/.js/jquery-1.10.2.min.map
/xsp/.ibmxspres/.mini/css/#Da&#Ib&2Tfxsp.css&2TfxspLTR.css&2TfxspSF.css.css
/xsp/.ibmxspres/dojoroot-1.6.1/dojo/dojo.js
/xsp/.ibmxspres/.mini/dojo/.es-es/#Iq.js
/xsp/.ibmxspres/.mini/dojo/.es/#Iq.js
NETWORK:
*
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.
Every URL can be linked to a single cache manifest. But I want several cache manifests linked to a same URL. Here is the reason:
Some files I want to be cached are rarely updated and large.
So everytime the cache gets updated these large files get re-downloaded even though they may not have been changed.
So I want to split up the cache. One cache for theses rarely updated large files and another cache for the often updated light files.
Do you guys have any idea how to split up an HTML5 cache?
The most efficient way is:
a) Use far-future expiration date (max-age) on all resources mentioned in manifest's CACHE section and add timestamp suffix to each file in the CACHE section, e.g.:
CACHE:
menu_1355817388000.js
toolbar_1355817389100.js
b) When any of the above files change on the server, regen/update manifest to change the timestamp. Only the file with the modified timestamp will get downloaded next time. Mission accomplished.
Note: Reload the page twice in the browser, as on the first refresh browser downloads just the manifest and uses old cached resources to paint the page. This is done to speed up displaying the page (there are tricks to handle this issue of double refresh, but they are outside the scope of your question)
See more info in this long but best article I ever seen on appcache.
Use an iframe
Your page's cache manifest would include the light files and the cache manifest of an iframe loaded by this page would include the large files
On chrome the iframe's application cache will also be used for the page. I didn't tested this method on other browsers yet.
see a live example at http://www.timer-tab.com and if you are using chrome see its split up cache at chrome://appcache-internals/
When the manifest file is changed and the files of the application cache are downloaded again, the normal HTTP caching rules still apply. This means that if you set the correct HTTP caching headers for these large files, you'll get a 304 so these files are not downloaded again. So it's not necessary to split the application cache.
Maybe an answer but I'd more like to shed some light on my findings as a I troubleshoot my own webapp.
I've discovered that I can use 2 iframes (manifest_framework) and (manifest_media) to load the manifests, but i'm still not exactly clear how they are targetted, but I had limited success.
manifest_framework:
CACHE MANIFEST
CACHE:
appdata.ini
dialog.png
jquery.min.js
login.htm
login.js
manifest.appcache.js
NETWORK:
*
FALLBACK:
manifest_media:
CACHE MANIFEST
CACHE:
manifest_fwk.php
od/audio_track_1_1.m4a
od/audio_track_1_2.m4a
od/audio_track_1_3.m4a
od/audio_track_1_4.m4a
od/video_1.mp4
od/video_2.mp4
od/video_3.mp4
NETWORK:
*
FALLBACK:
./ webapp.php
./index.php is the page the 'landing page' which itself isn't cached but falls back to webapp.php when offline.
What I don't understand is how these link to the webapp.php page.
I am finding I can only get access to one or the other manifests cache.
The above works in mobile safari, the media would be cached, and image but not necessarily the JS or images in the framework manifest.
Anyone have more examples where multiple manifests are referenced from the one URL/page?
The W3C working group has abandoned the file system api, so it SHOULD NOT BE USED anymore.
We'll likely see it fall off the next version of Chrome.
http://www.w3.org/TR/file-system-api/
CACHE MANIFEST
# This is a comment.
# Cache manifest version 0.0.1
# If you change the version number in this comment,
# the cache manifest is no longer byte-for-byte
# identical.
demoimages/mypic.jpg
demoimages/yourpic.jpg
demoimages/ourpic.jpg
sr/scroll.js
NETWORK:
# All URLs that start with the following lines
# are whitelisted.
# whitelisted items are needed to help the site function, you could put regularly
# changing items here
http://example.com/examplepath/
http://www.example.org/otherexamplepath/
CACHE:
# Additional items to cache.
demoimages/allpics.jpg
FALLBACK:
demoimages/currentImg.jpg images/stockImage.jpg`
If the Iframe trick does not work, use the HTML5 FileSystem API
See http://updates.html5rocks.com/2012/04/Taking-an-Entire-Page-Offline-using-the-HTML5-FileSystem-API
I am trying to write the manifest file but I am having weird problem in FF5, its caching all despite saying to don't do so. My manifest file looks like:
CACHE MANIFEST
NETWORK:
*
any ideas?
http://www.html5rocks.com/en/tutorials/appcache/beginner/
this says if you reference the manifest file in html files as manifest attributes then it will be cached even if its not listed in manifest file.
I did a presentation about offline and local storage not long ago.
Video available here: http://www.youtube.com/watch?v=AWCk6FZMpcU
It's a bit complicated. I had to read Dive Into HTML5 multiple times and then experiment a lot to get things working.
I have an example PHP manifest "build" script here: https://github.com/JasonHanley/note5/blob/master/build.php
It seems you don't have anything set to cache, why would you need a cache manifest file if this is the case? If you are trying to cache some things I would try properly defining them under CACHE: and see if it then cache's the appropriate assets.