The 10 Most Popular 3rd Party Cordova Plugins

In the world of Cordova development, plugin is perhaps one of the most powerful tools at our disposal.

A plugin is essentially a reusable component that can access native-level functionalities (such as sending push notifications, controlling the phone’s camera, having full access to the phone’s accelerometer…). They allow a hybrid mobile application to take full advantage of all of the phone’s functionalities; something that an ordinary web application cannot do.

That’s not all! Anyone can create their own plugin and even share their work with the rest of the world, allowing an ecosystem of free ‘add-ons’ to exist; much like the npm registry. Today, we will take a look at the top 10 most popular Cordova plugins made by the community (as of the time of writing: ranked by Downloads on cordova.apache.org’s Plugin page), and how you too can add them to your arsenal of development tools.

1. Ionic Keyboard

cordova-plugin-ionic-keyboard — [Android, iOS]

Word Suggestion, begone! The future (word) is ours to decide! ( image source )

Back in 2013–2014, when hybrid mobile app development was still relatively new, the keyboard was a notoriously hard component to work with. The web layer’s limited control caused a lot of problems that were pretty much unavoidable: The keyboard would behave differently across each version of the operating system, cover interact-able components & sometimes even mess up the layout (and much more)!

However, the people’s cry was eventually answered by a group of brave heroes:

“but we journeyed to this intimidating region of hybrid land to try and mitigate one of the more nagging problems we encountered: the keyboard.”

— Tim, a member of the Ionic team

By utilising the power of the almighty plugin, the Ionic team encapsulated the troublesome problems and dealt with them within the native layer, freeing developers the burden to handle the many different scenarios across devices.

One of the most useful ability is the simple event capturing of keyboard-related events, such as when the keyboard is about to show or hide, and even inform you how big the keyboard will be. There are, of course, accommodating methods which you can call to easily perform useful operations (such as manually hiding the Keyboard Accessory Bar, demonstrated in the image above).

The best part is that this plugin is not even Ionic specific, meaning it can be used in any Cordova app to enhance keyboard handling.

NOTE: cordova-plugin-ionic-keyboard is actually the second incarnation of the Cordova Ionic keyboard plugin.

This incarnation was designed to be able to integrate seamlessly with cordova-plugin-ionic-webview, an iOS plugin that can resolve some XHR requests & DOM exception issues.

The older version is called ionic-plugin-keyboard. That version is deprecated as it is not being maintained anymore. Though unlike the new version, this one has support for Windows Phone & Blackberry 10, along with some other differences.

Installation & Tutorial

For installation & examples of how this plugin can be used, please see this page.

2. SQLite Storage

cordova-sqlite-storage — [Android, iOS, macOS, Windows 10 (UWP)]

Behold! The language you have never heard of - Keystrokes! ( image source )

The database is an essential part of any real application. In fact, it is not uncommon for companies to have engineers dedicated to database management. Nevertheless, not everyone can afford to spend time or have the resources to set up and maintain them.

This is where SQLite comes in — unlike ‘normal’ databases like MySQL, Oracle, and even MongoDB: SQLite does not require a server, configurations, or any other additional equipment/software, etc. The entire database is self-contained and can operate on its own within the device the application is running on. As such, the database is free from potential server errors and can even be faster (see more about the pros and cons here).

Heck, even if your application doesn’t require the power of a full database, SQLite remains an attractive storage option: You can take advantage of the powerful searching power offered by a relational database, and if you are familiar with SQL syntax, perform complex database commands.

Installation & Tutorial

For installation, go to this page.

Monaca tutorial & demo application available here!

3. Push \ OneSignal

There is no escape… you WILL be notified, whether you like it or not! ( image source )

Remember how I mentioned earlier that sending push notifications is a native-level functionality? Well, here we have two similar plugins that allow Cordova to handle notifications commonly found in native apps (you know, those alerts that pop up in the ‘status bar’ of your phone?), along with other enhancement such as event watching & badge icon.

Notification is a good way to keep users informed of important news (regarding your app), as well as “keeping in touch” with the user (kinda like a greeting).

The most important differences between phonegap-plugin-push & OneSignal are:

• Platform support:

phonegap-plugin-push (as of version 1.9.x) supports — Android, iOS, Cordova CLI, Browser, Windows 10 (UWP).

OneSignal (as of version 5.0) supports — Android, iOS, Windows Phone, Amazon Fire, Chrome Apps, Amazon Alexa, Safari, Chrome Web, Firefox.

• Feature set:

OneSignal has more features & functionalities than phonegap-plugin-push, but as a result, can be more complicated to work with / more weighted.

• Setup:

OneSignal‘s configuration is more complex (e.g. For OneSignal, you are required to set up an online account; whereas for phonegap-plugin-push, there is no such requirement).

Installation & Tutorial

For installation of phonegap-plugin-push, go to this page. For installation of OneSignal, go to this page.

Monaca tutorial & demo application available (for OneSignal) here!

4. Social Sharing

cordova-plugin-x-socialsharing — [Android, iOS, Windows Phone]

Just watch out for the Repost Police ( image source )

In today’s society, it is easier than ever to stay connected with other people. One of the biggest trends of recent years is Social Networking Sites: Facebook, Twitter, Instagram… These sites rely on user interaction to keep them going, and one of the most common activities users likely to do is sharing, whether it is a funny picture, a viral video, a story, etc. It can be said that sharing is one of the most significant driving force in social networking sites.

