A Study of Cordova and Its Data Storage Strategies

Gilles Callebaut∗ , Michiel Willocx† , Jan Vossaert† , Vincent Naessens† , Lieven De Strycker∗

Leuven ∗ KU

DRAMCO, Department of Electrical Engineering (ESAT),

Ghent Technology Campus, 9000 Ghent, Belgium
{gilles.callebaut, lieven.destrycker}@kuleuven.be
† KU Leuven

MSEC, imec-DistriNet
Ghent Technology Campus, 9000 Ghent, Belgium
{michiel.willocx, jan.vossaert, vincent.naessens}@cs.kuleuven.be

Abstract—The mobile world is fragmented by a variety of mobile device features (i.e., sensors and other platform APIs) remains
platforms, e.g., Android, iOS and Windows Phone. While native an obstacle. In many cases, the developer is forced to use a
applications can fully exploit the features of a particular mobile limited set of the native APIs, or to use a work-around –which
platform, limited or no code can be shared between the different often involves native code– to achieve the desired functionality.
implementations. Cross-Platform Tools (CPTs) allow developers This paper specifically tackles the use case of data storage APIs
to target multiple platforms using a single codebase. These
in Cordova. This paper extends our previous work [1] with an
tools provide general interfaces on top of the native Application
Programming Interfaces (APIs). Apart from the performance elaboration of the inner workings of the Cordova framework and
impact, this additional layer may also result in the suboptimal use new experiments concerning the employed bridge mechanisms.
of native APIs. More specifically, this paper focuses on Apache Cordova is one of the most used CPTs [2][3]. It is a Web-
Cordova; the most used CPT. Via a data storage case study, the to-native wrapper, allowing the developer to bundle Web apps
impact of the abstraction layer is analyzed. Both the performance into standalone applications.
overhead and API coverage are discussed. Based on the analysis,
an extension to the cross-platform storage API is proposed and Contribution. The contribution of this paper is fourfold.
implemented. In addition, the Cordova framework, including the First, the Cordova framework including the Cordova Bridge
employed bridge techniques, is studied and elaborated. is discussed. Second, four types of data storage strategies
Keywords–Cross-Platform Tools; data storage; performance are distinguished in the setting of mobile applications (i.e.,
analysis; API coverage; Apache Cordova/Phonegap. variables, databases, files and sensitive data). The support for
each strategy using both native and Cordova development is
analysed and compared. Third, based on this analysis a new
I. I NTRODUCTION Cordova plugin that extends the Cordova Storage API coverage
An increasing number of service providers are making their is designed and developed. This plugin tackles a shortcoming
services available via the smartphone. Mobile applications are in the currently available Cordova APIs. Finally, the security
used to attract new users and support existing users more and performance of the different native and Cordova storage
efficiently. Service providers want to reach as many users as mechanisms is evaluated for both the Android and iOS platform.
possible with their mobile services. However, making services The remainder of this paper is structured as follows.
available on all mobile platforms is very costly due to the frag- Section II points to related work. Section III gives an overview
mentation of the mobile market. Developing native applications of CPTs. Section IV discusses the inner workings of Cordova
for each platform drastically increases the development costs. applications, followed by Section V where an overview of
While native applications can fully exploit the features of a data storage strategies and their API coverage in Cordova and
particular mobile platform, limited or no code can be shared native applications is given. The design and implementation of
between the different implementations. Each platform requires NativeStorage, a new Cordova storage plugin, is presented in
dedicated tools and different programming languages (e.g., Section VI. Section VII presents a security and performance
Objective-C, C# and Java). Also, maintenance (e.g., updates or evaluation of the Cordova and native storage mechanisms with
bug fixes) can be very costly. Hence, application developers a strong focus on the performance evaluation. The final section
are confronted with huge challenges. A promising alternative presents the conclusions and points to future work.
are mobile Cross-Platform Tools. A significant part of the code
base is shared between the implementations for the different II. R ELATED W ORK
platforms. Further, many Cross-Platform Tools such as Cordova Many studies compare CPTs based on a quantitative
use client-side Web programming languages to implement assessment. For instance, Rösler et al. [4] and Dalmasso
the application logic, supporting programmers with a Web et al. [5] evaluate the behavioral performance of cross-platform
background. applications using parameters such as start-up time and memory
Although several Cross-Platform Tools became more mature consumption. Willocx et al. [6] extend this research and
during the last few years, some skepticism towards CPTs include more CPTs and criteria (e.g., CPU usage and battery
remains. For many developers, the limited access to native usage) in the comparison. Further, Ciman and Gaggi [7] focus
specifically on the energy consumption related to accessing Examples of such mobile JavaScript frameworks are: JQuery
sensors in cross-platform mobile applications. These studies are Mobile [13], Ionic [14] and Sencha Ext JS [15].
conducted using an implementation of the same application in Two strategies can be applied to distribute the applications
a set of cross-platform tools and with the native development to end-users. First, an application (i.e., Web app) can be
tools. This methodology provides useful insights in the overall hosted on a Web server. This flexible approach allows the user
performance overhead of using CPTs. Other research focuses on to access the application in a mobile browser in a platform-
evaluating the performance of specific functional components. agnostic manner. Hence, a large market can be easily reached
For instance, Zhuang et al. [8] evaluate the performance of the and the time-to-market can be short. However, the application
Cordova SQlite plugin for data storage. The work presented in is constrained to the resources available in the browser. For
this paper generalizes this work by providing an overview and instance, the JavaScript API of the browser (e.g., access to
performance analysis of the different data storage mechanisms sensors such as accelerometer and GPS) is more limited than
available in Cordova, and comparing the performance with using native approaches. Furthermore, accessing the application
native components. is more cumbersome than starting an application installed on
Several other studies focus on the evaluation of the device.
cross-platform tools based on qualitative criteria. For in- A second strategy is to pack the Web app into a standalone
stance, Heitkötter et al. [9] use criteria such as development application by using a Web-to-native wrapper. The resulting
environment, maintainability, speed/cost of development and application is often called a hybrid app due to the fact that it has
user-perceived application performance. The user-perceived both native as well as web characteristics. The packaging results
performance is analyzed further in [10], based on user ratings in an application that can be submitted to the app stores of the
and comments on cross-platform apps in the Google Play Store. different platforms. The Web app does not longer reside in the
The API coverage (e.g., geolocation and storage) of cross- browser, but in a chromeless (without the window decoration
platform tools is discussed in [11]. It is complementary with of a regular web browser) WebView. The application consists
the work presented in this paper, which specifically focuses of the WebView wrapper and the applications HTML, CSS
on the API coverage, performance and security related to data and JavaScript files. The Web-to-native wrapper also features
storage. a JavaScript bridge that allows access to a broader range of
platform APIs compared to the browser-exposed functionality.
III. C ROSS -P LATFORM T OOLS A typical structure of a hybrid application is illustrated in
Cross-platform tools can be classified in five categories Figure 1. The most popular Web-to-native wrapper is Apache
based on their employed strategy [12]: JavaScript frameworks, Cordova, formerly PhoneGap.
Web-to-native wrappers, runtimes, source code translators and
app factories. The latter provides a drag-and-drop interface to B. Source-Code Translators and Runtimes
allow the creation of simple applications without programming Another CPT strategy is translating source code to code
knowledge. This paper focuses on the web-to-native wrapper which can be understood by the underlaying platform such
Cordova. However, an overview of relevant CPT strategies is as a runtime. Runtimes shield applications from underlying
given to illustrate the differences, similarities and rationales. platform differences through compatibility layers. The applica-
We can further classify cross-platform tool strategies in: (I) tion source code can be either compiled or interpreted by the
web-based CPTs and (II) source-code translators and runtimes. runtime during execution.
Also, the source code can be translated to the platform’s
A. Web-Based Cross-Platform Tool Strategies native language or to executable byte code via a Source-Code
JavaScript frameworks as well as Web-to-native wrappers Translator. Popular source code translators are Xamarin [16]
make use of Web technologies for the development of mobile and Qt [17]. In most cases, a combination of a source-code
applications. A major advantage of these tools is that they translator and a runtime is employed where a compilation step
enable Web developers to participate in mobile application translates the source code to a binary or intermediary language
development. Due to the availability of web browser capabilities that runs on the runtime. In a minority of tools, the source
in mobile operating systems this strategy is widely adopted. code will run straight on the runtime (e.g., Titanium [18]) or
The user interface of such an application is developed with will be translated to native source code without a runtime (e.g.,
HTML and CSS, and the functionality is implemented using NeoMAD [19]). For each platform, the resulting source code is
JavaScript. compiled using the development tools provided by the platform
To adapt to the specific interfaces and navigation patterns developer.
of mobile applications new mobile Javascript frameworks have
been developed. These mobile interfaces are optimized for IV. C ORDOVA F RAMEWORK
smaller screen sizes compared to regular websites and, for A typical Cordova application consists of three important
instance, provide support for the touch UI of mobile devices. components: the application source, the WebView and plugins,
Some frameworks also try to mimic the UI of native applications as depicted in Figure 1. The Cordova framework allows these
by providing native skins. Thereby tailoring the UI of the components to exchange information. A crucial component
application to the look and feel of the platform on which is the Cordova bridge which provides a way to connect the
it is running. These skins, however, do not provide a fully client-side native code with the JavaScript source.
native experience. Most JavaScript frameworks also support
traditional architectural design patterns such as Modelviewcon- A. Cordova Application Structure
troller (MVC) and Modelviewviewmodel (MVVM) to facilitate The application code is loaded in a chromeless WebView.
the development of well-structured and maintainable code. By default, Cordova applications use the WebView bundled
 of the selected bridging mechanism, the data requires several
