153 lines
5 KiB
Markdown
153 lines
5 KiB
Markdown
es5-ff-spa-loader
|
||
=========
|
||
|
||
A javascript library providing server defined loading of assets for a single page application.
|
||
|
||
## Installation
|
||
|
||
npm --save install es5-ff-spa-loader
|
||
|
||
Then use the es5-ff-spa-loader.js in header as script resource or inline in body.
|
||
|
||
## Features
|
||
|
||
* Assets caching for offline use.
|
||
* Assets hashing for fast syncing.
|
||
* Assets types: js,css,cssData
|
||
* Caching backends: null,localStorage,webSqlDB,sqllite
|
||
* Server url question ui.
|
||
* Loader error ui.
|
||
* Build-in Cordova booting.
|
||
* Build-in AngularJS booting.
|
||
|
||
## Usage
|
||
|
||
### Usage Multi Server (Minimal)
|
||
|
||
FFSpaLoader.options.server.assets = '/api/path/to/spa/client/resources';
|
||
FFSpaLoader.start();
|
||
|
||
### Usage Single Server
|
||
|
||
FFSpaLoader.options.server.url = 'http://myserver';
|
||
FFSpaLoader.options.server.assets = '/api/path/to/spa/client/resources';
|
||
FFSpaLoader.start();
|
||
|
||
### Usage Angular
|
||
|
||
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.boot done');
|
||
});
|
||
|
||
## Assets format
|
||
|
||
{
|
||
"data": {
|
||
"resources": [
|
||
{
|
||
"url": "/static/js/assets.js",
|
||
"type": "js",
|
||
"hash": -164319899
|
||
},
|
||
{
|
||
"url": "/static/css/assets.css",
|
||
"type": "css",
|
||
"hash": 1391550981
|
||
},
|
||
{
|
||
"url": "/static/css/assets-data.css",
|
||
"type": "cssData",
|
||
"hash": 1371811412
|
||
},
|
||
]
|
||
}
|
||
|
||
The hash key is required as only on hash change the resource will be downloaded again, so multiple small files makes updates faster.
|
||
|
||
|
||
## Options
|
||
|
||
* debug.enable = Enable debug output. (default: false)
|
||
* debug.handler = Prints/log debug message. (default: console.log)
|
||
* debug.prefix = Debug message prefix. (default: 'FFSpaLoader.')
|
||
* error.handler = The error handler. (default: internal error handler ui)
|
||
* error.title = The error title. (default: 'Loader Error');
|
||
* error.style = The error ui css style. (default: red border box)
|
||
* boot.cordova.enable = Use deviceready event to boot when cordova is detected. (default: true)
|
||
* boot.cordova.timeout = Boot after timeout when deviceready event is not received. (default: 4096)
|
||
* boot.cordova.flag = The window flag which is set when cordova is booted. (default: 'FFCordovaDevice')
|
||
* boot.angular.enable = Auto bootstrap angular modules. (default: true)
|
||
* boot.angular.modules = The angular modules to boot. (default: empty)
|
||
* server.url = The server url like 'https://myhost', when null the user will get promted to input it. (default: null)
|
||
* server.assets = The server path to the assets resources definition file, is required (default: null)
|
||
* server.timeout = The timeout to download the server resources.
|
||
* server.flag = The window flag which is set when the server.url is know. (default: 'FFServerUrl')
|
||
* server.question.transport = The transport to prefix the server.url with. (default: 'http://')
|
||
* server.question.title = The question ui title. (default: 'Server')
|
||
* server.question.text = The question ui text. (default: 'Please provide the server name;')
|
||
* server.question.style = The question ui css style.(note: pending change) (default: green border box)
|
||
* cache.meta = The cache backend for the meta information, null is auto select. (default: null)
|
||
* cache.js = The cache backend for for js, null is auto select. (default: null)
|
||
* cache.css = The cache backend for for css, null is auto select. (default: null)
|
||
* cache.cssData = The cache backend for for cssData, null is auto select. (default: null)
|
||
|
||
## Cache Config
|
||
|
||
Per default all cache type as in auto select mode which detect and used the following;
|
||
|
||
* sqlitePlugin
|
||
* openDatabase
|
||
* localStorage
|
||
* none
|
||
|
||
More custom types are possible like; (todo: needs testing)
|
||
|
||
FFSpaLoader.options.cache.meta = null; // use auto -> TODO: currently other cached need meta needs fixing.
|
||
FFSpaLoader.options.cache.js = false;
|
||
FFSpaLoader.options.cache.css = false;
|
||
FFSpaLoader.options.cache.cssData = false;
|
||
|
||
if (FFSpaLoader.factory.detect.localStorage()) {
|
||
FFSpaLoader.options.cache.css = FFSpaLoader.factory.cache.localStorage;
|
||
FFSpaLoader.options.cache.cssData = FFSpaLoader.factory.cache.localStorage;
|
||
}
|
||
FFSpaLoader.options.server.assets = '/api/path/to/spa/client/resources';
|
||
FFSpaLoader.start();
|
||
|
||
|
||
## Example Application
|
||
|
||
There is a fully working nodejs example application in the example folder.
|
||
|
||
## Tested Browsers
|
||
|
||
* Chromium 46
|
||
* Iceweasel 43
|
||
* Opera 12 Presto
|
||
* Android 5 in Cordova
|
||
|
||
## Todo
|
||
|
||
* Auto cache cleanup code. (!! required before production !!)
|
||
* test in production
|
||
* Server header set+check support
|
||
* Redo css(?divs) of server question
|
||
* Add more tests
|
||
* css: set tag.media = 'only you';
|
||
* css: add media in resouces
|
||
* Add in browser tests
|
||
|
||
## Contributing
|
||
|
||
In lieu of a formal styleguide, take care to maintain the existing coding style.
|
||
Add unit tests for any new or changed functionality. Lint and test your code.
|
||
|
||
## Release History
|
||
|
||
### 0.1.x
|
||
* Initial release
|