Offline Compliancy

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 via npm 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 a json 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
        });
    }
};