Announcing Capacitor 3.0
Today I’m thrilled to announce the 3.0 release of Capacitor, Ionic’s native runtime that makes it easy to build web apps that run on iOS, Android, Desktop, and on the web as Progressive Web Apps — all powered by a single codebase.
Capacitor connects the web to native, enabling the best of both worlds by providing the tooling and runtime that make it possible to take any modern web app and deploy it natively to all the platforms you care about.
With the release of Capacitor 3.0, we’re unlocking a new approach to building native apps with web technology — a category we’re calling Web Native apps.
In fact, Capacitor is quickly becoming the de facto standard for web developers building for mobile. It’s installed half a million times per month and growing rapidly, with thousands of new apps kicked off every week. It was also rated #1 in satisfaction among mobile development tools on the latest State of JS survey.
With the release of Capacitor 3.0, we’re planting a stake in the ground: Capacitor is now the standard for web developers building mobile apps. We’re firmly committed to making mobile development just as good as web development, and that’s exactly what Capacitor enables. Whether you have an existing web project or are curious about starting a new mobile project, we hope you’ll check out Capacitor.
Now, on to Capacitor 3.0’s major updates, which include improved performance, enhanced developer experience, and greater community involvement.
Performance
Performance: everyone’s favorite topic! As you know, when it comes to building world-class apps, especially those that run across multiple platforms, great performance is a must. The Ionic and Capacitor teams are always laser-focused on maintaining great performance and developer experience, and Capacitor 3.0 is no exception.
We took a fresh look at Capacitor to find creative ways that we could further improve performance, including reduced app bundle size and improved app launch time.
Official Plugins Separated from Capacitor Core
First, to reduce app bundle size, the official Capacitor plugins have been separated from Capacitor Core.
This is a departure from previous versions of Capacitor. Until now, the 20+ official Capacitor plugins, which span everything from camera, to geolocation, filesystem and push notification support, were bundled together with Capacitor Core, the native runtime code that powers the ability to deploy your web app as a native app. This made getting started with Capacitor really easy, providing access to common native features out-of-the-box.
However, since all plugins were bundled with Core, your app would contain code for all available native features — even those you weren’t using. Additionally, plugin permissions were automatically configured in Capacitor-powered iOS and Android native projects. This meant it wasn’t always apparent why native features were included if they weren’t being used. This prompted questions like, “Why does my app ask for permission to use the camera if I’m not using that feature?”
With Capacitor 3, you can use only the features you need. Simply import the exact plugin you’d like to use and you’re on your way. Most of the APIs have stayed the same too, so you can upgrade in only a few steps. View complete details here, but in practice, here’s what it looks like:
// Capacitor 1 and 2
import { Plugins } from '@capacitor/core';
const { Camera, Filesystem } = Plugins;
// Capacitor 3 - Camera and Filesystem plugins
import { Camera } from '@capacitor/camera';
import { Filesystem, Directory } from '@capacitor/filesystem';
// In most cases, no changes to the API
const imageData = await Camera.getPhoto({
resultType: CameraResultType.Uri,
source: CameraSource.Camera,
quality: 100
});
Lazy Load Web Plugins
Finally, plugins are now lazy loaded based on the platform the app is running on. For example, an app running on Electron will only load Electron-based plugins, and will not load plugins for other platforms that aren’t required, such as iOS or Android. This helps keep bundle sizes down, and ensures platform-specific code is not accidentally executed on the wrong platform.
Enhanced Developer Experience
Capacitor 3 also adds a number of improvements to Capacitor’s developer experience, starting with the native mobile tooling:
New CLI “run” Command
Capacitor’s tooling has received a bunch of improvements too. By popular demand from the community, we’ve created a new “Run” command that eliminates unnecessary context switching from code editor to native IDEs. It copies web assets into native projects, programmatically invokes a native debug build, then deploys the app to Android and iOS (physical or virtual) devices. Not only can you build and deploy faster, it frees up your computer’s resources since you no longer need to have the native IDEs open while developing and testing apps.
TypeScript Configuration Files
The Capacitor configuration file, used to configure and set high-level options for Capacitor tooling as well as the native mobile apps in JSON format, can now be written in TypeScript. This means you can configure Capacitor in a type-safe manner (including autocomplete and inline documentation). One exciting benefit is the ability to specify different configurations based on the development environment (such as development, QA, and production), as well as leveraging environment variables to customize the app experience.
Updated Permissions API
In order to access certain native features, such as geolocation or camera access, apps need to request permission from users first. This is accomplished by a plugin permissions API, which has been reimagined in Capacitor 3.0 to offer a standardized mechanism for controlling plugin permissions.
Prior to 3.0, permission prompts were presented when the user first interacted with a feature. For example, when first accessing camera functionality, the user would be prompted to grant permission to the app to use the camera feature. Now, Capacitor developers have the ability to prompt permission requests at any time. For example, the user may be prompted to grant access when the app is first installed. This provides more flexibility in the user experience by allowing the developer to decide when and how permission prompts are presented to the user, rather than when the feature requiring permissions is first accessed.
Community Investment
At Ionic, we’ve always believed in the power of open source and the open source community. With the launch of Capacitor 3.0, we’ve taken a fresh look at how we can improve our investment in our wonderful community through a new GitHub org, public milestones, and improved community support.
Capacitor Community GitHub Organization
Almost one year ago, we rolled out the Capacitor Community GitHub organization. It hosts plugins, tools, and other projects — all contributed and maintained by the community.
Today, the org hosts many popular plugins and tools, and more are being added all the time. If there’s a plugin you’d like to see built, add a request to the Proposals repository. We’ve had a number of great plugins make it in so far, including Bluetooth Low Energy and a barcode scanner.
Speaking of plugins, we’ve also created a new documentation generation tool, which standardizes how Capacitor plugins are documented on both the GitHub and npm landing pages.
That’s not all. Capacitor now supports community-maintained platforms. The first platform is Electron; huge shout out to Mike Summerfeldt for leading this effort! Through a new standardized model and development template, other platforms can be added by the community in the future.
Between the 20+ official Capacitor plugins and tons of community plugins, you can be confident you’ll find the native features you need to build great apps.
Increased Transparency
Not only is our code open source, but our work is, too. Recently, we’ve increased Capacitor’s project transparency with public milestones and project planning all on GitHub.
Community Forum
Since Ionic’s early days, we’ve centered our focus on open source and community building. We’re proud of how welcoming and inclusive our community is. That said, we’re always looking for ways to do more, so recently we’ve taken steps to increase our community presence even further on the Ionic Forum. Our goal is to ensure you can build great apps by getting your questions answered by the Ionic team and the broader community, and in general, feel confident investing in Capacitor and its ecosystem. See you online!
Capacitor 3 Migration
Excited to try out Capacitor 3.0’s great new features? We’ve taken steps to ensure that migration is as smooth as possible. Check out the migration guide, featuring the required tooling to run Capacitor 3.0 apps as well as steps to update official plugins and your iOS and Android projects.
If you’re a plugin author looking to upgrade your plugins to Capacitor 3.0, see the Capacitor plugin upgrade guide. It documents the migration steps for iOS, Android, the web, and adopting the new Permissions API.
Introducing Ionic Portals: Power Up Existing Native Apps with Capacitor
As a bonus, we’re excited to announce Ionic Portals, a supercharged Web View control for safely embedding rich web experiences into existing native apps built on top of Capacitor.
With Portals, native and web teams can collaborate to bring existing web experiences and micro-apps to native, without getting in the way of the existing native app roadmap. Portals supplies a native API with the ability to extend the Web View with custom native functionality, providing robust web-to-native capabilities to embedded web apps.
To learn more about Portals, watch a demo, and join the waitlist, visit the Portals announcement page.
What’s next for Capacitor?
With v3 out, we’re starting to think about what’s next for Capacitor. When we created Capacitor, one of our goals was to make it the most stable native runtime on the market, so stability is an ongoing focus for us. We want Capacitor to Just Work and always be a joy to use. That work is never-ending and is a major focus for us.
Beyond stability, we are investigating a number of features that we think will be much appreciated by the community. One of which is making testing easier. We know that testing Web Native apps today can be difficult, since most solutions focus on testing either the web side or the native side but rarely both together. We think this is an area we can improve and are exploring options for doing that. We’re also building out Ionic Portals to bring Capacitor to existing native apps in a way that native developers will love.
Once we catch our breath after the v3 launch we’ll share more insight into Capacitor’s roadmap, so stay tuned for that. Your feedback on areas you want to see us improve is always appreciated and helps us figure out where to focus.
Build Apps with Capacitor 3.0 Now
More developers than ever are migrating to Capacitor, or joining us for their very first app. We hope you’ll check it out for your next cross-platform project. You can drop Capacitor into any existing web app, framework, or library, including React, Svelte, Vue, Tailwind (or your preferred Web Framework) projects.
