Max LynchToday I’m thrilled to announce the 1.0 release of Capacitor, Ionic’s new Native API Container that makes it easy to build web apps that run on iOS, Android, Electron, and on the web as Progressive Web Apps—with full access to native functionality on each platform.
Capacitor containerizes your Web App and provides consistent access to Native APIs for every platform that app runs on. That means, for example, that accessing the Camera uses the same code on iOS/Android as it does in Electron and on the web. This makes it easy to build one web app that runs natively on mobile, desktop, and the web!
Ionic apps use Capacitor much like Cordova to seamlessly run your app across a variety of platforms without platform-specific code. However, Capacitor brings some significant changes to the Cordova approach that you’ll want to read more about below.
With this release, we are one step closer to making Capacitor the official native container for every new Ionic app, so read on to see what this means and how it will affect your Ionic development:
How Capacitor works
Imagine a typical web app: You probably have some framework code to make your app render and to manage business logic. It’s likely written using a typical framework like Angular, React, Vue, or something like Stencil. Below that, you’re probably using a UI system like Ionic to get quality UI controls.
For many Web Apps, there’s not much more to think about because your app generally runs in a browser and, for good security reasons, you only have access to the set of Web APIs natively supported in the browser. However, that’s not true when running in a Web View environment on mobile and desktop!
In this case, because your app is running outside of the typical browser sandbox, there’s no reason your web app can’t access every Native API available on the given platform. For example, using biometric authentication and storing data in the keychain.
However, it’s not straightforward to take a Web App, put it in a native Web View control (as opposed to a full browser like Chrome/Firefox/Safari), and then proxy JavaScript calls to native code, returning data to your Web App in the process.
This is what Capacitor does: it containerizes your Web App and puts it into a managed native Web View (if running natively), then it exposes native functionality to your web app in a cross-platform way. Capacitor then provides a simple way to expose custom native functionality to your web app (through plugins), along with tooling to work with the web app container on the command line.
How is Capacitor different from Cordova?
In spirit, Capacitor and Cordova are very similar. Both manage a Web View and provide a structured way of exposing native functionality to your web code.
Both provide common core plugins out of the box for accessing services like Camera and the Filesystem. In fact, one of the design goals with Capacitor is to support Cordova plugins out of the box! While Capacitor doesn’t support every plugin (some are simply incompatible), it generally supports most plugins from the Cordova ecosystem.
However, at each step Capacitor has taken a slightly different approach that we think developers will enjoy, though some have tradeoffs to keep in mind:
Native Project as Source Artifact
Capacitor generally expects you to commit your native app project (Xcode, Android Studio, etc.) as a source artifact. This means it’s easy to add custom native code (for example, to integrate an SDK that requires modifying AppDelegate on iOS), build “plugins” to expose native functionality to your web app without having to actually build a standalone plugin, and also debug and manage your app in the way that embraces the best tooling for that platform.
We think this is the right balance since resources like Stack Overflow and typical native app project management work exactly the same as they do for native developers of that platform. This helps you take full advantage of help resources when you run into platform-specific issues, and enable blended teams that have native and web developers to work better together.
However, there are tradeoffs with this approach. Upgrades require more manual work as you have to bring along your native project. You can’t just blow away your native project and recreate it (unless you haven’t modified any of it). Installing plugins doesn’t modify your project so you will need to make manual modifications to preferences files like Info.plist.
However, we find that being able to manage your native project fully ends up being a big relief as your project scales.
No more deviceready
Capacitor kills the deviceready event by loading all plugin JavaScript before your page loads, making every API available immediately. Also unlike Cordova, plugin methods are exposed directly as opposed to being called through an exec() function.
That means no more wondering why your app isn’t working and why deviceready hasn’t fired.
Embracing NPM & Easier Plugin Development
Capacitor embraces NPM for every dependency in your project, including plugins and platforms. That means you never capacitor install plugin-x, you just npm install plugin-x and then when you sync your project Capacitor will detect and automatically link in any plugins you’ve installed.
With that in mind, making it easy to build and share plugins was one of the major areas of focus for us with Capacitor. Developers of Cordova plugins know that it is not easy to build plugins, and it’s nearly impossible to build and test them as standalone projects without importing into an existing app as they are generally just a collection of source files without project scaffolding.
Capacitor makes a few big changes to how Plugins work that also makes them easier to build. First, instead of copying plugin files directly into a project, Capacitor requires your plugins to be Cocoa Pods for iOS or typical android libraries for Android. Then, capacitor comes with a plugin:generate command to quickly scaffold out plugin projects, complete with Xcode and Android Studio projects and unit tests.
We hope this focus on improving the plugin development experience means more plugins will get built and plugins will be better maintained over time. If you’re interested in building your own plugin for Capacitor, take a look at our Plugin Development Guide.
Updated Plugin APIs
Developers will likely appreciate some of the changes we’ve made to core plugins, like the Filesystem plugin which is much more node-like and avoids the now-defunct Web Filesystem API.
First-class Electron and PWA support
Capacitor embraces Electron for desktop functionality, along with adding first-class support for web apps and Progressive Web Apps.
In fact, we’ve taken it a step further by building out a collection of UI experiences for APIs like Camera that bring the native app UI experience users expect to Progressive Web Apps. We call this the Progressive Web App OS.
On top of that, building plugins that offer web functionality as a fallback is just as easy as adding a few files to your plugin! Capacitor will only use your web implementation if the native one is not available, so users can use the exact same API when running on iOS, Android, Electron, and the Web.
Local CLI experience
Capacitor provides a tiny CLI that is installed locally to each app. That means there are no global dependencies to manage and it’s easy to use different versions of Capacitor across every app you build.
But that’s not all, folks!
There are several other changes we’ve made to the experience, and developers will probably notice that Capacitor “feels” quite a bit different than Cordova. To learn more, follow our installation guide.
What about Ionic Supporting Cordova?
Though Capacitor is meant to one day replace Cordova in each Ionic app, that doesn’t mean we’re no longer supporting Cordova! In fact, we’ve been building out a number of new plugins and features for Cordova, with the goal of also supporting them in Capacitor. We think Cordova is a great project that has been a key asset to Ionic’s success, which is why we’re in no rush to replace it and will be supporting it for many years to come!
That being said, we are obsessive about the developer experience behind building apps with Ionic, and see Capacitor as the way we can control every aspect of it and better align the native layer with the goals of Ionic, so we do plan to push Capacitor more prominently as time goes on.
Who’s using Capacitor?
Capacitor has been “out” for a little over a year. Since then, we’ve seen some pretty amazing apps being built on it, along with some major enterprise customers adopting it for apps that you will very likely use one day.
Top global fast-food chains are deploying in-store experiences for mobile and desktop on Capacitor. Companies like Southwest are building out all new hire onboarding experiences on Capacitor and Ionic, and popular consumer apps like Sworkit have built their latest-and-greatest versions on top of Capacitor (and Ionic 4 in this case!).
That’s just a small sample of teams building on Capacitor. Are you planning on building your next app with Capacitor? Let us know! We’d love to learn more and even do a case study if you’re interested.
Getting Started
Yesterday we recorded a special Capacitor launch webinar. In it we demoed some of the Capacitor APIs and showed off how simple it is to add Capacitor to an existing Ionic app currently using Cordova plugins. Didn’t make it? The recording can be found on our YouTube channel.
You can also get started right away. It’s easy to drop Capacitor into any existing modern web app (that includes, of course, Ionic apps).
Thank you
Capacitor has been in the works since late 2017 when we started to explore creating an alternative to Cordova. We were driven by the desire to make some significant changes to the approach pioneered by Cordova, as well as fulfill the need to fully support desktop and web platforms as Ionic’s mission expanded to helping teams build great apps everywhere.
Since then, we’ve had some wonderful contributions from the community and I want to thank everyone that filed issues, submitted PRs, or just spread the word about the project.
Now that Capacitor 1.0 is here, we hope you’ll see why we’ve invested in this new project over the last year and a half. We’re truly just getting started so expect to see a lot more Capacitor in the future.
