Apache Cordova Gotchas

Few months ago I have started developing a hybrid mobile app using Cordova. I encountered a lot of headaches and frustrations using this technology but the more time you spend on it, the better you get at googling about your issues (lol). Here I list all my headache and quirk fixes I found make it at least bearable to develop for Cordova.

  • Apache Cordova is Phonegap/Ionic . Phonegap and Ionic builds on top of Cordova so most likely ionic or phonegap plugin will work with Cordova.
  • Push notifications.  Use Google Firebase (https://firebase.google.com/docs/cloud-messaging) messaging platform. You create an application for free app for iOS and Android. You must provide the same app ID you set in your application. Use this plugin https://www.npmjs.com/package/cordova-plugin-fcm-with-dependecy-updated , as this allows you to avoid build errors.
  • Use the latest version of Cordova. If for some reason the current version is spitting out errors , use Cordova 8. npm install -g cordova@8.1.2 as this is a stable version.
  • Accessing photos , camera, videos and files. If by any chance you need to access the local resources of the device. Use
    cordova-plugin-file plugin. Take note android/ios has different path scheme. Use window.resolveLocalFileSystemURL to access the local file to get the blob or base64 encoded data eg. data://…  Dont forget that also when you take a photo, the image orientation might not be correct. Use https://github.com/blueimp/JavaScript-Load-Image , this library will sniff the EXIF data and return the correct orientation of the image as a BLOB.
  • Fetch() is a function that lets you grab the blob of the file to be inserted into formData to submit files to the server. It works for base64 encoded data or localhost file such as ‘/path/to/something’
  • Keyboard is recently my main issue making chat system by having a text field on top of soft keyboard. Use cordova-plugin-keyboard (iOS) , cordova-plugin-ionic-keyboard (Android) . Make sure you have cordova-plugin-ionic-webview installed otherwise on iOS you will see a black panel when keyboard is up. And since you are using ionic webview, you must add <preference name=”ScrollEnabled”value=”true”/> to enable body scrolling particularly with iOS.
  • Chat feature , creating a chat feature in cordova is hard/tricky. Remember when the soft keyboard in iOS is up , position: fixed wont work anymore. Remember to Keyboard.shrinkView(true); (disable by default) for the view to shrink and make the div bottom: 0px to attach to the keyboard. It will also help to
    Keyboard.disableScrollingInShrinkView(true); to disable any scrolling while the soft keyboard is up. Put them back to normal afterwards.

Leave a Reply

Your email address will not be published. Required fields are marked *