conversion steps before and after crossing the bridge.

B. Cordova Bridges
It is crucial to understand the inner workings of this bridge
to be able to correctly evaluate the performance of the Cordova
storage APIs. Here we consider the used bridge techniques on
the Android and iOS platform.
Default in Android, Cordova uses the
addJavaScriptInterface method for reaching
the native side. This method injects a supplied object into the
WebView. Afterwards an interface to the client-side Android
code is accessible in JavaScript running in the WebView.
This results in a bridge which can be invoked in JavaScript.
Cordova invokes the evaluateJavascript method to
execute JavaScript code in client-side Android.
Figure 1. Structure of a Cordova application. Light grey arrows represent The following bridge techniques are used in Android to
JavaScript calls, darker grey arrows represent native calls. The Cordova exchange data and commands:
framework is illustrated by the grey area.
• JavaScript to Native Android:
◦ JS Object (default). Methods of a Java object
are directly accessed in Javascript via the
with the operating system. An alternative is to include the addJavaScriptInterface as described
Crosswalk WebView [20]. The Crosswalk WebView provides above.
uniform behaviour and interfaces between different (versions ◦ Prompt. The data is communicated through
of) operating systems. Hence, developers do not need to take the prompt functionality of the WebView. This
into account the differences in behaviour/APIs between the is used pre-JellyBean (i.e., Android 4.1), where
WebViews contained in the different (versions of) operating addJavascriptInterface is disabled.
systems. Despite the efforts of the Crosswalk project, the • Native Android to Javascript:
maintenance and further developments have halted. The Android
platform WebView has moved to an application so it can be ◦ Evaluation Bridge (default). Through
updated separately to the Android platform. As a consequence, evaluateJavascript native Android
the crosswalk WebView will not yield a better performance code can execute JavaScript directly. This
on devices were the WebView is kept up-to-date. Therefore, bridge was recently added and is now the
we do not consider the impact of the crosswalk project on the default bridge.
performance of data storage strategies in this paper. ◦ Polling. The JavaScript side can be accessed
by periodically polling for messages using the
Cordova developers have two options for accessing device Javascript to Native Bridge.
resources: the HTML5 APIs provided by the WebView and ◦ Event interception. The Javascript code inter-
plugins. Despite the continuously growing HTML5 function- cepts events (i.e., Load URL and Online event)
ality [21] and the introduction of Progressive Web Apps [22], and extracts the message from that event.
the JavaScript APIs provided by the WebView are not –yet–
sufficient for the majority of applications. They do not provide In iOS similar bridge techniques can be used. The
full access to the diverse resources of the mobile device, such javascript-to-native bridge is realized via URL loading in-
as sensors (e.g., accelerometer, gyroscope) and functionality terposition. On the JavaScript side a URL is loaded in
provided by other applications installed on the device (e.g., an iframe or via XMLHttpRequest (XHR). This loading is
contacts, maps, Facebook login). Plugins allow JavaScript code intercepted by the native side. The JavaScript side com-
to access native APIs by using a JavaScript bridge between municates via the native side by encoding messages inside
the Web code and the underlying operating system. Commonly these URLs. The native side can access the JavaScript side
used functionality such as GPS are provided by Cordova as by executing JavaScript code via the WebView’s method
core plugins. Additional functionality is provided by over 1000 StringByEvaluatingJavaScriptFromString.
third-party plugins, which are freely available in the Cordova
plugin store [23]. Plugins consist of both JavaScript code and V. DATA S TORAGE I N C ORDOVA
native code (i.e., Java for Android, Objective-C and recently This work focuses on data storage mechanisms in Cor-
Swift for iOS). The JavaScript code provides the interface to the dova applications. Four types of data storage strategies are
developer. The native source code implements the functionality distinguished: files, databases, persistent variables and sensitive
of the plugin and is compiled when building the application. The data. Databases are used to store multiple objects of the same
Cordova framework provides the JavaScript bridge that enables structure. Besides data storage, databases also provide methods
communication between JavaScript and native components. For to conveniently search and manipulate records. File storage can
each platform, Cordova supports several bridging mechanisms. be used to store a diverse set of information such as audio, video
At runtime, Cordova selects a bridging mechanism. When an and binary data. Persistent variables are stored as key-value
error occurs, it switches to another mechanism. Independently pairs. It is often used to store settings and preferences. Sensitive
data (e.g., passwords, keys, certificates) are typically handled 1 // coarse grained API
separately from other types of data. Mobile operating systems 2 NativeStorage.setItem("reference_to_value",<value>,
<success-callback>, <error-callback>);
provide dedicated mechanisms that increase the security of 3 NativeStorage.getItem("reference_to_value",<success-
sensitive data storage. callback>, <error-callback>);
The remainder of this section discusses the storage APIs 4 NativeStorage.remove("reference_to_value",<success-
callback>, <error-callback>);
available in Cordova and native Android/iOS. A summary of 5 NativeStorage.clear(<success-callback>, <error-
the results is shown in Table I. callback>);

