From e5e2dfc56fba24254bfa403b01c5495bfb3a81da Mon Sep 17 00:00:00 2001
From: Willem <willem.git.2015@forwardfire.net>
Date: Sat, 16 Jan 2016 18:24:37 +0100
Subject: [PATCH] Fixed websql init async,cleanup options,add tested browsers

---
 README.md                                    |  34 +-
 es5-ff-spa-loader.js                         | 381 +++++++++++--------
 example/www_static/js/controller/page-foo.js |  13 +-
 example/www_static/js/example-app.js         |   4 +-
 example/www_views/index.ejs                  |  11 +-
 5 files changed, 261 insertions(+), 182 deletions(-)

diff --git a/README.md b/README.md
index 2684b91..b3e39cd 100644
--- a/README.md
+++ b/README.md
@@ -13,29 +13,23 @@ A javascript library providing server defined loading of resources for a single
 
   Single index.html
 
-	FFSpaLoader.options.debug = true;
+	FFSpaLoader.options.debug.enable = true;
+	FFSpaLoader.options.boot.angular.modules.push('exampleUI');
 	FFSpaLoader.options.server.url = 'http://myserver';
-	FFSpaLoader.options.server.urlPath = '/api/path/to/spa/client/resources';
-	FFSpaLoader.bootDevice(function() {
-		FFSpaLoader.options.cache.factory = FFSpaLoader.autoSelectCache();// need deviceready via bootDevice for sqllite.
-		FFSpaLoader.start(function() {
-			console.log('FFExample.bootstrap angular');
-			angular.bootstrap( $('body'), ['exampleUI']);
-		});
-	});
+	FFSpaLoader.options.server.assets = '/api/path/to/spa/client/resources';
+	FFSpaLoader.start();
 
 
 ## Usage Web
 
   Single index.html
   
-	FFSpaLoader.options.debug = true;
-	FFSpaLoader.options.server.url = '';
-	FFSpaLoader.options.server.urlPath = '/api/path/to/spa/client/resources';
-	FFSpaLoader.options.cache.factory = FFSpaLoader.autoSelectCache();
+	FFSpaLoader.options.debug.enable = true;
+	FFSpaLoader.options.boot.angular.modules.push('exampleUI');
+	FFSpaLoader.options.server.url = 'http://myserver';
+	FFSpaLoader.options.server.assets = '/api/path/to/spa/client/resources';
 	FFSpaLoader.start(function() {
-		console.log('FFExample.bootstrap angular');
-		angular.bootstrap( $('body'), ['exampleUI']);
+		console.log('FFExample.boot done');
 	});
 
 ## Usage Multi Server
@@ -45,12 +39,20 @@ A javascript library providing server defined loading of resources for a single
 
 ## Options
 
- * options.debug = Enable console debug output.
+ * options.debug.enable = Enable console debug output.
+ * TODO
 
 ## Example Application
 
   There is a fully working express example application in the example folder.
 
+## Tested Browsers
+
+ * Chromium	46
+ * Iceweasel 43
+ * Opera 12 Presto
+ * Android 5 in Cordova
+  
 ## Contributing
 
 In lieu of a formal styleguide, take care to maintain the existing coding style.
diff --git a/es5-ff-spa-loader.js b/es5-ff-spa-loader.js
index a6b5e62..196017a 100644
--- a/es5-ff-spa-loader.js
+++ b/es5-ff-spa-loader.js
@@ -26,7 +26,6 @@
 // TODO:
 // set tag.media = 'only you';
 // add media in resouces 
