For developers who have an understanding of how to use the Cordova CLI and make use of plugins, there are a few things you may want to consider researching next to build better, more performant Cordova applications. The following document offers advice on various topics relating to best practices, testing, upgrades, and other topics, but is not meant to be prescriptive. Consider this your launching point for your growth as a Cordova developer. Also, if you see something that can be improved, please contribute!
Using a SPA can help you organize your application in a more efficient manner, but it also has specific benefits for Cordova applications. A Cordova application must wait for the deviceready event to fire before any plugins may be used. If you do not use a SPA, and your user clicks to go from one page to another, you will have to wait for deviceready to fire again before you make use of a plugin. This is easy to forget as your application gets larger.
Even if you choose not to use Cordova, creating a mobile application without using a single page architecture will have serious performance implications. This is because navigating between pages will require scripts, assets, etc., to be reloaded. Even if these assets are cached, there will still be performance issues.
Examples of SPA libraries you can use in your Cordova applications are:
And many, many, more.
Consider the following issues to improve the performance in your mobile applications:
Click versus Touch - Many devices impose a 300ms delay on click events in order to distinguish between a tap and tap-to-zoom gesture. This can have the effect of making your app feel slow and unresponsive. Avoiding this delay is one of the most important ways of improving your app's perceived performance. For more information on the tap delay, see 300ms tap delay, gone away on the Google Developer site.
Most Android versions no longer impose this delay, but iOS by default still does. For iOS, using WkWebView instead of the default UIWebView gets rid of this delay. For both Android and iOS, you must ensure that your viewport meta tag has at least
width=device-width, or you will still have the tap delay. If you need to support older devices (Android 4.4 or iOS 8), consider a polyfill such as FastClick, or using
touchend instead of
Networks Suck - Ok, networks don't always suck, but the latency of mobile networks, even good mobile networks, is far worse than you probably think. A desktop app that slurps down 500 rows of JSON data, every 30 seconds, will be both slower on a mobile device as well as a battery hog. Keep in mind that Cordova apps have multiple ways to persist data in the app (LocalStorage and the file system for example). Cache that data locally and be aware of the amount of data you are sending back and forth. This is an especially important consideration when your application is connected over a cellular network.
Additional Performance Articles and Resources
See the previous tip about networks. Not only can you be on a slow network, it is entirely possible for your application to be completely offline. Your application should handle this in an intelligent manner. If your application does not, people will think your application is broken. Given how easy it is to handle (Cordova supports listening for both an offline and online event), there is absolutely no reason for your application to not respond well when run offline. Be sure to test (see the Testing section below) your application and be sure to test how your application handles when you start in one state and then switch to another.
Note that the online and offline events, as well as the Network Connection API, is not perfect. You may need to rely on using an XHR request to see if the device is truly offline or online. At the end of the day, be sure add some form of support for network issues - in fact, the Apple store (and probably other stores) will reject apps that don't properly handle offline/online states. For more discussion on this topic, see "Is This Thing On?"
There is no upgrade command for Cordova projects. Instead, remove the platform from your project, and re-add it to get the latest version:
cordova platform rm android cordova platform add android
It is absolutely critical that you read up on what was changed in the updated version, as the update may break your code. The best place to find this information will be in the release notes published both in the repositories and on the Cordova blog. You will want to test your app thoroughly in order to verify that it is working correctly after you perform the update.
Note: some plugins may not be compatible with the new version of Cordova. If a plugin is not compatible, you may be able to find a replacement plugin that does what you need, or you may need to delay upgrading your project. Alternatively, alter the plugin so that it does work under the new version and contribute back to the community.
Upgrading plugins involves the same process as platforms - remove it, then re-add it.
cordova plugin rm some-plugin cordova plugin add some-plugin
Refer to Manage versions and platforms for more details.
Be sure to check the updated plugin's documentation, as you may need to adjust your code to work with the new version. Also, double check that the new version of the plugin works with your project's version of Cordova.
Always test your apps to ensure that installing the new plugin has not broken something that you did not anticipate.
If your project has a lot of plugins that you need updated, it might save time to create a shell or batch script that removes and adds the plugins with one command.
Testing your applications is super important. The Cordova team uses Jasmine, but any web-friendly unit testing solution will do.
It's not uncommon to use desktop browsers and device simulators/emulators when developing a Cordova application. However, it is incredibly important that you test your app on as many physical devices as you possibly can:
It is, of course, impossible to test on every possible device on the market. For this reason, it's wise to recruit many testers who have different devices. Although they won't catch every problem, chances are good that they will discover quirks and issues that you would never find alone.
In most cases, debugging Cordova apps is quite straightforward.
With Xcode you can debug the iOS native side of your Cordova application. Make sure the Debug Area is showing (View -> Debug Area). Once your app is running on the device (or simulator), you can view log output in the debug area. This is where any errors or warnings will print. You can also set breakpoints within the source files. This will allow you to step through the code one line at a time and view the state of the variables at that time. The state of the variables is shown in the debug area when a breakpoint is hit. Once your app is up and running on the device, you can bring up Safari's web inspector (as described below) to debug the webview and JS side of your application. For more details refer to the Apple Debugging Support docs.
To start inspecting, first enable it on device at
Settings > Safari > Advanced > Web Inspector. On your desktop, enable the developer tools from
Safari > Preferences > Advanced > Show Develop menu in menu bar. In the
Develop menu, you will now be able to select the connected device, and the app you want to inspect.
Virtually the same as the Safari version, this works with Android only but can be used from any desktop operating system. Once connected, you get the same Chrome Dev Tools experience for your mobile applications as you do with your desktop applications. Even better, the Chrome Dev Tools have a mirror option that shows your app running on the mobile device. This is more than just a view - you can scroll and click from dev tools and it updates on the mobile device.
To inspect, simply open up the URL
chrome://inspect in Chrome on your desktop. Here you will see a list of connected devices and inspectable apps. Your device must be set up for USB debugging for this to work. Full instructions on getting set up can be found at https://developers.google.com/chrome/mobile/docs/debugging.
If you can see your device in the inspect devices section, but you can't see the Cordova webview you may need to add
android:debuggable="true" in the
<application> node of your
It is also possible to use Chrome Dev Tools to inspect iOS apps, through a WebKit proxy: https://github.com/google/ios-webkit-debug-proxy/
Building a Cordova application that looks nice on mobile can be a challenge, especially for developers. Many people chose to use a UI framework to make this easier. Here is a short list of options you may want to consider.
When building your user interface, it is important to think about all platforms that you are targeting and the differences between the user's expectations. For example, an Android application that has an iOS-style UI will probably not go over well with users. This sometimes is even enforced by the various application stores. Because of this, it is important that you respect the conventions of each platform and therefore are familiar with the various Human Interface Guidelines:
Although Cordova makes cross-platform development easier, it's just not possible to provide 100% isolation from the underlying native platform, so do be aware of restrictions.
While reading the documentation, look for sections which outline different behaviors or requirements on multiple platforms. If present, these would be in a section titled "Android Quirks", "iOS Quirks", etc. Read through these quirks and be aware of them as you work with Cordova.
Here are a few ways to keep up to date with Cordova.
The following links are the best places to get help for Cordova:
© 2012, 2013, 2015 The Apache Software Foundation
Licensed under the Apache License 2.0.