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

The app is hybrid of technologies but the web app was mainly developed using Javascript in the backend. Vue and Vuetify turned out to be highly productive choices for the frontend. Component based development, readily available UI components, and data tables turned out to be life savers.

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 -

1. Use Android Studio to package this PWA as an app
2. 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 -

1
2

npm install -g cordova
vue add cordova

I can now run the mobile app in development mode by -

1

npm run cordova-serve-android

My workflow for subsequent development includes two build steps when relevant -

1. Web app for all devices. This is automatically deployed to the server when committed to master branch.

   1	npm run build

2. Build Android app using Cordova. The APK is automatically signed during build and manually uploaded as a different version in Play store.

   1	npm run cordova-build-android

I had to do additional steps to reduce bundle size for initial paint -

1. eCharts library that I used was quite heavy. I just changed all eChart imports to include specific chart types
2. Document merge functions were less than ideal, but our users had to live with them for now
3. Use specific components rather than whole imports for custom components (tree shake)
4. Replace features like image drag & drop and file selection features with more mobile-friendly features (e.g. click and select)
5. 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.