Caching Client Resources

1. Client Side Cache

This feature requires https

Helium can use Service Workers to cache some service (dynamic) and static resources (.js, .css, .png etc.) so that they are served from the cache instead of making network requests.

1.1. Enable Client Caching

Following settings need to be set to true to enable Caching of resources in Helium

tvc.core.clientsidecache.enabled=true - Used to enable client side caching (default = false)

tvc.helium.serviceworker.enabled=true - Used to enable caching in Helium (default = true) The following sections describe different configuration options available with Helium.

1.2. Precaching of static resources

Static resources are things like icons, css and bundled js (main.js and vendor.js)

At build time a file manifest is created for these file with a hash of the content as a version. The client will use the hash when requesting the files which means that they only need to be downloaded again if the content changes.

1.3. Enable Dynamic Caching

Following setting need to be set to true to enable Caching of dynamic data in Helium

tvc.helium.cache.dynamic.enabled=true - Used to enable caching in Helium for dynamic data, e.g. object response (default = false)

1.4. Caching of custom resources

A real time caching "cache first" strategy can be used for custom resources (e.g. /helium/custom/). This means that a cached version of the resource will be returned if available, else, it’ll be fetched over the network, added to the cache and returned.

tvc.helium.cache.static.custom.enabled=true|false property (default=false) can be used to enable/ disable caching of custom resources.

1.5. Precompile Handlebars.js templates

Precompile handlebars

It is preferred that handlebars are precompiled in the build process with npm/webpack/gulp/grunt..

Another way is to install the handlebars js with npm and build it manually.

1.5.1. Precompile manually

Install handlebar utility:

npm install handlebars -g

Precompile:

handlebars <input> -r <root path, excluded from name> -f <output> -n <namespace>

handlebars src/main/webapp/helium/custom -r src/main/webapp -f /opt/tomcat/8.0.18/webapps/tvc/helium/custom/compiled_custom_templates.js -n App.templates.compiled

2. Saving object pages for offline access

Save objects for offline

The above demo has elements (e.g. column indicating tick mark) from Launchpads examples. When configured in OOTB product, the spinning icon in Topbar will indicate count of objects as they are successfully saved

2.1. Prerequisites

All settings mentioned in Client Side Cache are enabled.

2.2. JavaScript API

JavaScript API App.routing.openObjectsInBackground(objectIds) can be used to save object pages for accessing when offline.

2.3. Configuration example

Configure a toolbar command for a table widget, such as,

<Command>
    <Label>offline.labels.save</Label>
    <FontIcon>download icon</FontIcon>
    <OnClick>App.acme.saveForOffline</OnClick>
</Command>

In your JS file namespaced with App.acme, add a function,

function saveForOffline(){
    App.routing.openObjectsInBackground(this.getSelectedObjectIds());
}

Add built-in command, SyncQueue.xml in TopBar, i.e. in Helium.xml, add

...
<Right>
    <Command>tvc:command:helium:backgroundqueue/SyncQueue.xml</Command>
</Right>
...

This command is used to indicate a spinning icon and a counter when saving is in progress. For a more up-to-date example, refer HEX distribution with this release.