In this post, you’ll find out the major difference and upgrades released with Cordova 9, compared to Cordova 8. This includes major platform changes as well as how it affects (Cordova based) Ionic apps. This post is aimed to help developers migrate from Cordova 8.x to 9.0
TLDR; One major change for Ionic apps is that most of the Cordova plugins will now have to be updated to be compatible with Cordova 9.0.0
Why should you know this
Cordova 9 was released in March this year. It is a pretty big deal considering the already huge and growing community of Hybrid app developers on Cordova and Ionic. If you aren’t aware of Ionic framework, you can head over to Ionic website and check how awesome a framework it is. I’ll try to explain what Ionic is, in short.
What is Ionic
Ionic is a complete open-source SDK for hybrid mobile app development. Ionic provides tools and services for developing hybrid mobile apps using Web technologies like CSS, HTML5, and JS. Apps can be built with these Web technologies and then distributed through native app stores to be installed on devices.
Cordova enables developers to build applications for mobile devices using CSS3, HTML5, and JavaScript instead of relying on platform-specific APIs like those in Android, iOS, or Windows Phone. It extends the features of HTML and JavaScript to work with the device.
Ionic is actually another wrapper on top of Cordova. Cordova has the basic HTML/CSS/JS → Native capabilities, while Ionic powers neater and powerful layouts and overall app management on top of Cordova
In other words — If you create native apps in Android, you code in Java. If you create native apps in iOS, you code in Obj-C or Swift. Both of these are powerful, but complex languages. With Cordova (and Ionic) you can write a single piece of code for your app that can run on both iOS and Android (and windows!), that too with the simplicity of HTML, CSS, and JS. I’m a huge fan of Ionic and been developing Ionic apps for last 4 years.
Other than Ionic, Cordova also supports the following frameworks
- Ratchet — Brought to you by the people who created Bootstrap.
- Kendo UI — Open source UI and application framework from Telerik.
- Onsen UI — Open source UI framework for both websites and Cordova apps
- Topcoat
- ReactJS
How does Cordova update affect Ionic apps
Cordova is actually what allows a hybrid app to talk to native functionalities. Ionic is basically just a wrapper on top of Cordova. In other words, Ionic gives Cordova apps more structure in terms of JS framework (Angular, React), but the actual connection between HTML/JS code and Native functionalities is provided by Cordova.
E.g. If your Ionic (Angular based) app has a Camera functionality, the Camera of the device is able to talk to the hybrid app because of Cordova, not Ionic. Cordova Plugins are the bridge between the device native capabilities and hybrid apps. Perhaps this informative image will explain it better
So when Cordova version changes,
- It changes the way Ionic apps are built into Android and iOS apps (platforms change)
- It changes the way Ionic apps interact with native device functionalities (plugins need to change)
E.g. Recently, Android changed the folder structure of Android projects. Cordova followed it and changed the compiled Android project structure in the new Cordova version. But if you try to build an Android App with the latest SDK, and old Cordova, the resultant app might not work properly. So that’s how it goes in open source world — you need to stay up to date.
The major change for Ionic apps is that most of the Cordova plugins will now have to be updated to be compatible with Cordova 9.0.0
What has changed in Cordova 9
As a starter, following major packages have changed in Cordova 9.0
cordova-android@^8.0.0cordova-browser@^6.0.0cordova-electron@^1.0.0cordova-ios@^5.0.0cordova-osx@^5.0.0cordova-windows@^7.0.0
Following are some of the major changes in Cordova 9.0.0 you should be aware of
Android Changes
Use custom Gradle properties to read minSdkVersion value from config.xml
Before this release, users who want to modify the gradle.properties file in Cordova Android project would have to modify it directly but this is not the best case. Users may not commit their platform directory. This mean changes are lost each time they remove and add back a platform..
gradle.properties file is created and modified by the cordova prepare step. The first time the file is created would come right after the cordova platform add step which triggers the prepare step. If the user wanted to modify this file and they didn’t commit the platforms, the current best option is to use an after_prepare hook script.
Cordova 9.0.0 now reads minSdkVersion from config.xml itself, the first step towards writing custom gradle files using config.xml itself. More info here
ANDROID_HOME becomes ANDROID_SDK_ROOT
Android has migrated the ANDROID_HOME variable to ANDROID_SDK_ROOT. If you continue to use ANDROID_HOME, the following rules apply:
- If
ANDROID_HOMEis defined and contains a valid SDK installation, its value is used instead of the value inANDROID_SDK_ROOT. - If
ANDROID_HOMEis not defined, the value inANDROID_SDK_ROOTis used. - If
ANDROID_HOMEis defined but does not exist or does not contain a valid SDK installation, the value inANDROID_SDK_ROOTis used instead.
Cordova 9.0 now supports ANDROID_SDK_ROOT variable, so that future releases do not break because of deprecated behavior of ANDROID_HOME
Removed support for browserify
Browsers don’t have the require method defined, but Node.js does. With Browserify you can write code that uses require in the same way that you would use it in Node.
Cordova 9.0.0 has removed support for browserify.
Added package-lock.json to .gitignore
As you may be aware, package-lock.json is used to keep a log of installed modules and their dependencies. This file is generally committed to Git, so different members of a team can have same dependencies.
Cordova 9.0.0 project will now add package-lock.json to .gitIgnore by default. Yayy?
Fix requirements error messages for JDK 8, and tell user Cordova needs JAVA 1.8 only
JAVA (JDK) has upgraded from 1.8 to v11, but still most of the users are using 1.8 itself (including me) because of the compatibility with Cordova. Recently, many projects starting seeing an error message to update to latest Java versions i.e. V11. But when you do update JAVA version, it results in another error. Apparently, this was because there is a syntactic difference in versioning. Earlier it was 1.8, from there it became v9, v10 and now v11. So the two digit version number started causing issues.
Cordova 9.0.0 has now fixed this, at least in the Android platform. The error messages now give out correct SDK download links, so user does not end up installing v11, and bang their head around on the walls. More info here
Along with this, now there is a check in Cordova to tell the user that only JAVA 1.8 will work with Cordova. So any JAVA version ≥ 9 will give this error which says “we need exactly Java 1.8”
Resolved issue with plugin target-dir="app*" subdirs
This was a strange issue. Certain plugins use a folder structure where the folder structure contains app* keyword e.g. de/applant/ These plugins were facing issues because the app part of the folder structure was conflicting with other app folders. Probably because of a includes check, rather than startsWith check. This issue had affected following plugins
-
https://github.com/katzer/cordova-plugin-local-notifications, with
target-dir="src/de/appplant/cordova/plugin/notification" -
https://github.com/katzer/cordova-plugin-badge, with
target-dir="src/de/appplant/cordova/plugin/badge" -
https://github.com/katzer/cordova-plugin-background-mode, with
target-dir="src/de/appplant/cordova/plugin/background" cordova-plugin-inappbrowser
This issue is now fixed in Cordova 9.0.0. Aforementioned plugins will not be affected by the folder structure issue anymore
Gradle Updates
Cordova 9.0.0 now defaults to a Gradle version > 4.6.0. This means you’ll need to update your Gradle version if you upgrade to Cordova 9. This update is in line with Android Gradle Plugin 3.2.0. Several other deprecation issues are also fixed in Cordova 9.0 🎉
Increase old plugin compatibility
This is a good news, considering with every Cordova version update, there used to be breaking changes for plugins. As I mentioned above, Android recently changed the folder structure, and hence Cordova did too. Cordova 9.0.0 has come up with a fix to increase compatibility of old plugins by adding ‘app/src/main’ to all plugin source-file tags that didn’t include it, so the files are copied to the new Android Studio structure. Pretty simple change, but can help developers a lot when using old plugins. (and also give plugin developers more time to make appropriate changes)
Fix for plugins that use non-Java source files, such as Camera
Cordova 9.0.0 has fixed an issue with plugins that used non-Java source files — when user removed and re-installed the plugin, the CLI gives error. Following is an example for Camera plugin.
Now these plugins can be removed and installed again correctly.
cdvStartInBackground=true now fires pause event
Earlier, the MainActivity created from the template that adds support for starting the app in the background via the cdvStartInBackground flag didn’t fire the pause event.
This affected plugins like phonegap-push-plugin where users would like to wake up the app when app is in background. This allows the developer to avoid polling when app is in background.
Cordova 9.0.0 resolves the issue by caching a pendingPause when starting in the background, this manifests in the following events inside the app:
- pause
- deviceready
As a user you can then store a flag (e.g. app.inBackground) and this can be checked in deviceready handler.
iOS Platform Changes
Correct icon and splash names
Cordova 9.0.0 (cordova-ios 5.0.0) has made changes to correct the icon and splash names as per iOS convention. Minor change, but important!
E.g. icon-small becomes icon-29 , icon-small@2x becomes icon-29@2x and so on
Xcode 10 support
A few issues had started to come in regarding the state of Cordova projects on Xcode 10. This is a rough summary of the situation:
Xcode 10 uses a new build system by default (previously available on an opt-in basis in Xcode 9). The cordova-ios project structure is not compatible with this new build system and results in failures. As of Sept, 2018, officially, Cordova did not claim to support Xcode 10.
An appropriate reaction from one developer
The best workaround was to opt-out of the new build system:
- If you’re building on the command-line, you can specify
--buildFlag="-UseModernBuildSystem=0":
# Cordova CLI
cordova run ios --buildFlag='-UseModernBuildSystem=0'
cordova build ios --buildFlag='-UseModernBuildSystem=0'# Ionic CLI
ionic cordova run ios -- --buildFlag="-UseModernBuildSystem=0"
ionic cordova build ios -- --buildFlag="-UseModernBuildSystem=0"- If you are opening the project in the Xcode IDE, you need to change the build system in Workspace Settings to “Legacy Build System”
Cordova 9.0.0 has resolved this issue, and now cordova-ios structure should be compatible with XCode 10.
Inputs type text don’t work on iOS
If you use the following preferences in config.xml, all the inputs type “text” stop working and are not clickable.
<preference name=”SuppressesLongPressGesture” value=”true” /> <preference name=”Suppresses3DTouchGesture” value=”true” />
Cordova 9.0 has now fixed this issue. The config.xml preferences can be used without the input text side-effects
Copy/Paste functionality not working for iOS native components
With iOS11 upgrade cordova-ios library is braking copy/paste functionality for consumer apps utilizing both web and native UI.
This happened when you copy text from a Native app e.g. Notes, and then try to paste it in a backgrounded cordova app. The text never gets pasted. This issue did not happen if the text is copied from a web interface.
Also once consumer app goes foreground, after backgrounding that app, clipboard text can never be pasted in any other iOS app with native UI.
This issue is resolved in cordova-ios 5.0.0. This was available a long time ago, but it is now default in Cordova 9.0.0
Conclusion
You saw some major changes in Cordova 9.0.0 i.e. Cordova-android 8.0.0 and cordova-ios 5.0.0. There are a lot of other minor changes in Cordova 9.0.0, but listing all of them here is not possible, and some of them are pretty harmless. Overall, in terms of plugin changes, the news is more on positive side. Several plugin issues have been fixed, and I personally look forward to more smoother iOS builds (but can’t trust Apple with more iOS changes 😑)
Next Steps
Now that you have learned the latest changes in Cordova 9.0.0, you can go ahead and create some awesome Ionic 4 apps. Some of my articles you can start with
- Ionic 4 PayPal payment integration — for Apps and PWA
- Ionic 4 Stripe payment integration — for Apps and PWA
- Ionic 4 Apple Pay integration
- Twitter login in Ionic 4 with Firebase
- Facebook login in Ionic 4 with Firebase
- Geolocation in Ionic 4
- QR Code and scanners in Ionic 4 and
- Translations in Ionic 4
If you need a base to start your next Ionic 4 app, you can make your next awesome app using Ionic 4 Full App. I have my own Ionic 4 template store at enappd.com. Feel free to visit and give your valuable feedback!
References
apache/cordova-iosApache Cordova iOS. Contribute to apache/cordova-ios development by creating an account on GitHub.github.comapache/cordova-cli
Apache Cordova CLI. Contribute to apache/cordova-cli development by creating an account on GitHub.github.comapache/cordova-android
Apache Cordova Android. Contribute to apache/cordova-android development by creating an account on GitHub.github.com
This blog was originally published on enappd.com.
Top comments (0)