Listing 1. NativeStorage – Coarse-grained API

TABLE I. S TORAGE API C OVERAGE

Cordova Android iOS 1 // fine grained API

WebSQL 2 NativeStorage.put<type>("reference_to_value",<value>,
Databases IndexedDB SQLite SQLite <success-callback>, <error-callback>);
3 NativeStorage.get<type>("reference_to_value",<
SQLite Plugin
success-callback>, <error-callback>);
4 NativeStorage.remove("reference_to_value",<success-
Files Cordova File Plugin java.io NSData callback>, <error-callback>);
Persistent Variables LocalStorage Shared Prefs NSUserDefaults Listing 2. NativeStorage – Fine-grained API
Property Lists

Sensitive Data SecureStorage Plugin KeyStore Keychain

Keychain D. Sensitive Data
Android provides two mechanisms to store credentials: the
KeyChain and the KeyStore. A KeyStore is bound to one
A. Databases specific application. Applications can not access credentials
Android and iOS provide a native interface for the SQLite in KeyStores bound to other applications. If credentials need
library. Cordova supports several mechanisms to access database to be shared between applications, the KeyChain should be
functionality from the application. First, the developer can use used. The user is asked for permission when an application
the database interface provided by the WebView. Both the attempts to access credentials in the KeyChain. Credential
native and CrossWalk WebViews provide two types of database storage on iOS is provided by the Keychain. Credentials
APIs: WebSQL and IndexedDB. Although WebSQL is still added to the Keychain are, by default, app private, but can be
commonly used, it is officially deprecated and thus no longer shared between applications from the same publisher. Cordova
actively supported [24]. Second, developers can access the developers can use the credential storage mechanisms provided
native database APIs via the SQLite Plugin [25]. by Android and iOS via the SecureStorage (cordova-plugin-
secure-storage) [28] plugin.
B. Files VI. NATIVE S TORAGE P LUGIN
In Android, the file storage API is provided by the java.io An important limitation of using HTML5 APIs (e.g.,
package, in iOS this is included in NSData. Cordova provides IndexedDB and LocalStorage) to store data in Cordova ap-
a core plugin for File operation, namely Cordova File Plugin plications is that both on Android and iOS the cache of the
(cordova-plugin-file) [26]. Files are referenced via URLs WebView can be cleared when, for instance, the system is
which support using platform-independent references such as low on memory. This section presents NativeStorage [29], a
application folder. Cordova plugin for persistent data object storage, mitigating
the limitations of the HTML5 storage mechanisms.
C. Persistent Variables A. Plugin Requirements
In Android, storing and accessing persistent variables is The requirements of the plugin are listed below:
supported via SharedPreferences. It allows developers to
store primitive data types (e.g., booleans, integers, strings). R1 Persistent and sufficient storage
iOS developers have two options to store persistent variables: R2 Storage of both primitive data types and objects
NSUserDefaults and Property Lists. NSUserDefaults has a R3 Support for Android and iOS
similar behaviour to SharedPreferences in Android. Property R4 App private storage
Lists offer more flexibility by allowing storage of more complex R5 Responsive APIs
data structures and specification of the storage location. Cordova R6 A user-friendly API
applications can use the LocalStorage API provided by the
B. Realisation of NativeStorage
Android and iOS WebView. Although it provides a simple API,
developers should be aware of several disadvantages. First, The plugin consists of JavaScript and native code. The
LocalStorage only supports storage of strings. More complex JavaScript API provides the interface to application developers.
data structures need to be serialized and deserialized by the The native side handles the storage of variables using native
developer. Second, LocalStorage is known [27] to perform platform APIs.
poorly on large data sets and has a maximum storage capacity NativeStorage provides two sets of JavaScript APIs, a fine-
of 5MB. grained and a coarse-grained API, which are both asynchronous
and non-blocking. The coarse grained API (Figure 2a) provides statically typed language, satisfying R6 and R2 . Using both
a type-independent interface, variables are automatically con- the coarse- and fine-grained API, the different JavaScript data
verted to JSON objects via the JSON interfaces provided by the types can be stored. Developers, however, need to be aware
WebView and passed as string variables to the native side. When that the object storage relies on the JSON interface of the
a value is retrieved, the WebView is used to convert the string WebView to convert the object to a JSON string representation.
back to an object. The fine-grained API (Figure 2b) provides a The WebView, for instance, does not support the conversion of
separate implementation for the different JavaScript types. On circular data structures. These types of objects, hence, need to
the native side, the variables are stored via SharedPreferences be serialized by the developer before they can be stored.
in Android and NSUserDefaults in iOS. Since its release to Github [31] and NPM [32] the plugin has
been adopted by many Cordova application developers. We have
registered over 16 500 downloads per month; with an overall
Object Object
JSON number of downloads of 172 250 over a time span of two years.1
string
Furthermore, the plugin is part of the 4% most downloaded
Disk packages on NPM. The plugin has been adopted in Ionic Native
JSON
Object Object
string (Ionic 2) [33] and the Telerik plugin marketplace [34]. Telerik
verifies that plugins are maintained and documented, thereby
Web App Plugin
ensuring a certain quality.
(a) Coarse-grained API VII. E VALUATION
The evaluation of the data storage mechanisms consists of
two parts: a quantitative performance analysis and a security
evaluation.
Boolean Boolean