-// check supported browsers
 
 /**
  * FFSpaLoader is an assets loader for single page applications.
@@ -38,40 +37,57 @@
  * - Assets hashing for fast syncing.
  * - Assets types: js,css,cssData
  * - Caching backends: null,localStorage,webSqlDB,sqllite
- * - Optional ask and cache server assets url. 
- * - Cordova deviceready event booting.
+ * - Server url question ui.
+ * - Loader error ui. 
+ * - Build-in Cordova booting.
+ * - Build-in AngularJS booting.
  *
  * @module FFSpaLoader
  */
 var FFSpaLoader = (/** @lends module:FFSpaLoader */function () {
-	
+		
 	var options = {
-		debug:        false,
-		errorHandler: null,
-		bootDevice: {
-			timeout:    4096,
-			windowFlag: 'FFCordovaDevice'
+		debug: {
+			enable:  false,
+			handler: null, // auto filled
+			prefix:  'FFSpaLoader.'
 		},
-		askUrl: {
-			urlTransport:  'http://',
-			questionText:  'Please provide the server name;',
-			cssText:       '.ffAskUrl { font-size: 1em;margin: auto;width: 50%;border: 3px solid #73AD21;padding: 1em;} .ffAskUrl > div {font-size: 0.8em;color: #ccc;} .ffAskUrl > div > * {} .ffAskUrl > div > input {} .ffAskUrlError{ color: red}',
+		error: {
+			handler: null, // auto filled
+			title:   'Loader Error',
+			style:   '.ffError { margin: auto;width: 90%;border: 3px solid red;padding-left: 1em;padding-bottom: 1em;}'
+		},
+		boot: {
+			cordova: {
+				enable:  true,
+				timeout: 4096, // FIXME: Test really slow devices -> increase ? or add support -1 for disable or ?  
+				flag:    'FFCordovaDevice'
+			},
+			angular: {
+				enable:  true,
+				modules: []
+			},	
 		},
 		server: {
-			url:      null,
-			urlPath:  null,
-			timeout:  4096,
-			windowFlag: 'FFServerUrl',
+			url:         null,
+			assets:      null,
+			timeout:     4096,
+			flag:        'FFServerUrl',
 			header: {
-				request: {
+				request: { // TODO: add header support
 					'X-FFSpaLoader': '42'
 				},
 				response: {
 				}
+			},
+			question: {
+				transport: 'http://',
+				title:     'Server',
+				text:      'Please provide the server name;', // TODO: rename .ffAskUrl 
+				style:     '.ffAskUrl { font-size: 1em;margin: auto;width: 90%;border: 3px solid #73AD21;padding-left: 1em;padding-bottom: 1em;} .ffAskUrl > div {font-size: 0.8em;color: #ccc;} .ffAskUrl > div > * {} .ffAskUrl > div > input {} .ffAskUrlError{ color: red}',	
 			}
 		},
 		cache: {
-			factory: null,
 			meta:    null,
 			js:      null,
 			css:     null,
@@ -79,18 +95,8 @@ var FFSpaLoader = (/** @lends module:FFSpaLoader */function () {
 		}
 	};
 	
-	/**
-     * Prints debug message to the console if options.debug is true.
-     * @param {String} message	The message to log.
-     * @private
-     */
-	var utilDebug = function (message) {
-		if (options.debug !== true) {
-			return;
-		}
-		console.log('FFSpaLoader.'+message);
-	};
-	
+	var cacheDB = null; // single instance for websql
+		
 	var factory = {
 		detect: {
 			localStorage: function() {
@@ -113,7 +119,7 @@ var FFSpaLoader = (/** @lends module:FFSpaLoader */function () {
 				return 'cordova' in window;
 			},
 			cordovaDevice: function() {
-				return options.bootDevice.windowFlag in window;
+				return options.boot.cordova.flag in window;
 			},
 			mobileAgent: function() {
 				return navigator.userAgent.match(/(iPhone|iPod|iPad|Android|BlackBerry|IEMobile)/);
@@ -165,25 +171,38 @@ var FFSpaLoader = (/** @lends module:FFSpaLoader */function () {
 						cb(err.message+' code: '+err.code);
 					};
 				};
-				var cacheDB = window.openDatabase(opt.name, opt.version, opt.name, opt.size);
-				cacheDB.transaction(function(tx) {
-					var query = 'SELECT value FROM cache_store WHERE key = \"test-for-table\"';
-					utilDebug('websql.init query: '+query);
-					tx.executeSql(query, [], function(tx,res) {}, function(tx,errorNoTable) {
+				var cacheDBInit = function(cb) {
+					cacheDB.transaction(function(tx) {
 						var query = 'CREATE TABLE cache_store(id INTEGER PRIMARY KEY AUTOINCREMENT, key TEXT NOT NULL, value TEXT NOT NULL)';
-						utilDebug('websql.init query: '+query);
+						utilDebug('websql.init query '+query);
 						tx.executeSql(query, [], function(tx,res) {
 							var query = 'CREATE UNIQUE INDEX cache_store__key__udx ON cache_store (key)';
-							utilDebug('websql.init query: '+query);
-							tx.executeSql(query, [], function(tx,res) {}, sqlErrorHandler(options.errorHandler)); // FIX<E: asyns error ?
-						}, sqlErrorHandler(options.errorHandler));	
+							utilDebug('websql.init query '+query);
+							tx.executeSql(query, [], function(tx,res) {cb(null)}, sqlErrorHandler(cb));
+						}, sqlErrorHandler(cb));
 					});
-				});
+				}
 				return {
+					cacheOpen: function(cb) {
+						if (cacheDB !== null) {
+							cb(null); // open once.
+							return;
+						}
+						cacheDB = window.openDatabase(opt.name, opt.version, opt.name, opt.size);
+						cacheDB.transaction(function(tx) {
+							var query = 'SELECT value FROM cache_store WHERE key = \"test-for-table\"';
+							utilDebug('websql.cacheOpen query '+query);
+							tx.executeSql(query, [], function(tx,res) {
+								cb(null);
+							}, function(tx,errorNoTable) {
+								cacheDBInit(cb);
+							});
+						});
+					},
 					cacheGetValue: function(key, cb) {
 						cacheDB.transaction(function(tx) {
 							var query = 'SELECT value FROM cache_store WHERE key = ?';
-							utilDebug('websql.cacheGetValue query: '+query);
+							utilDebug('websql.cacheGetValue query '+query);
 							tx.executeSql(query,[key], function(tx, res) {
 								if (res.rows.length === 0) {
 									cb(null, null);
@@ -197,15 +216,15 @@ var FFSpaLoader = (/** @lends module:FFSpaLoader */function () {
 					cacheSetValue: function(key, value, cb) {
 						cacheDB.transaction(function(tx) {
 							var query = 'SELECT value FROM cache_store WHERE key = ?';
-							utilDebug('websql.cacheSetValue query: '+query);
+							utilDebug('websql.cacheSetValue query '+query);
 							tx.executeSql(query,[key], function(tx, res) {
 								if (res.rows.length === 0) {
 									var query = 'INSERT INTO cache_store (key,value) VALUES (?,?)';
-									utilDebug('websql.cacheSetValue query: '+query);
+									utilDebug('websql.cacheSetValue query '+query);
 									tx.executeSql(query, [key,JSON.stringify(value)], nullDataHandler(cb), sqlErrorHandler(cb));		
 								} else {
 									var query = 'UPDATE cache_store SET value = ? WHERE key = ?';
-									utilDebug('websql.cacheSetValue query: '+query);
+									utilDebug('websql.cacheSetValue query '+query);
 									tx.executeSql(query, [JSON.stringify(value),key], nullDataHandler(cb), sqlErrorHandler(cb));
 								}
 							}, sqlErrorHandler(cb));
@@ -214,8 +233,10 @@ var FFSpaLoader = (/** @lends module:FFSpaLoader */function () {
 					cacheDeleteValue: function(key, cb) {
 						cacheDB.transaction(function(tx) {
 							var query = 'DELETE FROM cache_store WHERE key = ?';
-							utilDebug('websql.cacheDeleteValue query: '+query);
-							tx.executeSql(query, [key], nullDataHandler(cb), sqlErrorHandler(cb));
+							utilDebug('websql.cacheDeleteValue query '+query);
+							tx.executeSql(query, [key], function (tx, res) {
+								setTimeout(function() {cb(null);}); // return next tick so transaction is flushed before location.reload 
+							}, sqlErrorHandler(cb));
 						});						
 					}
 				}
@@ -223,24 +244,36 @@ var FFSpaLoader = (/** @lends module:FFSpaLoader */function () {
 		}
 	};
 	
+	/**
+     * Prints the debug message with prefix to the options.debug.handler if options.debug.enable is true.
+     * @param {String} message	The message to log.
+     * @private
+     */
+	var utilDebug = function (message) {
+		if (options.debug.enable !== true) {
+			return;
+		}
+		options.debug.handler(options.debug.prefix+message);
+	};
+	
 	/**
      * The default error handler which renders the error in the browser.
      * @param {String|Error} err	The error message.
      * @private
      */
 	var utilErrorHandler = function(err) {
-		utilDebug('utilErrorHandler error: '+err);
+		utilDebug('utilErrorHandler error '+err); // TODO: Add Error object support
 		
 		var rootTag = document.createElement('div');
 		rootTag.setAttribute('class','ffError');
 		
 		var cssTag = document.createElement("style");
 		cssTag.type = "text/css";
-		cssTag.innerHTML = '.ffError { margin: auto;width: 50%;border: 3px solid red;padding: 1em;} .ffAskUrl > div {font-size: 0.8em;color: red;}';
+		cssTag.innerHTML = options.error.style;
 		rootTag.appendChild(cssTag);
 
 		var titleTag = document.createElement('h1');
-		titleTag.appendChild(document.createTextNode('Error'));
+		titleTag.appendChild(document.createTextNode(options.error.title));
 		rootTag.appendChild(titleTag);
 		
 		var questionTag = document.createElement('p');
@@ -249,7 +282,6 @@ var FFSpaLoader = (/** @lends module:FFSpaLoader */function () {
 		
 		document.getElementsByTagName('body')[0].appendChild(rootTag);
 	};
-	options.errorHandler = utilErrorHandler;
 	
 	/**
      * Fetches an url resource with a XMLHttpRequest.
@@ -262,16 +294,16 @@ var FFSpaLoader = (/** @lends module:FFSpaLoader */function () {
 		var httpRequest = new XMLHttpRequest();
 		httpRequest.onreadystatechange = function() {
 			if (httpRequest.readyState == 4 && httpRequest.status === 200) {
-				utilDebug('utilHttpFetch url: '+url+' done in '+(new Date().getTime()-startTime)+' ms.');
+				utilDebug('utilHttpFetch url \"'+url+'\" done in '+(new Date().getTime()-startTime)+' ms.');
 				cb(null, httpRequest);
 			} else if (httpRequest.readyState == 4) {
-				cb('Wrong status: '+httpRequest.status);
+				cb('Wrong status '+httpRequest.status);
 			}
 		}
 		httpRequest.open('GET', url, true);
 		httpRequest.timeout = options.server.timeout; // ieX: after open()
 		httpRequest.ontimeout = function() {
-			cb('timeout after '+options.server.timeout+' of url: '+url);
+			cb('timeout after '+options.server.timeout+' of url '+url);
 		};
 		httpRequest.send();
 	};
@@ -280,9 +312,6 @@ var FFSpaLoader = (/** @lends module:FFSpaLoader */function () {
 		if (options.cache[type]) {
 			return options.cache[type];
 		}
-		if (options.cache['factory']) {
-			return options.cache['factory'];
-		}
 		return null;
 	};
 	
@@ -291,13 +320,13 @@ var FFSpaLoader = (/** @lends module:FFSpaLoader */function () {
 	};
 
 	var cacheCheckType = function (type, cb, action) {
-		cacheHasService(type)?action():cb('No caching for: '+type);
+		cacheHasService(type)?action():cb('No caching for '+type);
 	};
 	
 	var cacheGetValue = function(type, key , cb) {
 		cacheCheckType(type, cb, function() {
 			var cacheKey = type+'_'+key;
-			utilDebug('cacheGetValue key: '+cacheKey);
+			utilDebug('cacheGetValue key '+cacheKey);
 			cacheGetService(type).cacheGetValue(cacheKey,cb);	
 		});
 	};
@@ -305,7 +334,7 @@ var FFSpaLoader = (/** @lends module:FFSpaLoader */function () {
 	var cacheSetValue = function(type, key, value, cb) {
 		cacheCheckType(type, cb, function() {
 			var cacheKey = type+'_'+key;
-			utilDebug('cacheSetValue key: '+cacheKey);
+			utilDebug('cacheSetValue key '+cacheKey);
 			cacheGetService(type).cacheSetValue(cacheKey,value,cb);	
 		});
 	};
@@ -313,20 +342,20 @@ var FFSpaLoader = (/** @lends module:FFSpaLoader */function () {
 	var cacheDeleteValue = function(type, key, cb) {
 		cacheCheckType(type, cb, function() {
 			var cacheKey = type+'_'+key;
-			utilDebug('cacheDeleteValue key: '+cacheKey);
+			utilDebug('cacheDeleteValue key '+cacheKey);
 			cacheGetService(type).cacheDeleteValue(cacheKey,cb);	
 		});
 	};
 	
 	var cleanupCache = function (resources, cb) {
-		utilDebug('cleanupCache TODO cacheList: '+0+' resources: '+resources.length);
+		utilDebug('cleanupCache TODO cacheList '+0+' resources '+resources.length);
 		
 		// TODO: impl for removes in resource lists
 		cb(null);
 	};
 	
 	var injectResourceData = function(resource, data, cb) {
-		utilDebug('injectResourceData resource: '+JSON.stringify(resource)+' data: '+data.length);
+		utilDebug('injectResourceData resource '+JSON.stringify(resource)+' data '+data.length);
 		var tag = null;
 		if (resource.type === 'css' || resource.type === 'cssData') {
 			tag = document.createElement('style');
@@ -347,7 +376,7 @@ var FFSpaLoader = (/** @lends module:FFSpaLoader */function () {
 	var storeResourceKey = function (resource, cb) {
 		// Add all cache keys in central list so we can clear the cache item if resources are removed.
 		var cacheKey = resource.type+'_keys';
-		cacheGetValue('meta',cacheKey,function (err,value) {
+		cacheGetValue('meta',cacheKey,function (err,value) { // TODO: move to resource.type
 			if (err !== null) {
 				cb(err);
 				return;
@@ -361,7 +390,7 @@ var FFSpaLoader = (/** @lends module:FFSpaLoader */function () {
 	}
 	
 	var storeResource = function (resource, httpRequest, cb) {
-		utilDebug('storeResource url: '+resource.url+' hash: '+resource.hash);
+		utilDebug('storeResource url '+resource.url+' hash '+resource.hash);
 		var item = {
 			resource: resource,
 			data: httpRequest.responseText
@@ -388,11 +417,9 @@ var FFSpaLoader = (/** @lends module:FFSpaLoader */function () {
 					return;
 				}
 				if (value === null) {
-					utilDebug('loadResource cache miss');
+					utilDebug('loadResource cache miss'); // + hash mismatch as its the key
 				} else if (value.resource === undefined) {
 					utilDebug('loadResource cache wrong obj');
-				} else if (value.resource.hash !== resource.hash) {
-					utilDebug('loadResource cache hash mismatch');
 				} else {
 					utilDebug('loadResource cache hit');
 					injectResourceData(value.resource,value.data,cb);
@@ -456,7 +483,7 @@ var FFSpaLoader = (/** @lends module:FFSpaLoader */function () {
 					tag = document.createElement('script');
 					tag.type = 'text/javascript';
 				}
-				utilDebug('injectResources resource: '+JSON.stringify(resource));
+				utilDebug('injectResources from '+JSON.stringify(resource));
 				
 				tag.appendChild(document.createTextNode(item.data));
 				
@@ -481,29 +508,29 @@ var FFSpaLoader = (/** @lends module:FFSpaLoader */function () {
 			cb('Missing options.server.url');
 			return;
 		}
-		if (options.server.urlPath === null) {
-			cb('Missing options.server.urlPath');
+		if (options.server.assets === null) {
+			cb('Missing options.server.assets');
 			return;
 		}
-		window[options.server.windowFlag] = options.server.url; 
+		window[options.server.flag] = options.server.url; 
 		
-		var resourcesUrl = options.server.url + options.server.urlPath;
-		utilDebug('startLoader serverUrl: '+resourcesUrl);
+		var resourcesUrl = options.server.url + options.server.assets;
+		utilDebug('startLoader assets \"'+resourcesUrl+'\"');
 		utilHttpFetch(resourcesUrl, function(err, httpRequest) {
 			if (err !== null) {
-				utilDebug('startLoader fetch error: '+err);
+				utilDebug('startLoader fetch error '+err);
 				if (cacheHasService('meta')) {
 					cacheGetValue('meta','server_resources',function(err, value) {
 						if (err !== null) {
 							cb(err);
 						} else if (value === null) {
-							cb('Have no cache of server resouces from: '+options.server.url);
+							cb('Have no cache of server resouces from '+options.server.url);
 						} else {
 							injectResources(value, cb);
 						}
 					});
 				} else {
-					cb('Could not fetch server resouces from: '+options.server.url);
+					cb('Could not fetch server resouces from '+options.server.url);
 				}
 				return;
 			}
@@ -511,7 +538,7 @@ var FFSpaLoader = (/** @lends module:FFSpaLoader */function () {
 			JSON.parse(httpRequest.responseText).data.resources.forEach(function (r) {
 				resources.push(r);
 			});
-			utilDebug('startLoader resources: '+resources.length);
+			utilDebug('startLoader resources '+resources.length);
 			if (cacheHasService('meta')) {
 				cacheSetValue('meta','server_resources',resources, function (err) {
 					if (err !== null) {
@@ -542,13 +569,13 @@ var FFSpaLoader = (/** @lends module:FFSpaLoader */function () {
 		}
 		
 		options.server.url = '';
-		if (options.askUrl.urlTransport !== undefined) {
-			options.server.url += options.askUrl.urlTransport;
+		if (options.server.question.transport !== undefined) {
+			options.server.url += options.server.question.transport;
 		}
 		options.server.url += inputTag.value;
 		
-		var resourcesUrl = options.server.url + options.server.urlPath;  
-		utilDebug('askUrlStart check url: '+resourcesUrl);
+		var resourcesUrl = options.server.url + options.server.assets;  
+		utilDebug('askUrlStart check assets '+resourcesUrl);
 		
 		// TODO: add+check headers
 		utilHttpFetch(resourcesUrl,function(err, req) {
@@ -560,7 +587,7 @@ var FFSpaLoader = (/** @lends module:FFSpaLoader */function () {
 			if (cacheHasService('meta')) {
 				cacheSetValue('meta','server_url',options.server.url, function(err) {
 					if (err !== null) {
-						cb(err);				
+						cb(err);
 					} else {
 						startLoader(cb);
 					}
@@ -585,20 +612,24 @@ var FFSpaLoader = (/** @lends module:FFSpaLoader */function () {
 		
 		var cssTag = document.createElement("style");
 		cssTag.type = "text/css";
-		cssTag.innerHTML = options.askUrl.cssText;
+		cssTag.innerHTML = options.server.question.style;
 		rootTag.appendChild(cssTag);
 		
+		var titleTag = document.createElement('h1');
+		titleTag.appendChild(document.createTextNode(options.server.question.title));
+		rootTag.appendChild(titleTag);
+		
 		var questionTag = document.createElement('p');
-		questionTag.appendChild(document.createTextNode(options.askUrl.questionText));
+		questionTag.appendChild(document.createTextNode(options.server.question.text));
 		rootTag.appendChild(questionTag);
 		
 		var formTag = document.createElement('div');
 		rootTag.appendChild(formTag);
 		
-		if (options.askUrl.urlTransport !== undefined) {
+		if (options.server.question.transport !== undefined) {
 			var transportTag = document.createElement('label');
 			rootTag.setAttribute('for','serverInput');
-			transportTag.appendChild(document.createTextNode(options.askUrl.urlTransport));
+			transportTag.appendChild(document.createTextNode(options.server.question.transport));
 			formTag.appendChild(transportTag);
 		}
 		var inputTag = document.createElement('input');
@@ -626,6 +657,46 @@ var FFSpaLoader = (/** @lends module:FFSpaLoader */function () {
 		document.getElementsByTagName('body')[0].appendChild(rootTag);
 	};
 	
+	var startCacheType = function (type,cb) {
+		if (options.cache[type] !== null && options.cache[type] === false) {
+			utilDebug('startCacheType '+type+' disabled');
+			options.cache[type] = null;
+			return cb(null);
+		}
+		if (options.cache[type] === null) {
+			if (factory.detect.cordovaDevice() && factory.detect.sqlitePlugin()) {
+				utilDebug('startCacheType auto sqlitePlugin for '+type);
+				options.cache[type] = factory.cache.websql({openDatabase: window.sqlitePlugin});
+			} else if (factory.detect.openDatabase()) {
+				utilDebug('startCacheType auto openDatabase for '+type);
+				options.cache[type] = factory.cache.websql();
+			} else if (factory.detect.localStorage()) {
+				utilDebug('startCacheType auto localStorage for '+type);
+				options.cache[type] = factory.cache.localStorage();
+			} else {
+				utilDebug('startCacheType '+type+' none');
+			}
+		}
+		if (options.cache[type] !== null && typeof options.cache[type]['cacheOpen'] === "function") {
+			options.cache[type].cacheOpen(cb);
+		} else {
+			cb(null);
+		}
+	};
+	
+	var startCache = function (cb) {
+		startCacheType('meta', function(err) {
+			if (err !== null) { return cb(err); }
+			startCacheType('js', function(err) {
+				if (err !== null) { return cb(err); }
+				startCacheType('css', function(err) {
+					if (err !== null) { return cb(err); }
+					startCacheType('cssData', cb);
+				});
+			});
+		});
+	};
+	
 	/**
      * Starts the loader.
      * 
@@ -635,72 +706,73 @@ var FFSpaLoader = (/** @lends module:FFSpaLoader */function () {
 		var startTime = new Date().getTime();
 		var cb = function(err) {
 			if (err !== null) {
-				options.errorHandler(err);
+				options.error.handler(err);
 			} else {
 				utilDebug('start done in '+(new Date().getTime()-startTime)+' ms.');
-				if (typeof cbArgu === "function") {
-					cbArgu();
-				}		
+				bootAngular(function(err) {
+					if (err !== null) { return options.error.handler(err); }
+					if (typeof cbArgu === "function") {
+						cbArgu();
+					}	
+				});
 			}
 		}
-		utilDebug('start serverUrl: '+options.server.url);
-		if (options.server.url !== null) {
-			startLoader(cb);
-			return;
+		if (options.debug.enable === true) {
+			var optionsKeys = Object.keys(options);
+			for (var keyId in optionsKeys) {
+				var key = optionsKeys[keyId];
+				utilDebug('start config '+key+' '+JSON.stringify(options[key]));
+			}
 		}
-		if (cacheHasService('meta')) {
-			cacheGetValue('meta','server_url',function(err, value) {
-				if (err !== null) {
-					cb(err);
-				} else if (value === undefined || value === null || value === '') {
-					askUrl(cb);
-				} else {
-					options.server.url = value;
+		bootCordova(function(err) {
+			if (err !== null) { return cb(err); }
+			startCache(function(err) {
+				if (err !== null) { return cb(err); }
+				if (options.server.url !== null) {
 					startLoader(cb);
+					return;
+				}
+				if (cacheHasService('meta')) {
+					cacheGetValue('meta','server_url',function(err, value) {
+						if (err !== null) {
+							cb(err);
+						} else if (value === undefined || value === null || value === '') {
+							askUrl(cb);
+						} else {
+							options.server.url = value;
+							startLoader(cb);
+						}
+					});
+				} else {
+					askUrl(cb);
 				}
 			});
-		} else {
-			askUrl(cb);
-		}
+		});
 	};
 	
-	var clearServer = function(cb) {
+	var clearServerUrl = function(cb) {
 		if (cb === undefined) {
 			cb = function() {};
 		}
 		if (cacheHasService('meta')) {
-			cacheDeleteValue('meta','server_url',function(err) {
-				if (err !== null) {
-					cb(err);
-				} else {
-					cb(null);
-				}
-			});
+			cacheDeleteValue('meta','server_url',cb);
 		} else {
 			cb(null);
 		}
 	}
 	
-	/**
-     * Helper for automatic selecting the best to none cache backend option.
-     * 
-     * Order of detection; sqllite,openDatabase,localStorage,none.
-     */
-	var autoSelectCache = function() {
-		if (factory.detect.cordovaDevice() && factory.detect.sqlitePlugin()) {
-			utilDebug('autoSelectCache sqlitePlugin');
-			return factory.cache.websql({openDatabase: window.sqlitePlugin});
+	var bootAngular = function(cb) {
+		if (options.boot.angular.enable !== true) {
+			utilDebug('bootAngular disabled by options');
+			return cb(null);
 		}
-		if (factory.detect.openDatabase()) {
-			utilDebug('autoSelectCache openDatabase');
-			return factory.cache.websql();
+		if (options.boot.angular.modules.length === 0) {
+			utilDebug('bootAngular disabled by no modules');
+			return cb(null);
 		}
-		if (factory.detect.localStorage()) {
-			utilDebug('autoSelectCache localStorage');
-			return factory.cache.localStorage();
-		}
-		utilDebug('autoSelectCache none');
-		return null; // no caching
+		utilDebug('bootAngular start '+options.boot.angular.modules);
+		angular.bootstrap(document, options.boot.angular.modules);
+		cb(null);
 	}
 	
 	/**
@@ -709,40 +781,43 @@ var FFSpaLoader = (/** @lends module:FFSpaLoader */function () {
      * Note: On none cordova device page is will timeout. 
      * 
      * @param {function} cb Callback gets called device is ready to use.
+     * @private
      */
-	var bootDevice = function(cb) {
+	var bootCordova = function(cb) {
+		if (options.boot.cordova.enable !== true) {
+			utilDebug('bootCordova disabled by options');
+			return cb(null);
+		}
+		if (factory.detect.cordova() !== true) {
+			utilDebug('bootCordova disabled by detect');
+			return cb(null);
+		}
 		var startTime = new Date().getTime();
 		var bootOnce = function() {
-			if (typeof cb === "function") {
-				var callback = cb;
-				cb = null;
-				utilDebug('bootDevice done in '+(new Date().getTime()-startTime)+' ms.');
-				callback();
-			}
+			var callback = cb;
+			cb = null;
+			utilDebug('bootCordova done in '+(new Date().getTime()-startTime)+' ms.');
+			callback();
 		};
-		if (!factory.detect.cordova()) {
-			utilDebug('bootDevice webapp');
-			bootOnce();
-			return;
-		}
-		utilDebug('bootDevice timeout: '+options.bootDeviceTimeout);
+		utilDebug('bootCordova timeout '+options.boot.cordova.timeout);
 		setTimeout ( function () {
-			utilDebug('bootDevice timeout');
+			utilDebug('bootCordova timeout');
 			bootOnce();
-		}, options.bootDevice.timeout);
+		}, options.boot.cordova.timeout);
 		document.addEventListener("deviceready", function () {
-			window[options.bootDevice.windowFlag] = true;
-			utilDebug('bootDevice '+options.bootDevice.windowFlag);
+			window[options.boot.cordova.flag] = true;
+			utilDebug('bootCordova '+options.boot.cordova.flag);
 			bootOnce();
 	    }, false);
 	};
 	
+	// Auto fill handlers and return public object.
+	options.debug.handler = function(msg) {console.log(msg);};
+	options.error.handler = utilErrorHandler;
 	return {
 		options: options,
 		factory: factory,
 		start: start,
-		bootDevice: bootDevice,
-		autoSelectCache: autoSelectCache,
-		clearServer: clearServer
+		clearServerUrl: clearServerUrl
 	};
 })();
diff --git a/example/www_static/js/controller/page-foo.js b/example/www_static/js/controller/page-foo.js
index 600d0ac..8988a07 100644
--- a/example/www_static/js/controller/page-foo.js
+++ b/example/www_static/js/controller/page-foo.js
@@ -1,7 +1,7 @@
 
 var tpl = '<div><h2>Foo</h2><p>Welcome to the foo.</p></div>';
 tpl += '<input type=\"button\" class=\"btn btn-default\" ng-click=\"doReboot()\" value=\"Reboot\"></input>';
-tpl += '<input type=\"button\" class=\"btn btn-default\" ng-click=\"doClearServer()\" value=\"Clear Server\"></input>';
+tpl += '<input type=\"button\" class=\"btn btn-default\" ng-click=\"doClearServerUrl()\" value=\"Clear Server\"></input>';
 
 pageRouteInit.push(function ($routeProvider, $locationProvider) {
 	$routeProvider.when('/example-ui/foo', {
@@ -15,8 +15,13 @@ function PageFoo($scope) {
   		window.location.reload(true);
 	};
 	
-	$scope.doClearServer = function ( path ) {
-		FFSpaLoader.clearServer();
-  		window.location.reload(true);
+	$scope.doClearServerUrl = function ( path ) {
+		FFSpaLoader.clearServerUrl(function(err) {
+			if (err) {
+				window.alert(err);
+			} else {
+				window.location.reload(true);
+			}
+		});
 	};
 }
diff --git a/example/www_static/js/example-app.js b/example/www_static/js/example-app.js
index 8367b79..b6ba062 100644
--- a/example/www_static/js/example-app.js
+++ b/example/www_static/js/example-app.js
@@ -1,8 +1,8 @@
 'use strict';
-document.title = 'FF-Spa-Loader Example';
+document.title = 'FFSpaLoader Example';
 
 var serverUrl = window.FFServerUrl;
-console.log('FF provided serverUrl: '+serverUrl);
+console.log('FFExample provided serverUrl \"'+serverUrl+'\"');
 
 $(document.createElement('div')).attr('id', 'wrapper').appendTo($('body'));
 $(document.createElement('div')).attr('ng-controller', 'ApplicationController').attr('ng-include', '\''+serverUrl+'/example-ui/thtml/header\'').appendTo($('#wrapper'));
diff --git a/example/www_views/index.ejs b/example/www_views/index.ejs
index 9a90080..eedc08b 100644
--- a/example/www_views/index.ejs
+++ b/example/www_views/index.ejs
@@ -6,13 +6,10 @@
 	</head>
 	<body><%- inline %>
 		<script>
-			FFSpaLoader.options.debug = true;
-			FFSpaLoader.options.server.urlPath = '/static/spa-client-resources';
-			FFSpaLoader.options.cache.factory = FFSpaLoader.autoSelectCache();
-			FFSpaLoader.start(function() {
-				console.log('FFExample.bootstrap angular');
-				angular.bootstrap( $('body'), ['exampleUI']);
-			});
+			FFSpaLoader.options.debug.enable = true;
+			FFSpaLoader.options.boot.angular.modules.push('exampleUI');
+			FFSpaLoader.options.server.assets = '/static/spa-client-resources';
+			FFSpaLoader.start();
 		</script>
 	</body>
 </html>