When we are building mobile applications with Ionic, we are building web applications. Since we are building web applications, our applications can run anywhere the web does. Obviously, this means we could put it on the World Wide Web without much trouble, and we could access it through a web browser (on desktop, tablet, or phone). However, when it comes to mobile applications there are a couple of features that native mobile applications provide that web applications don’t, like:
- The ability to distribute the application through app stores
- The ability to access Native APIs of the device (like Contacts, Bluetooth, or WiFi)
This is where Capacitor comes into play. Capacitor allows you to wrap your web-based application in a “native shell”, and acts as a “bridge” to the native device.
Capacitor will create a native application for each platform you are targetting (e.g. iOS and Android), it will set up a web view in that application, and then it will load your web application into that web view. The end result is a native application (that looks no different to any other native mobile application) that is running your web code.
I also mentioned that it acts as a “bridge to the native device”. Since your code is running inside of a web view, your code does not have direct access to the devices Native APIs like a natively coded mobile application would. To get around this, Capacitor acts as a “bridge” between your code and the native device. By using Capacitor APIs or plugins, you can make a request to Capacitor for certain functionality. Capacitor will then forward your request to the native device, and pass the result back to your web code.
NOTE: If you are familiar with Cordova, keep in mind that you can still use most Cordova plugins in Capacitor. There are a few exceptions, but generally, you can just install the Cordova plugin in your Capacitor project with
npm install and it will work.
To get started with Capacitor, you might want to check out the tutorials below. To view all of my Capacitor tutorials, you can click here.
- An Early Look at Capacitor (A New Native Bridge for Web Apps)
- Capacitor Workflow for iOS and Android Applications
- Using the Capacitor Filesystem API to Store Photos
- Using Google Maps and Geolocation in Ionic with Capacitor
- Using Cordova Plugins that Require Install Variables with Capacitor
Creating Custom Plugins
- Running Custom Native iOS Code in Ionic with Capacitor
- Publishing a Custom iOS Capacitor Plugin on NPM