Boolean Boolean
Disk A. Performance
Web App Plugin Developers want to be aware of the potential performance
impact of using a CPT for mobile app development [12].
(b) Fine-grained API This section evaluates the performance of the different storage
mechanisms for Cordova applications and compares the results
Figure 2. NativeStorage API
with the native alternatives. Each storage strategy is tested by
deploying a simple native and Cordova test application that
intensively uses the selected storage strategy on an Android
C. Evaluation of NativeStorage and iOS device. For Android the Nexus 6 running Android 6
was used, for iOS the IPhone 6 running iOS 9 was used. The
The plugin is evaluated based on the previously listed test application communicates the test results via timing logs
requirements. that are captured via Xcode for iOS and Android Studio for
Persistent storage is provided via the native storage mech- Android. The experiments were run sufficient times to ensure
anisms. The documentation of the used native mechanisms the measurements adequately reflect the performance of the
does not state a limitation on the storage capacity. Hence, as tested storage mechanisms.
opposed to LocalStorage, the storage capacity is only limited 1) Databases
by the available memory on the device, satisfying R1 . a) Test Application The database test application exe-
The native part of the plugin is developed for both Android cutes 300 basic CRUD operations (i.e., 100 x create, 100 x
and iOS. These mobile operating systems have a combined read, 50 x delete and 50 x read) of objects containing two
market share of 99% [30]. The used native storage mechanisms string variables. The performance is determined by means of
were introduced in iOS 2.0 and Android 1.0. The plugin, hence, measuring the total duration of all the transactions. This test has
provides support for virtually all versions of these platforms been executed using the SQLite (native and Cordova), WebSQL
used in practice, satisfying R3 . (Cordova) and IndexedDB (Cordova) mechanisms.
The plugin uses NSUserdefaults and SharedPreferences b) Results and Comparison The results are presented in
to store the data in app-private locations, ensuring that the Table II. The mechanism for retrieving values by means of an
variables can not be accessed from outside the application. index clearly results in a better performance compared to the
This satisfies R4 . SQL-based mechanisms. This analysis shows that IndexedDB
The APIs are implemented using an asynchronous non- provides an efficient way of storing and retrieving small
blocking strategy, facilitating the development of responsive objects. WebSQL –provided by the WebView– acts as a
applications (conform R5 ). wrapper around SQLite. This is illustrated by the performance
overhead associated with this mechanism. The deprecation of
Web developers are familiar with duck typing used in the specification/development stop could also have contributed
languages such as JavaScript. These types of languages often to the performance penalty. The SQLite plugin suffers from
have APIs that don’t distinguish between data types. The coarse- a performance overhead caused by the interposition of the
grained API provides such a storage mechanism. This API is Cordova framework/bridge and has consequently a noticeable
shown in Listing 6. Not all Cordova developers, however, have
a Web background. Therefore, a fine-grained API (Listing 5) 1 The statistics of the NativeStorage plugin can be found at https://npm-
is provided for developers who are more comfortable with a stat.com/charts.html?package=cordova-plugin-nativestorage.
performance overhead. The performance overhead introduced 4,000
by the Cordova bridge is discussed in more detail in the Native Write

