How to make folder urls offline with HTML5? - html

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

Related

Appcache not working

I have a small webapp and I am working on appcache (offline caching) feature of HTML5.
following is my Manifest file code:
File name: Manifest1.appcache
CACHE MANIFEST
#21/02/14
CACHE:
Login.htm
.........
and in my Login.htm I just have simple text to display and I have manifest="Manifest1.appcache" in html opening tag.
I have deployed this on IIS and it works fine while IIS is on, when I stop IIS I can access this page once and then i get 404. It fires (Application Cache Obsolete event). I have no clue why, please help.
not sure if this is it. But I had trouble with my manifest file and it came down to a couple file names spelled incorrectly. Have you tried validating the manifest file to make sure all files are spelled correctly?
Here's a good tool for this: http://manifest-validator.com/validate Put in the url to the cache manifest i.e. something like http://www.yoursite.com/manifest.appcache
I made a few mistakes where I accidentally didn't include the folder in the path to the image. This tool worked well to find those mistakes. Also, if you're using Grunt, there is a grunt task called grunt manifest that will auto build the manifest file to avoid spelling mistakes and so on. https://github.com/gunta/grunt-manifest
The obsolete event fires whenever the device is online (or at least if it seems that way to the browser) but the manifest file cannot be retrieved. So, shutting down the server does not simulate being offline properly, because the browser still thinks that it's online (which it is), but it can't retrieve the manifest file, which, to the browser, is the same as if you had deleted the manifest, so shutting down the server isn't how you should be testing this. The best way to simulate being offline is...being offline! Turn off wifi on your device, and then all should work well.
Also make sure that your server is configured to serve .appcache files with the text/cache-manifest MIME type, some browsers require that.

How to make XPages application work Offline with HTML 5

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:
*

How to create HTML5 100% offline applications?

Sometimes I need to write a small program just to represent some data in a chart, or similar stuff. I have been wanting to do this kind of things through the browser, with HTML5. I think it would be nice to use its canvas to create a nice UI for simple apps.
I have read some articles related to offline applications with HTML5, but they focus on downloading all the data you need and save it to the cache to use it offline later. You even need to set up an Apache server (or similar) to create your app.
I don't need my app to be online, just in my computer. I just want to create a simple application, nothing to do with internet at all.
How can I do this? Is it even possible or worthy? Is there any "Hello world!" tutorial about this around there?
Something like Mozilla Prism would be good for displaying the content as an application.
There's no need to have a web server like Apache for just displaying HTML5/Javascript in a browser. You can just have it all in a folder on your desktop and then load it in the browser with the file:// protocol.
For example file://C:/Documents and Settings/YourUser/Desktop/YourApp/index.html would open an HTML file in a folder called YourApp on your user's desktop.
If you ever find you need to read static HTML+Javascript files locally then I'd recommend using this python command in the console:
python -m SimpleHTTPServer
It launches a simple HTTP server (who'd of guessed) that serves files from the current working directory. Effectively, it's the same as launching an apache webserver, putting some static assets in /var/www/... etc. etc.
You could also just browse to the assets at file:///some/folder; however, most browsers will prevent javascript from using AJAX when files are loaded in that way, which will manifest as a bunch of bugs when you go to load it.

Cache Manifest messes up my app when online

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.

Workaround for href="file://///..." in Firefox

On an intranet site, let's say I want to link to a file on a share using UNC, at:
\\servername\foldername\filename.rtf
It seems the correct way to do this is with markup like this:
filename.rtf
That's five slashes - two for the protocol, one to indicate the root of the file system, then two more to indicate the start of the server name.
This works fine in IE7, but in Firefox 3.6 it will only work if the html is from a local file. I can't get it to work when the file comes from a web server. The link is "dead" - clicking on it does nothing.
Is there a workaround for this in Firefox? Those two browsers should be all I need to worry about for now.
Since this is obviously a feature of Firefox, not a bug, can someone explain what the benefit is to preventing this type of link?
This question has been asked at least twice before, but I was unable to find those posts before posting my own (sorry):
Open a direct file on the hard drive from firefox (file:///)
Firefox Links to local or network pages do not work
Here is a summary of answers from all three posts:
Use WebDAV — this is the best solution for me, although much more involved than I had anticipated.
Use http:// instead of file:///// — this will serve up a copy of the document that the user cannot edit and save.
Edit user.js on the client as described here — this worked for me in Firefox 3.6.15, but without access to client machines, it's not a solution.
In Firefox, use about:config, change the Security.fileuri.strict_origin_policy setting to false — this doesn't work for me in 3.6.15. Other users on [SO] have also reported that it doesn't work.
Use the locallinks Firefox extension — this sets the Security.fileuri.strict_origin_policy to true for you, and appears to have no other effect.
Read the file server-side and send it as the response — this presents the same problem as simply configuring your web server to use http://.
Browsers like Firefox refuse to open the file:// link when the parent HTML page itself is served using a different protocol like http://.
Your best bet is to configure your webserver to provide the network mapped file as a web resource so that it can be accessed by http:// from the same server instead of by file://.
Since it's unclear which webserver you're using, I can't go in detail as to how to achieve this.
In Firefox to Open File:\\\\\yourFileServer\docs\doc.txt for example you need to turn on some options in Firefox configuration:
user_pref("capability.policy.policynames", "localfilelinks");
user_pref("capability.policy.localfilelinks.sites", "http://yourServer1.companyname.com http://yourServer2.companyname.com");
user_pref("capability.policy.localfilelinks.checkloaduri.enabled", "allAccess");
As it turns out, I was unaware that Firefox had this limitation/feature. I can sympathize with the feature, as it prevents a user from unwittingly accessing the local file system. Fortunately, there are useful alternatives that can provide a similar user experience while sticking to the HTTP protocol.
One alternative to accessing content via UNC paths is to publish your content using the WebDAV protocol. Some content managements systems, such as MS SharePoint, use WebDAV to provide access to documents and pages. As far as the end-user experience is concerned, it looks and feels just like accessing network files with a UNC path; however, all file interactions are performed over HTTP.
It might require a modest change in your file access philosophy, so I suggest you read about the WebDAV protocol, configuration, and permission management as it relates to your specific server technology.
Here are a few links that may be helpful if you are interested in learning more about configuring and using WebDAV on a few leading HTTP servers:
Apache Module mod_dav
IIS 7.0 WebDAV Extension
Configuring WebDAV Server in IIS 7, 6, 5
Add your own policy, open configuration "about:config" in the location bar and add three new entries:
capability.policy.policynames MyPolicy
capability.policy.MyPolicy.sites http://localhost
capability.policy.MyPolicy.checkloaduri.enabled allAccess
Replace http://localhost with your website.
Works with Firefox 70.0.
I don't know if this will work, but give it a shot! Old article, but potentially still useful.
http://www.techlifeweb.com/firefox/2006/07/how-to-open-file-links-in-firefox-15.html