How I built an Android app with Vue
I don’t go deep inside code. I just want to share the process and experience :)
Here we go!
Initially, we did not have any intention of having an android app but just a web app that is optimized for mobile devices too. As we progressed we figured out to be there on the android store which gives that credibility and rating system. So broadly these were our requirements
- We need an android application
- It should support all maps, push notifications, GPS, local storage, etc
- It should be quicker to build and reiterate
- It should look decent in terms of designs and experience
Venkat had already started giving me screens and designs. So I had to take a quick decision with the above needs.
For the first part of my 2 questions, build a web app that looks almost like an android app, I needed some Vue framework which provides me features like screens, nav bars, basic animations, etc. Unfortunately I did not find any such and thought I will build all that required myself.
For the latter question, make an apk out of it, the very first thought I get is to just an apk, which just loads a URL(webview) in full-screen mode. I just searched online for such tools, fortunately, I found one and just downloaded my apk which loads custom URL like https://simplsub.com/mobile
The immediate problem I faced in the process of building the app is to have the standard structure of the app, ex: navbar, bottom stack bar, ripple effects, swipes, etc.
Some native Android
In the first phase of development, the simple apk which I downloaded from online just worked fine. I already knew that it is not sufficient for production. I asked one of my friends, Purushottam, an android developer, to help me in some help.
The first thing he did is to just a basic app with one screen, one full-screen webview. That was cool, we wanted more and added too. Splash screen, the webview loading screen, etc.
Next, we wanted push notification support. Initially, I tried web push notifications but instantly understood that it is not reliable. So we wanted more.
Gradually I understood that there should be an interaction between android and the web. Fortunately, it is possible! We implemented the application in such a way that the web app interacts with native android. For example, if the web app wants to take a pic, it just asks the native android(Java/Kotlin). Purushottam has written very minimal logic for a few things that we want in Kotlin like handling a camera, getting GPS location, accessing the file system, receiving push notifications, etc. With this, the final app shaped exactly the same way we wanted. All happiest for now!
- Web covered. Though we are mobile-first, with very little CSS work, the same app works for the web too! Half time saved, less code to maintain!
- Native power too. You are not limited to just web features. You can do all that native app can do if you want!
- Always upgradable. At some point in the future, if you want to just completely move to native android, it is very much possible.
So far so good. We got what we wanted. But we faced a few issues too. Some of them are
- Poor web + native android versioning. Let's say you implemented some feature in native android which web calls and you released it in version 10. When you release the web, because it is just global, it will get reflected even on old versions of the app even when they don't update it from the play store. Because of this, the web might try to call something which is not available in native android. We can fix this for sure, but more maintenance :(
- Less powerful. If your application needs heavy performance, sure this way of app building is not scalable
I am the kind of person who does what is required. I don’t start with keeping Google in mind in terms of scalability or the user base, but make sure it is upgradable. This method has just worked for me, and I am happy that I followed this way. Even at some point, if I want to move it to native completely, I am all good to go.
PS: We release this product, had some customers but after some 4 months it turned out that we need more resources in marketing. So currently it is inactive operationally