Operation duration [ms]

following section. Native Read
3,000 Cordova Write
Cordova Read
TABLE II. R ATIO OF DATABASE EXECUTION TIME TO THE NATIVE
(SQL ITE ) OPERATION DURATION ( IN %). *I N I OS I NDEXED DB IS ONLY
2,000
SUPPORTED AS OF I OS 10.

Android iOS 1,000

Nexus 6 iPhone 6
0
SQLite (Native) 100 100

0
1
2
3
4
5
6
7
8
9
10
IndexedDB 6.94 12.47*
WebSQL 153 128 Filesize [MB]
SQLite Plugin 133 116
Figure 4. Duration of file operations in iOS

2) Files
a) Test Application The test application distinguishes and write using the Cordova platform on Android. Tables V
between read and write operations. Each operation is tested and VI provide the results for iOS. Before data can be sent
using different file sizes, ranging from small files (∼ 1 kB) to over the Cordova bridge, it needs to be converted to a string.
larger files (∼ 10 MB). The performance of small files provides This can create significant overhead when large binary files
a baseline for file access. The performance of the read and such as images need to be manipulated. Before they are sent
write operations itself can be determined via the results of the over the bridge, the binary data is converted to a Base64 string.
large files. This test has been conducted ten times for each On Android, this is illustrated in the Processing file component
file size. The read and write operations consist of different of Table IV. Sending the data over the bridge also comprises
steps on Android and iOS. Both the duration of the individual a significant part of the overhead (i.e., Sending over bridge,
steps and the entire operation (i.e., read/write) is measured via from Table III). For small files, the overhead originates for the
timestamps. The application’s memory footprint is measured via most part from resolving the platform-independent URL to a
Instruments tool (Activity Monitor) in Xcode and via Memory local path and retrieving meta-data. Similar observations can
Monitor in Android Studio. be made based on the iOS results.
b) Results and Comparison The results of the timing
analysis on Android and iOS are presented in Figures 3 TABLE III. E XECUTION TIME OF COMPONENTS ASSOCIATED WITH A READ
and 4, respectively. In both Android and iOS a significant OPERATION IN C ORDOVA A NDROID (F ILE P LUGIN ). T HE PROCEDURE
”S ENDING OVER BRIDGE ” CONSISTS OF ENCODING , SENDING AND
performance difference between the native and the Cordova DECODING MESSAGES FROM THE JAVA S CRIPT SIDE TO THE NATIVE SIDE .
mechanism can be observed. R/W operations via the file plugin
take longer compared to the native mechanisms. On top of Component Duration [1 MB] Duration [20 MB]
a performance overhead, Cordova also comes with a higher (ms) (% total) (ms) (% total)
memory consumption, especially in iOS (Figure 5).
Resolve to local URL 58 46 59 7.56
Native reading 20 16 366 47
4,000 Native Write Sending over bridge 28 22 339 43
Operation duration [ms]

Native Read
Cordova Write Total 126 780
3,000 Cordova Read

2,000
Memory. In iOS, applications manipulating large files will
require large amounts of memory. This is illustrated in Figure 5.
1,000 As shown, reading and writing a 10 MB file results in 400 MB
of allocated memory. Reading and writing files larger than
0 10 MB can result in unstable behavior on iOS due to the large
memory requirements. A solution for developers is to split
0

10

15

20

large file operations in different steps.

Filesize [MB] c) Conclusion File storage on Apache Cordova comes
with a number of limitations in terms of performance. This is a
Figure 3. Duration of file operations in Android result of the Cordova framework/bridge technology. Allowing
binary data to pass over the Cordova bridge could significantly
improve the performance of plugins that perform operations
Speed. Tables III and IV give a fine-grained overview of on binary data. For instance, in [35] a bridging technology is
the different operations executed during respectively a file read presented that allows access to native device APIs in HTML5
 TABLE IV. E XECUTION TIME OF COMPONENTS ASSOCIATED WITH A TABLE VI. P ERFORMANCE WRITE COMPONENTS IN C ORDOVA I OS
WRITE OPERATION IN C ORDOVA A NDROID (F ILE P LUGIN ). T HE
PROCEDURE ” PROCESSING FILE ” CONVERTS THE BYTES – AS AN Component Duration [1 MB] Duration [10 MB]
A RRAY B UFFER – TO A STRING ARRAY. T HE ” EXECUTE CALL DELAY ”
REPRESENTS THE DELAY BETWEEN THE WRITE COMMAND EXECUTED IN
(ms) (% total) (ms) (% total)
JAVA S CRIPT AND THE EXECUTION AT THE NATIVE SIDE .
Processing file 266 97 2614 96
Component Duration [1 MB] Duration [20 MB] Native writing 7 3 96 4
(ms) (% total) (ms) (% total)
Total 273 2710
Processing file 108 65 1290 56
Execute call delay 38 23 632 28
Writing 20 12 369 16

Memory consumption [MB]

Total 166 2291 400 Native
Cordova
300
TABLE V. P ERFORMANCE READ COMPONENTS IN C ORDOVA I OS
200
Component Duration [1 MB] Duration [10 MB]
(ms) (% total) (ms) (% total) 100
Resolve to local URL 11 3.56 16 0.6
Native reading 13.98 4.52 70 2.47 0
Arguments to JSONArray 202.77 65.62 2037.93 71.88

0
1
2
3
4
5
6
7
8
9
10
Sending over bridge 59.93 19.39 587.19 20.71

Total 309 2835 Filesize [MB]

Figure 5. Memory consumption as a result of file operations in iOS

applications via WebSockets and HTTP servers, supporting the

