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:
*
Related
I am trying to work with CACHE MANIFEST since there is still no full support for Service Workers across browsers.
I was using (SWPrecacheWebpackPlugin) and it worked well but on IOS service workers are not working. So I went back to use App Cache and used offline-plugin webpack plugin. Problem with this is that with SWPrecacheWebpackPlugin and can add external regex for dynamic images and other requests but I don't think this is possible with AppCache Manifest. Please suggest a way. I want to add a additional external pattern for image and html page, for example, a page with pattern /details-101, /detail-102 and all images that these pages have pattern like img.cdn.com/something/some.jpeg.
Sample App Manifest file
CACHE MANIFEST
#ver:3/1/2017, 0:00:00 PM
#plugin:4.6.1
CACHE:
/img/icons.ad7bcdc.png
/img/logo.a04e995.png
/img/logo.12c22c8.png
/vendor.bundle.js
/style.css
/details-*
https://fonts.googleapis.com/css?family=Montserrat:500,700
http://fonts.googleapis.com/icon?family=Material+Icons
NETWORK:
*
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 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.
My web application uses folder urls only (with mvc routes). I am wondering how I can cache some of these urls, and prticularly the site root.
CACHE MANIFEST
/
.
/myfolder
/myfolder/
myfolder
Thanks for the help.
What you have should work. Have you tested it? It validates fine in http://manifest-validator.com/ (I wasn't sure about the "." -- I think it's redundant though).
I think simply /myfolder will work.
To test, simply open the app from chrome with the javascript console up. You'll see the various caching operations.
Greg
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.