https://github.com/craftkit/craft-bootloader
Ultra fast web application loader by caching all libraries in IndexedDB.
https://github.com/craftkit/craft-bootloader
frontend-webdevelopment indexeddb javascript-framework javascript-library progressive-web-app single-page-applications web-cache
Last synced: 4 months ago
JSON representation
Ultra fast web application loader by caching all libraries in IndexedDB.
- Host: GitHub
- URL: https://github.com/craftkit/craft-bootloader
- Owner: craftkit
- Created: 2019-10-27T11:04:52.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2020-08-30T10:36:05.000Z (over 5 years ago)
- Last Synced: 2025-10-01T03:52:05.396Z (5 months ago)
- Topics: frontend-webdevelopment, indexeddb, javascript-framework, javascript-library, progressive-web-app, single-page-applications, web-cache
- Language: JavaScript
- Homepage:
- Size: 21.5 KB
- Stars: 2
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# CraftBootloader
Ultra fast web application loader by caching all libraries in IndexedDB.
## Usage
1. Load CraftBootloader (`craft-bootloader.min.js`)
2. Define `window.bootConfig`
```
window.bootConfig = {
library : [
// array of libraries you would like to cache in IndexedDB.
{ uri:'a URI', version:'current version' }
],
onProgress : function(lib){
// a library has been loaded
},
onLibrayLoaded : function(){
// all libraries have been loaded
}
};
```
## bootConfig spec
| Property | Description |
|:----------------|:----------------|
| library | Array of library element (see below) |
| onLibraryLoaded | Function called when all `library` elements have been loaded. |
| onProgress | Function called when a `library` element has been loaded. |
### library spec
| Property | Description |
|:----------------|:----------------|
| uri | resource location |
| version | version string.
If update, the resource will be reloaded.
You can use any string for `version`. But you may use somthing like: `1.1.1`. |
| _metadata_ | You can defined any other metadata in your library element.
This is useful when you manage loading progress by using `onProgress` |
* Cached library element will never be updated until you change the version.
* If you remove some libraries from bootConfig, those will be also removed from IndexedDB.
#### metadata example
Below sample uses metadata to indicate how much is loaded.
```
var loaded_percentage = 0;
window.bootConfig = {
library : [
{ uri:'https://example.com/lib1.js', version:'1.0.0', size:30 },
{ uri:'https://example.com/lib2.js', version:'1.0.0', size:40 },
{ uri:'https://example.com/lib3.js', version:'1.0.0', size:20 },
{ uri:'https://example.com/css1.css', version:'1.0.0', size:10 }
],
onProgress : function(lib){
loaded_percentage += lib.size;
console.log(`${loaded_percentage}% loaded`);
},
```
## Supported resource type
| Type | Suffix | Loader | Description |
|:------------|:---------|:--------------------|:-------------|
| JavaScript | .js | [JavaScriptLoader.js](./src/CraftBootloader/JavaScriptLoader.js) | loaded as text in generated script tag |
| Style sheet | .css | [StyleSheetLoader.js](./src/CraftBootloader/StyleSheetLoader.js) | loaded as text in generated style tag |
## Runnable example
CraftBootloader enhanced version of [Craft-Widget-Calendar sample](https://github.com/craftkit/craft-widget-calendar#sample).
```
Bootloader example
html,body { width: 100%; height: 100%; box-sizing:border-box; margin:0; padding:0; }
window.bootConfig = {
library : [
{ uri:'https://unpkg.com/@craftkit/craft-uikit/dist/craft-uikit.min.js', version:'1.0.0' },
{ uri:'https://unpkg.com/@craftkit/craft-widget-calendar/dist/craft-widget-calendar.min.js', version:'1.0.0' },
{ uri:'https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment.min.js', version:'1.0.0' }
],
onProgress : function(lib){
console.log(lib.uri+' was loaded');
},
onLibrayLoaded : function(){
// prepare demo data
var meta = {};
var this_month = moment();
var prev_month = this_month.clone().subtract(1,'month');
var next_month = this_month.clone().add(1,'month');
meta[ prev_month.date(10).format('YYYY-MM-DD') ] = { class:'has_note', note:'appointment 11:00' };
meta[ this_month.date(15).format('YYYY-MM-DD') ] = { class:'has_note', note:'appointment 9:00' };
meta[ this_month.date(24).format('YYYY-MM-DD') ] = { class:'has_note', note:'appointment 15:00' };
meta[ next_month.date(20).format('YYYY-MM-DD') ] = { class:'has_note', note:'appointment 14:00' };
var handler = {
handleSelectCalendarMonth : (month) => {
month.this_days.forEach( day => {
if( meta[day.iso] ){
day.classes.push(meta[day.iso].class); // apply has_note css class
day.note = meta[day.iso].note; // set metadata
day.renderView(); // re-render view
}
});
},
handleSelectCalendarDay : (day) => {
alert( day.note || 'Free!' );
}
};
class MyDay extends Craft.Widget.Calendar.Day {
constructor(options){
super(options);
this.note = '';
}
style(componentId){
return super.style(componentId) + `
.today { background-color: lightgreen; }
.has_note { background-color: #f2eb77; }
`;
}
}
var calendar = new Craft.Widget.Calendar.View({
yyyy : this_month.format('YYYY'),
mm : this_month.format('MM'),
delegate : handler,
Day : MyDay,
});
Craft.Core.Bootstrap.boot({
didBootApplication : function(options){
Craft.Core.Defaults.ALLOW_COMPONENT_SHORTCUT = true;
calendar.loadView();
document.getElementById('CraftRoot').appendChild(calendar.view);
}
});
}
};
```
## License
MIT