use of binary data.
used file sizes range from small files (1 kB) to larger files
3) Persistent variables (10 MB). The test application reads and writes each file 1000
a) Test Application The performance is examined via consecutively. The execution time for each transaction (i.e.,
storing and retrieving string values. The total duration of storing read and write) is averaged over 1000 iterations. For larger
and retrieving a thousand variables is measured. The average files, such as ∼ 1 MB and ∼ 10 MB, the number of iterations
storage and retrieval time is used to compare the different stor- is reduced to 100 and 20, respectively. We only consider the
age mechanisms. The Cordova mechanisms are LocalStorage Android platform because the bridge techniques in iOS are
and NativeStorage. These are compared to NSUserDefaults rather limited.
(iOS), Property Lists (iOS) and SharedPreferences (Android). First, the Cordova bridge allowing communication from the
b) Results and Comparison All mechanisms have an native to the JavaScript side (i.e., evaluation, online event, URL
execution time under 1 ms, with the exception of NativeStorage loading and polling) is studied. The bridge between JavaScript
and Property Lists. The set operation takes around 1.9 ms, the to native is unaltered, i.e., the default bridge is used. Second,
get operation takes less than 1 ms. NativeStorage is the only the performance of the bridges connecting the JavaScript to the
mechanism which uses the Cordova bridge and framework, native side (i.e., JS object and prompt) is considered. For more
introducing a certain overhead. However, the NativeStorage information on the bridge mechanisms see Section VII-A4
API is asynchronous, hence, developers can continue processing The bridge experiments were conducted on a Samsung
while the value is being stored. The listed measurements include Galaxy S8 running Android 7.0.
the time until the callback is fired. Property Lists load an entire
file in an array, after which individual parameters can be read. b) Results and Conclusion The results [36], concerning
As a consequence, the performance of the get operation, which the bridge connecting native to JavaScript, are presented in
takes 9.83 ms, is worse compared to the native alternatives. Tables VII and VIII. A first observation is that the polling
SharedPreferences and NSUserDefaults also load all parameters mechanism could not be used as a bridge for the used Android
in memory, but this is done during the initialisation phase of version. In addition, the default bridge, denoted Eval, does
the application, which is not incorporated in the measurements. not always surpass the other available bridges in terms of
performance. This can be seen for reading as well as writing
4) Cordova Bridges In addition to the evaluation of the files. Depending on the file size the performance of other bridges
data storage strategies in Cordova, compared to native, the are better than the default bridge. The same conclusion can
performance of the utilized bridges are studied. be made when considering the bridges between the JavaScript
a) Test Application The performance of the bridges is side to the native side. However, the performance difference
tested by means of measuring the execution time of reading between these bridges is not as pronounced as with the native
and writing different file sizes for each employed bridge. The to JavaScript bridges. These results are added to this paper for
the sake of completeness. They are presented in Table IX. Storage Guidelines [40]). On Android, data stored inside the
Based on the measurements, we can conclude that a single application sandbox (e.g., the WebView’s storage) is included if
bridge technique is not appropriate for every use case when a backup is taken. The Backup API of Android can be used to
considering the performance. Hence, we propose a system explicitly blacklist data that should not be backed up. On iOS,
were plugin developers can request a certain bridge technique whether or not a file is included in the backup depends on the
based on their requirements. A fine-grained flexible selection of folder in which it is stored. For instance, by default, Cordova
bridges will allow the performance of the application to increase. stores the WebView’s data in a folder that allows backups. This
The impact on the performance when switching between bridges behavior can, however, be changed by modifying a Cordova
is not studied in this paper. parameter.
1) Databases All database mechanisms are by default
private to the application and can be backed up on both mobile
TABLE VII. P ERFORMANCE NATIVE TO JAVA S CRIPT BRIDGES IN A NDROID
WHEN READING FILES
platforms, with the exception of the SQLite plugin in iOS.
The plugin initially followed the default behaviour, but as a
Eval security measure the default storage location of the plugin in
Data Size Online Event URL Load Polling
(default) iOS was changed to a directory which is not backed up. This
[bytes] [ms] [ms] [ms] [ms] SQLite plugin also has an encrypted alternative, i.e., cordova-
1k 2.31 6.46 3.28 N.A. sqlcipher-adapter. This alternative provides a native interface
10k 6.22 6.80 6.74 N.A. to SQLCipher, encrypting SQLite databases via a user-supplied
100k 19.60 8.20 32.06 N.A. password.
1M 106.08 43.42 176.71 N.A.
10M 1308.33 641.48 1823 N.A.
2) Files In iOS files are protected by a protection class. Each
of these classes corresponds to different security properties. As
Bold measurements indicate the best performance. of iOS 7, all files are by default encrypted individually until
first user authentication. The file plugin doesn’t allow changing
this default behaviour. Native, each file can be secured using a
TABLE VIII. P ERFORMANCE NATIVE TO JAVA S CRIPT BRIDGES IN A NDROID protection class best suited for the security requirements of that
WHEN WRITING FILES file. The plugin allows the developer to choose between folders
that are public/private and backup-enabled/disabled. However,
Data Size
Eval
Online Event URL Load Polling
on Android backup-disabled locations can be accessed by other
(default) applications.
[bytes] [ms] [ms] [ms] [ms]
3) Persistent variables All persistent variable storage mech-
1k 19.34 43.03 23.34 N.A. anisms are private to the application and included in backups
10k 36.74 42.85 26.20 N.A.
on both mobile platforms, with the exception of Property List.
100k 42.60 40.74 37.61 N.A.
1M 424.65 419.67 398.50 N.A.
Property lists can be stored in arbitrary locations, and can be
10M 4465.48 5996.29 4398.43 N.A. backed up depending on the specified location.
Bold measurements indicate the best performance. 4) Sensitive Data The Secure Storage plugin provides
storage of sensitive data on Android and iOS. On iOS, the
plugin uses the SAMKeychain [41] plugin which provides an
API for the native iOS Keychain. The plugin allows app-global
TABLE IX. P ERFORMANCE JAVA S CRIPT TO NATIVE BRIDGES IN A NDROID static configuration of the KeyChain items’ accessibility. This
WHEN READING AND WRITING FILES
could entail a security risk, as it does not allow fine-grained
protection of individual items. When a user backs up iPhone
Data Size Write Read
data, the Keychain data is backed up but the secrets in the
JS Object
Prompt
JS Object
Prompt Keychain remain encrypted with a phone-specific key in the
(default) (default) backup. The Android KeyChain only allows storage of private
[bytes] [ms] [ms] [ms] [ms]
keys. Hence, for storing other tokens such as passwords or
1k 21.88 22.02 2.73 3.17 JWT tokens, an additional encryption layer is used. The plugin
10k 24.01 45.82 4.36 9.12 generates a key that is stored in the KeyChain and used to
100k 46.19 43.51 21.38 19.80 encrypt/decrypt sensitive data. The KeyChain on Android is
1M 403.58 431.39 107.63 99.02
not included in backups.
10M 5679.57 5606.48 1408.86 1406.48

