Overview
Eko projects that are served on Eko’s mobile app can be downloaded by users for offline viewing. These projects are packed into downloadable packages which include videos, assets and code.
Assets generated by eko Studio and everything committed to the git repo will be packed for offline delivery automatically.
You should be careful when relying on available internet connection to make sure your project can play in offline mode. The following sections focus on the common pitfalls - fetching data from web services and downloading static assets.
Web Services
Project that access web services must handle scenarios in which the service is not accessible and provide a default behavior. Make sure you are handling errors and that your code does not break.
For example, if the code relies on data from stats plugin, the project should still work in cases it can’t get it. Having some init code when the request is done successfully is not enough. You should provide a default in the catch
block as well.
Note that fonts delivery services such as Google Fonts are not just a simple set of URLs to static assets, they are actually dynamic web services. In order to have the fonts in the offline version, include the actual fonts files in the git repository and load them from there.
External Static Assets
There are cases where external assets from a 3rd patry domain, such as images, audio files or scripts, must be loaded in runtime. For offline delivery those must be packed as well. Make sure to add the URLs of the external assets used in the configuration file extResources.json
located in the src/js
folder.
Avoid using to external static assets. Assets uploaded to eko Studio or commited to the git repository are handled automatically and do not require extra steps that are error prone.
For example, external libraries can be added via eko Studio or vianpm install
. See third-party libraries for details.
Using extResources.json
Let’s say you are using our pixi plugin and also have some custom buttons with background images. The pixi plugin and the button image URLs are hardcoded in the code.
Your intro.js
may look like this:
import loadjs from 'loadjs';
export default {
onIntroReady: function(player) {
// Load the pixi plugin
loadjs('https://eko.com/resources/js/plugins/pixi/pixi.min.gz.js');
.then(() => {
player.initPlugin('pixi');
});
}
}
And your app.js
like this:
import EkoUIComponents from 'EkoUIComponents';
class MyButton extends EkoUIComponents.EkoDecisionButton {
getContent() {
const styles = {
backgroundImage: 'url(https://myhost.com/resources/myImg1.jpg)',
backgroundSize: 'cover'
};
return (
<button style={styles}>
<span>{super.getContent()}</span>
</button>
);
}
}
export default {
onReady: function(player) {
player.ui.override('button_beginning_0e6cf6', MyButton);
player.pluginInited('pixi').then(() => {
// Do something that requires the pixi plugin
});
}
};
Now, let’s use extResources.json
and move the required URLs from the code to have them available in the offline package.
The external resources URLs configuration resides in
src/js/extResources.json
. This is ajson
file which includes the URLs of the external static assets used by your project. The strcutre of the file is flexible and nesting can be used for namespacing.
{
"pixi": "//eko.com/resources/js/plugins/pixi/pixi.min.gz.js",
"images": {
"img1": "https://myhost.com/resources/myImg1.jpg"
}
}
The config file should be loaded and parsed into a JavaScript object to be used in your code. Import extResources
in both intro.js
and app.js
and replace the URLs in the code with the matching keys from extResources
.
Here is the final code after the replacement:
intro.js
// Import extResources
import extResources from './extResources.json';
import loadjs from 'loadjs';
export default {
onIntroReady: function(player) {
// Use extResources instead of hardcoded URL
loadjs(extResources.pixi, { returnPromise: true })
.then(() => {
player.initPlugin('pixi');
});
}
};
app.js
// Import extResources
import extResources from './extResources.json';
import EkoUIComponents from 'EkoUIComponents';
class MyButton extends EkoUIComponents.EkoDecisionButton {
getContent() {
const styles = {
// Use extResources instead of hardcoded URL
backgroundImage: `url(${extResources.images.img1})`,
backgroundSize: 'cover'
};
return (
<button style={styles}>
<span>{super.getContent()}</span>
</button>
);
}
}
export default {
onReady: function(player) {
player.ui.override('button_beginning_0e6cf6', MyButton);
player.pluginInited('pixi').then(() => {
// Do something that requires the pixi plugin
});
}
};