I had to create a mobile app for one of the data driven applications that I recently developed. Cordova has proven to be an excellent choice to reuse my existing code and make life easier for everyone.
Nature of the web app -
- Enable users to create and track specialised electronic devices
- Track customers who buy these specialised devices and deploy them at their site
- Track usage of deployed devices
- Track issues and manage resolution process
- Enable users to create charts out of device usage
I received the requirement of a mobile app for Android devices when I was about to complete this application. The requirement carried a separate budget for a ‘fresh’ use case.
After a day or two of exploring available options, I advised my client not to go the conservative mobile app route - all of the front-end validations were to be repeated for the new mobile UI. Along with the upfront costs came the additional burden of maintaining two code-bases.
My first thought and course of action was to use a PWA directly on Vue. Vuetify follows material design principles and already provides a mobile-friendly UI. I added PWA and with some tweaking could get it to work seamlessly as a stand-alone app. However, it was not quite the experience the non-technical users were comfortable with.
I had two choices to create a mobile app at that point in time -
- Use Android Studio to package this PWA as an app
- Use Cordova on top of Vue
I chose the later due to ease of use and the ability to avoid (directly) using Android Studio altogether. The following also helped drive those decisions -
- Users do similar tasks on browser and mobile devices
- No requirements to use mobile device functions like Bluetooth, location-aware features, calling features etc.
- The lack of clear requirements on a ‘superior’ user experience on mobile devices; absolutely no requirements for ‘mobile’ way of doing things and ‘animations’
All I had to do to include Cordova was -
I can now run the mobile app in development mode by -
My workflow for subsequent development includes two build steps when relevant -
- Web app for all devices. This is automatically deployed to the server when committed to
npm run build
- Build Android app using Cordova. The APK is automatically signed during build and manually uploaded as a different version in Play store.
npm run cordova-build-android
I had to do additional steps to reduce bundle size for initial paint -
- eCharts library that I used was quite heavy. I just changed all eChart imports to include specific chart types
- Document merge functions were less than ideal, but our users had to live with them for now
- Use specific components rather than whole imports for custom components (tree shake)
- Replace features like image drag & drop and file selection features with more mobile-friendly features (e.g. click and select)
- Optimized static images for heavily used screens
Some of the above tasks had to be done for web apps anyway. But I could afford to ignore them in a desktop scenario.
I did not quite use any of the advanced functions that Cordova or PWA could offer - I just rely on the default service workers to get everything done. The end product has been highly appreciated by stakeholders -
- No/ minimal additional costs
- Similar user experience on web and mobile app (this was directly related to how users are trained)
- Easier and cheaper maintenance
Cordova is not the best choice if a superior user experience with the best performance is high on your list of priorities. But it works absolutely fine for simple-medium complexity app that is focused high on data-driven behaviour and acceptable usability on all devices.