VIII. C ONCLUSION AND F UTURE W ORK

B. Security This paper presented an assessment of data storage strategies
On both Android and iOS the security of storage mech- using the mobile cross-platform tool Cordova. An in-depth
anisms strongly depends on the storage location and the analysis was performed on the API coverage of the available
platform’s backup mechanisms. Data stored inside the sandbox data storage mechanisms in Cordova and Native applications.
of the application is only accessible by the application. However, Based on the analysis, an additional Cordova storage plugin
the backup mechanisms used in iOS and Android can result was developed that improves the storage of persistent variables.
in the exposure of sensitive data [37, 38, 39], or potentially Furthermore, the performance and security of the available
exhausting the limited cloud storage capacity. On iOS, this storage mechanisms were evaluated. Our performance analysis
can result in the rejection of the application (conform the Data shows that using the Cordova bridge comes with a significant
performance penalty. Hence, the WebView’s JavaScript API on Mobile Software Engineering and Systems. ACM,
should be used when possible. Moreover, we also demonstrated 2016, pp. 38–47.
that the default bridges used in Cordova do not always [7] M. Ciman and O. Gaggi, “Evaluating impact of cross-
outperform the non-default bridges. However, apart from platform frameworks in energy consumption of mobile
performance, other parameters such as functionality and security applications.” in WEBIST (1), 2014, pp. 423–431.
can have an impact on the selection of the storage mechanism. [8] Y. Zhuang, J. Baldwin, L. Antunna, Y. O. Yazir, S. Ganti,
Databases. If access to a full fledged SQL database is and Y. Coady, “Tradeoffs in cross platform solutions
required, the SQLite plugin should be used. However, in for mobile assistive technology,” in Communications,
most mobile applications, the functionality provided by the Computers and Signal Processing (PACRIM), 2013 IEEE
significantly faster IndexedDB interface of the WebView is Pacific Rim Conference on. IEEE, 2013, pp. 330–335.
sufficient. [9] H. Heitkötter, S. Hanschke, and T. A. Majchrzak, “Evalu-
ating cross-platform development approaches for mobile
Variables. As described in Sections VI and VII, it is applications,” in International Conference on Web Infor-
recommended to use NativeStorage for storing persistent mation Systems and Technologies. Springer, 2012, pp.
variables, since LocalStorage does not guarantee persistence 120–138.
over longer periods of time. This type of storage is often used [10] I. Malavolta, S. Ruberto, T. Soru, and V. Terragni, “End
to store preferences. Preferences are typically only accessed users’ perception of hybrid mobile apps in the google
once or twice during the life cycle of the application. Hence, play store,” in 2015 IEEE International Conference on
the performance overhead of NativeStorage does not have a Mobile Services. IEEE, 2015, pp. 25–32.
significant impact on the performance of the application. [11] M. Palmieri, I. Singh, and A. Cicchetti, “Comparison
Files. The WebView does not provide a file storage API. of cross-platform mobile development tools,” in Intelli-
Hence, developers have to use the core plugin, Cordova File gence in Next Generation Networks (ICIN), 2012 16th
Plugin (cordova-plugin-file). International Conference on. IEEE, 2012, pp. 179–186.
Sensitive data. The security analysis presented in Sec- [12] VisionMobile, “Cross-platform developer tools 2012,
tion VII-B shows that plugins such as SecureStorage offer bridging the worlds of mobile apps and the web,” Februar
increased security compared to the WebView’s JavaScript API y, 2012, access date: 13/04/2016.
because they benefit from the platform’s native secure storage [13] JQuery Mobile. A Touch-Optimized Web Framework.
APIs. It is therefore recommended to use a plugin such as Access date: 15/09/2017. [Online]. Available: https:
SecureStorage to store sensitive data. //jquerymobile.com/
[14] Ionic, “Hybrid vs. Native – An introduction to cross-
Future work on this topic can include an enhancement of platform hybrid development for architects and app
the Cordova framework where a fine-grained selection of bridge development leaders,” Tech. Rep. [Online]. Available:
techniques is allowed. Thereby, improving the performance of https://ionicframework.com/books/hybrid-vs-native
Cordova applications. Furthermore, more CPTs can be included [15] Sencha. Sencha Ext JS. Access date: 15/09/2017. [Online].
in the assessment of data storage strategies. Available: https://www.sencha.com/products/extjs
[16] Xamarin – Mobile App Development & App Creation
R EFERENCES Software. Access date: 29/11/2017. [Online]. Available:
[1] G. Callebaut, M. Willocx, J. Vossaert, V. Naessens, and www.xamarin.com
L. D. Strycker, “Assessment of data storage strategies us- [17] Qt – Cross-Platform software development for embedded
ing the mobile cross-platform tool cordova,” in MOBILITY & desktop. Access date: 29/11/2017. [Online]. Available:
2017, The Seventh International Conference on Mobile www.qt.io
Services, Resources, and Users, J. Noll and K. El-Khatib, [18] Appcelerator Inc. Appcelerator. Access date: 15/09/2017.
Eds., 2017, pp. 25–32. [Online]. Available: http://www.appcelerator.com/
[2] VisionMobile. Cross–Platform Tools 2015. Access date: [19] NeoMAD – Cross-platform mobile development. Access
13/04/2016. [Online]. Available: http://www.visionmobile. date: 15/09/2017. [Online]. Available: http://neomades.
com/product/cross-platform-tools-2015/ com
[3] ——. (2016) Developer economics state of the developer [20] Crosswalk – Build world class hybrid apps. Access
nation q1 2016. Access date: 13/04/2016. [Online]. Avail- date: 29/05/2018. [Online]. Available: https://crosswalk-
able: http://www.visionmobile.com/product/developer- project.org
economics-state-of-developer-nation-q1-2016/ [21] A. Deveria and L. Schoors. Can I use ... ?
[4] F. Rösler, A. Nitze, and A. Schmietendorf, “Towards a Access date: 29/05/2018. [Online]. Available: https:
mobile application performance benchmark,” in Interna- //caniuse.com/#search=HTML5
tional Conference on Internet and Web Applications and [22] Google. Progressive Web Apps. Access date: 29/05/2018.
Services, vol. 9, 2014, pp. 55–59. [Online]. Available: https://developers.google.com/web/
[5] I. Dalmasso, S. K. Datta, C. Bonnet, and N. Nikaein, progressive-web-apps/
“Survey, comparison and evaluation of cross platform [23] Apache Cordova. Cordova Plugins. Access date:
mobile application development tools,” in Wireless Com- 29/05/2018. [Online]. Available: https://cordova.apache.
munications and Mobile Computing Conference (IWCMC), org/plugins/
2013 9th International. IEEE, 2013, pp. 323–328. [24] Web SQL Database documentation. Access date:
[6] M. Willocx, J. Vossaert, and V. Naessens, “Comparing 29/05/2018. [Online]. Available: https://dev.w3.org/html5/
performance parameters of mobile app development webdatabase/
strategies,” in Proceedings of the International Workshop [25] SQLite Plugin NPM website. Access date: 29/05/2018.
 [Online]. Available: https://www.npmjs.com/package/
cordova-sqlite-storage
[26] Cordova File Plugin NPM website. Access date:
29/05/2018. [Online]. Available: https://www.npmjs.com/
package/cordova-plugin-file
[27] Cordova Storage documentation. Access date: 29/05/2018.
[Online]. Available: https://cordova.apache.org/docs/en/
latest/cordova/storage/storage.html
[28] SecureStorage Plugin NPM website. Access date:
29/05/2018. [Online]. Available: https://www.npmjs.com/
package/cordova-plugin-secure-storage
[29] G. Callebaut and A. Rajiv, “NativeStorage – A
Cordova Plugin,” https://github.com/TheCocoaProject/
cordova-plugin-nativestorage.
[30] “Smartphone os market share, q2 2016,” http://www.
idc.com/prodserv/smartphone-os-market-share.jsp, 2015,
access date: 20/10/2016.
[31] (2016) Cordova plugin NativeStorage. [Online].
Available: https://github.com/TheCocoaProject/cordova-
plugin-nativestorage
[32] NativeStorage Plugin NPM website. Access date:
29/05/2018. [Online]. Available: https://www.npmjs.com/
package/cordova-plugin-nativestorage
[33] NativeStorage in the Ionic Framework documentation.
Access date: 29/05/2018. [Online]. Available: http:
//ionicframework.com/docs/v2/native/nativestorage/
[34] Cordova Plugins in the Telerik Marketplace. Access date:
29/05/2018. [Online]. Available: http://plugins.telerik.
com/cordova
[35] A. Puder, N. Tillmann, and M. Moskal, “Exposing
native device apis to web apps,” in Proceedings of
the 1st International Conference on Mobile Software
Engineering and Systems, ser. MOBILESoft 2014. New
York, NY, USA: ACM, 2014, pp. 18–26. [Online].
Available: http://doi.acm.org/10.1145/2593902.2593908
[36] G. Callebaut. (2017) Performance results bridges in
cordova (android). [Online]. Available: http://dx.doi.org/
10.17632/kyxc59tfmv.1
[37] P. Teufl, T. Zefferer, and C. Stromberger, “Mobile device
encryption systems,” in 28th IFIP TC-11 SEC 2013 In-
ternational Information Security and Privacy Conference,
2013, pp. 203 – 216.
[38] P. Teufl, A. G. Fitzek, D. Hein, A. Marsalek, A. Oprisnik,
and T. Zefferer, “Android encryption systems,” in Inter-
national Conference on Privacy & Security in Mobile
Systems, 2014, in press.
[39] P. Teufl, T. Zefferer, C. Stromberger, and C. Hechen-
blaikner, “ios encryption systems - deploying ios devices
in security-critical environments,” in SECRYPT, 2013, pp.
170 – 182.
[40] iOS Data Storage Guidelines. Access date: 29/05/2018.
[Online]. Available: https://developer.apple.com/icloud/
documentation/data-storage/index.html
[41] S. Soffes. SAMKeychain. Access date: 29/05/2018. [On-
line]. Available: https://github.com/soffes/SAMKeychain