If you ever tried to develop mobile apps without touching at all native code like Java, Kotlin, C-Objective, or Swift, you surely have heard about fabulous frameworks that allow you to develop such applications using web technologies like Ionic, Cordova, Phonegap, Flutter, etc. Believe it or not, about 60% of all apps in the app store are cross-platform (they all share the same codebase for multiple platforms).
Well, there's a new framework joining the neighborhood, I'm talking about CapacitorJS, a cross-platform API and code execution layer that makes it easy to call Native SDKs from web code and to write custom native plugins that your app may need. Additionally, Capacitor provides first-class Progressive Web App support so you can write one app and deploy it to the app stores and the mobile web. Capacitor comes with a Plugin API for building native plugins. Plugins can be written inside Capacitor apps or packaged into an npm dependency for community use. Plugin authors are encouraged to use Swift to develop plugins in iOS and Kotlin (or Java) in Android. CapacitorJS is primarily based on web-nature (unlike cross-platforms natives like React Native and Xamarin).
When to use CapacitorJS
What are the differences between Capacitor and Cordova?
In spirit, Capacitor and Cordova are very similar. Capacitor offers backward compatibility with a vast majority of Cordova plugins.
Capacitor and Cordova differ in that Capacitor:
- takes a more modern approach to tooling and plugin development
- treats native projects as source artifacts as opposed to build artifacts
- is maintained by the Ionic Team
See the docs for more details.
Do I need to use Ionic Framework with Capacitor?
No, you do not need to use Ionic Framework with Capacitor. Without the Ionic Framework, you may need to implement Native UI yourself. Without the Ionic CLI, you may need to configure tooling yourself to enable features such as livereload. See the docs for more details.
How to use Capacitor
npm install @capacitor/cli @capacitor/core
After installing the core, initialize the Capacitor instance in your project:
npx cap init
Now, add a platform to work with, for example android:
npm install @capacitor/android npx cap add android
Build your regular VueJS application to build the web resources. As usual, the build will be stored in the dist directory of your Vue project and that's exactly what Capacitor will use as web resources. Synchronize your web assets with the Android project:
npx cap sync
And, assuming that you have already Android Studio installed, you may open the project with the following command:
npx cap open android
You can use then the UI of Android Studio to launch your new mobile app either in your own device or an emulator.