Preloading mobile applications

Hybrid mobile apps use standard HTML5 and JavaScript in most of their screens. They bring shorter development cycles and fewer store submissions because HTML screens are served by a remote web server and not compiled as part of the native app.

But nothing comes without a price. Being remote means that the user experience will depend on mobile network quality. If you’ve been working with mobile apps, you already know that you can’t always rely on having a great network connection - most of the time you’ll be dealing with high latency and low bandwidth.

Great! So, what can we do to improve?

First time users are typically the ones that suffer the most. The majority of application resources come from the remote server with no local caching. Knowing that, we have built a new feature to improve the user experience: the preloader.

The preloader is a new web screen that can be activated on a per app basis and runs once per browser session. It downloads the preset application resources into a cache in the user’s device. Once the resources are cached, the nativagion and overall experience is improved, avoiding additional downloads. If the user has already accessed the application in a previous session, the process only needs to download those resources that are not cached yet.

This feature isn’t focused on making the immediate usage faster, but instead uses a increasingly common preloading pattern to inform the user of progress while preparing for faster subsequent experience.. Before, users were left with a simple loading versus progress indicator that could take several seconds, providing no useful information. The preloader will let them know exactly how much they’ve downloaded already.

You’ve probably seen this technique in resource intensive apps (native or hybrid). In the end, it’s all about user experience.

How can I activate the preloader in my applications?

The preloader is available as of OutSystems Platform 9 Amsterdam ( and up). Just go to the management console, Service Center, and configure the applications that will use the preloader. This setting is per environment and available under the Operation tab, in the application screen.

This feature is specially meant for mobile apps, so it won’t apply to desktop application. Our advice is that you determine, from your app portfolio, those that have mostly mobile usage, and activate this capability for them.

If you are using the Offline component from the Forge to build an offline application, you shouldn’t use the preloader as well. The offline component uses a different cache strategy.
Hi everyone,

You can now learn how to display a custom preload screen.