With that being said, the ability to quickly share content from a mobile app is most likely a highly sought-after feature. OS developers know this and thus have implemented a standard ‘sharing’ feature into the OS itself. Native apps can take advantage of this by directing any ‘share’ requests to the OS, saving them the need to develop their own version of the functionality.

As for Cordova Social Sharing plugin, it does just that — it allows Cordova to invoke the native sharing service of the specific mobile device. There’s also the option to skip the “sharing window” (it’s that window where the user gets to pick how/where they want to share the content) and send directly to a Twitter, Facebook, etc.

Installation & Tutorial

For installation, go to this page.

For examples of how this plugin can be used, please see this page.

5. AppVersion

cordova-plugin-app-version — [Android, iOS]

This plugin allows you to obtain some useful information about your hybrid app:

• App name — e.g. “My Awesome App”
• Package name — e.g. “com.example.myawesomeapp”
• Version code — the internal version number. The higher the number, the newer the build is. e.g. 100
• Version number — the version number seen by users. e.g. 2.4.0

The Version number feature is particularly useful, as it is the norm to display it on the login/welcome screen.

Monaca Debugger

Installation & Tutorial

For installation & examples of how this plugin can be used, please see this page.

6. BarcodeScanner

phonegap-plugin-barcodescanner — [Android, iOS, Windows (Windows 8.1 and Windows 10), Windows Phone, BlackBerry 10, Browser]

“Target acquired.” ( image source )

There are many benefits of barcodes: Not only is it fast and convenient to obtain the required information, but it also eliminates the possibility of human errors. For the Internet in particular, QR Code (a specific type of 2D barcode) is the most popular, as it is often used to hold a URL that the user needs to access.

PhoneGap Plugin BarcodeScanner opens a camera view and can read many different types of 1D/2D barcodes (including QR Code). After conducting a scan, the plugin will return the text representation of the barcode, as well as the type. It also contains a number of customisable options.

Installation & Tutorial

For installation, go to this page.

Monaca tutorial & demo application available here!

7. Facebook

cordova-plugin-facebook4 — [Android, iOS, Browser]

“Do you have a Facebook account with you?” ( image source )

Login & registration is a required part of many sites and applications. Even so, some users view the need to fill in complicated registrations forms or answer questions to be a chore, even to the point of being the factor that puts them off from using the application. Luckily, as the influence of social media spread, Facebook (and other social media network) began to offer a service that replaced the login process with an authorisation mechanic, using the user’s existing social media credentials to substitute the required info in the registration process.

A big part of this plugin is the ability to incorporate this service into just about any app with an account system. The plugin also contains various functionalities from the Facebook Software Development Toolkit (SDK) for iOS/Android:

• Sharing content from your app to Facebook
• Log events in your application
• Read and write to the Facebook social graph

Installation & Tutorial

For installation, go to this page.

Monaca tutorial & demo application available here!

8. Swift Support

cordova-plugin-add-swift-support — [iOS]

Here comes “Brave Bird”! ( image source )

Before 2014, the only programming language an iOS developer can use to develop apps was Objective C. Even in hybrid mobile app development, Objective C was still required, as it is language Cordova iOS plugins need to be written in. When Apple released the Swift programming language, iOS developers were finally given an alternate language to choose from. Compared to Objective C, there are many considerable differences.

This plugin is the fruit of a project to bring the same freedom of choice to Cordova iOS plugin development.

Installation & Tutorial

For installation, go to this page.

For a tutorial in Cordova iOS plugin development using Swift, please see this page.

9. Google Analytics

cordova-plugin-google-analytics — [Android, iOS, Windows Phone, Browser (PWA)]

Is that… a cash register?? ( image source )

This plugin is the bridge that connects a Cordova app with the popular Google Analytics service, through a native iOS /Android SDK. As such, Cordova developers can also gain access to tailored methods that are designed to specifically track and reports mobile app activities, customisable by the developer.

Examples of this include:

• Finding out which feature is most popular among users
• Finding out how many times an average user makes use of a specific feature
• Measuring performance by time taken

Installation & Tutorial

For installation & examples of how this plugin can be used, please see this page.

10. Google Maps

cordova-plugin-googlemaps — [Android, iOS]

But is it 60fps though? ( image source )

It’s Cordova’s version of the life-saving Google Map! Being a thin wrapper over the native Google Maps Android API and Google Maps SDK for iOS, Cordova developers too can get access to a magnitude of powerful features. Some of the more interesting ones are:

• Marker Clustering — the ability to group a number of custom icons into a single ‘cluster’, and will automatically separate & join together depend on the zoom level of the map.
• HtmlInfoWindow — Integrate functional HTML elements into a pop-up window on the map.
• Custom Overlays — Draw text, charts, and even whole subway systems over the map. Geographical data can also be imported from Earth browser such as Google Earth, using the KML data format.

Installation & Tutorial

For installation, go to this page.

Monaca tutorial & demo application available here!

And there we are! For those who have yet to try using Cordova plugins, I hope this article has given you some ideas of what they are capable of. Remember, plugins are your best friends, and they can help you develop faster & create more robust apps!