Matt NetkowToday I’m thrilled to announce the 2.0 release of Capacitor, Ionic’s native runtime that makes it easy to build web apps that run on iOS, Android, and on the web as Progressive Web Apps— all powered by a single codebase.
Developers use Capacitor as a native app container for packaging and deploying their Ionic apps to various mobile and desktop platforms. Capacitor allows them to access native features like the Camera using the same code across all platforms - without having to worry about platform-specific details.
This new version updates Capacitor and its project templates to the latest security, bug fixes, and features including:
- Swift 5 and Xcode 11+ support
- Android 10 (SDK 29) and AndroidX support, which makes Face Unlock and Iris Unlock available now in Ionic Identity Vault.
- Bug fixes and usability improvements to 23+ core plugins
Why Capacitor?
Traditionally, web developers have turned to tools like Apache Cordova/Adobe PhoneGap to deploy their web apps to other platforms. This worked well for many years, with Ionic recommending Cordova as the default method for targeting native iOS and Android platforms. Over time our opinions changed about how this layer should work and after exploring various ideas, determined the best option was to bring the native runtime component of app building in-house.
Now a key part of the Ionic Platform, Capacitor makes it easy for web developers to reuse their skills to build quality apps for all platforms, while significantly lessening the likelihood that they’ll get stuck on native-specific issues. You can learn more about how Capacitor compares with Cordova in this article penned by Max.
Capacitor 2.0 updates its underlying technology to support the latest versions of programming languages and operating systems that power all Capacitor apps, enabling improved performance, security, and modern development experiences. Specifically, support for the latest tech from iOS and Android is now available.
Swift 5 and Xcode 11+
On the iOS front, this means Swift 5 and Xcode 11+ support. This brings smaller app bundle sizes, modern development tooling and features, and compatibility with earlier versions of Swift.
Android 10 (SDK 29) and AndroidX
On Android, this means Android 10 (aka SDK 29), with improved security and biometrics, audio/video capabilities, and system-wide dark mode.
Additionally, AndroidX, the next generation of the Android Support Library, is now supported. Both provide Android developers with a standard way to provide users with newer features on earlier versions of Android or graceful fallback when unavailable.
AndroidX replaces the Support Library, providing feature parity and backward-compatibility while also bringing improvements to library modularity, smaller code size, and a better developer experience.
Whether you’re a consumer of Capacitor or a plugin author, you simply need to update your projects (or CLI) to access these new capabilities (see below).
Improved Plugins, Tooling, and Docs
Capacitor 1.0 wouldn’t have been as successful as it has been without a solid developer experience backing it. With Capacitor 2.0, we’ve reviewed it from head to toe, leading to updates to the core plugins, the CLI tooling, and documentation.
Fundamentally, if you’re going to build unique app experiences, you need a reliable set of plugins to build on top of. Capacitor 2.0 includes many updates to its 23 core plugins, from bug fixes to new features to usability improvements. Many of these changes were driven by feedback from you, the Ionic community, so thank you! We appreciate your efforts and feedback - it helps us ensure that it’s never been easier to get started with Capacitor.
Speaking of awesome community efforts, Ionic’s official tool for generating splash screens and icons, cordova-res, just got a big update: Capacitor support! Thanks to wannadream for this contribution.
npm i -g cordova-res
cordova-res --skip-config --copy
With this expanding scope, I guess we’ll have to rename it!
Capacitor’s embrace of native tooling means that it’s never been easier to implement more creative native features. That said, the nuances and details can be challenging, so we’ve begun to add new implementation guides to the Capacitor docs, including Deep Links, Sign In with Apple and a refreshed Push Notifications with Firebase guide. There are more coming soon - if there’s content you think is missing, please let us know in the comments.
Sign In with Apple
Sign in with Apple offers users the ability to sign into apps and websites using their Apple ID. Benefits include a focus on security (automatic two-factor authentication and user activity is not tracked) and users can start using your app right away (bypassing traditional sign-up measures).
As of April 2020, apps that use a third-party or social login service are required to offer Sign in with Apple as an option as well. This includes Facebook, Twitter, Linkedin, and Google.
The community-driven Capacitor Sign in with Apple plugin offers an easy implementation process out of the box. Simply install the plugin, configure the native iOS project, then move on. Learn how here.
Android Face Unlock & Iris Unlock
In order to protect your user’s data, you need to keep up with the latest mobile security features. Security is traditionally challenging to implement correctly - with disastrous results if done wrong.
With the new support of AndroidX in Capacitor 2.0, Ionic Identity Vault now supports Android’s Face Unlock and Iris Unlock. This update to Ionic’s all-in-one frontend identity management system brings industry-leading facial and iris authentication features to the Android platform. Using a simple API, you can add top of the line biometric authentication to your Capacitor apps. Learn more here.
Coming Soon: CORS is no more!
Speaking of listening to dev feedback - we’ve got a new plugin in the works that should alleviate most of the pain Ionic developers feel when accessing external data & APIs on mobile.
Cross-Origin Resource Sharing (CORS) is a mechanism that browsers and webviews — like the ones powering Capacitor — use to protect your user's data and prevent attacks that would compromise your app.
While great for security, this commonly restricts HTTP/S requests - the mechanism through which developers access and manage external data - leading to lots of confusion. Ultimately, this is a distraction that takes away time and focus better spent building apps.
Soon, we’ll introduce a new HTTP plugin that addresses this automatically in a cross-platform approach. On mobile, HTTP requests are executed natively, outside the webview. This effectively bypasses CORS, resulting in an improved developer experience while maintaining proper security protocols (native apps are not subjected to CORS). Web requests use fetch, the modern web browser API for retrieving external resources.
The HTTP plugin is in active development. We’d love for you to test it and provide feedback. You can also check out our CORS troubleshooting guide in the meantime.
An update on Electron support
After taking a hard look at what our priorities and focus needs to be in 2020, we've decided to put Electron support back into beta. After additional investment in key platforms that generate the most interest (iOS, Android, and PWAs), we'll revisit it.
Easy Update Process
Capacitor gives Ionic developers complete control of their native projects. Among many other benefits, this makes updating easy and straightforward.
First, update Capacitor Core and the CLI:
cd your-app-folder
npm install @capacitor/cli@latest
npm install @capacitor/core@latest
Next, update each Capacitor library in use:
npm install @capacitor/ios@latest
npx cap sync ios
npm install @capacitor/android@latest
# Within Android Studio, click “Sync Project with Gradle Files” button
cd electron
npm install @capacitor/electron@latest
Then, follow these update instructions which cover one-time manual steps:
More than a version number
Capacitor 2.0 is a significant update to an increasingly important part of Ionic’s app development platform.
We’ve been blown away by the reception of Capacitor since it was announced, and installs have been growing quickly.
With 2.0, we are starting to make Capacitor the default for all new Ionic React and soon Ionic Angular projects, and expect us to be recommending Capacitor for all new Ionic apps and increasingly for enterprise apps as well.
Additionally, we are dedicating more internal resources to Capacitor as it becomes a key part of the Ionic offering. Expect to see Capacitor receive a lot more focus and attention from us in the coming months.
Start building today
If you’re new to Capacitor, it’s easy to get started. Follow our complete First App guide to build a Photo Gallery app powered by the Capacitor Camera, Filesystem, and Storage APIs. For those looking to dive in right away, check out the Ionic App Wizard - generate a great Capacitor starter app in seconds.
