Today I’m thrilled to announce that Capacitor 3 is ready for public beta! The Capacitor team is looking forward to hearing feedback on it from our developer community. 💖

A New Milestone

Last year we announced Capacitor 2, which brought important platform updates to the ecosystem such as Swift 5 and AndroidX. Since then, we’ve been delighted to see massive adoption in the community. Usage has more than doubled this year alone! It’s clear that developers who use Capacitor share our commitment to staying modern and providing the very best app experiences.

For 3.0, we are focusing our attention on these areas of improvement:

• Community involvement
• Adaptability
• First-class APIs
• Developer experience and productivity

Capacitor 3 is more than just the “next version” of Capacitor. It is a crucial milestone for the project: the core team has grown significantly since the 2.0 release and now has the bandwidth and experience necessary to dedicate more time to the community, more time for prototyping and innovation, more time for stability and maintenance, and more time to deliver on Capacitor’s promise of making it easy to build web apps that run natively on iOS, Android, and the Web.

Vulnerability detail: https://nvd.nist.gov/vuln/detail/CVE-2020-6506

A universal cross-site scripting security vulnerability was discovered in Android WebView that allows cross-origin iframes or links to execute arbitrary JavaScript in the top-level document. For an attack to be successful, a user would need to navigate to a website or iframe containing malicious code within WebView. The vulnerability has been fixed in Android WebView as of version 83.0.4103.106, however users must update their Android WebView from the Google Play Store.

For users of the outdated Android WebView, Capacitor apps loading third party content in iframes or directly in the web view are only vulnerable if precautions are not taken. We are currently exploring a solution to help mitigate the vulnerability. We recommend taking the following precautions if your application may be vulnerable:

Capacitor configuration (capacitor.config.json)

The best line of defense is to only allow first-party trusted content in the web view.

• Do not modify the server.url to a third party or untrusted website.
• Do not add untrusted websites to server.allowNavigation.

It is recommended that apps behaving as a web browser use the Browser plugin.

HTML iframes

Care should be taken when using iframes in your application. If you need to include an iframe in your page, make sure the content is from a trusted source.

The vulnerability can be mitigated by using the sandbox attribute. Using an empty value is the most restrictive configuration that will prevent an attack.

<iframe sandbox="" src="https://example.com/risky.html"></iframe>

Caution: tokens can be added to the sandbox attribute to lift certain restrictions, however some configurations will cause an app to remain vulnerable, such as “allow-popups allow-top-navigation allow-scripts”.

Further Information

More information about the vulnerability can be found at https://bugs.chromium.org/p/chromium/issues/detail?id=1083819 and https://alesandroortiz.com/articles/uxss-android-webview-cve-2020-6506/. Many thanks to Alesandro Ortiz for bringing this to our attention.

The following is a guest blog post from Dan Pastori of Server Side Up. Server Side Up is an online community that shares tutorials and resources about Vuejs, Laravel, Wordpress, and more recently have started creating resources on how to deliver native apps with Capacitor.

Using CapacitorJS with NuxtJS is a perfect combination. NuxtJS allows you to develop powerful, modern fronteneds using VueJS. Combined with CapacitorJS, you can take those modern frontends, compilie them to mobile, and deploy to the platform of your choice.

Working with CapacitorJS, the power of native device features is there for you to integrate into your application. These features include GPS, Haptics, Camera, Filesystem, etc. When I structure a NuxtJS frontend, I like to design it in a way that allows me to re-use important modules through-out components, pages, and layouts.

Angular is used to build seriously large applications, but did you know you can target iOS and Android (and PWA) from your codebase without many changes to your existing Angular app?

With Capacitor, any Angular app can be turned into an iOS and Android app with full access to native APIs and OS controls. Capacitor does this by providing a native runtime for web apps with a bridge to communicate from the web app to the native layer, along with many Native APIs and access to hundreds more from the community.

Perhaps a surprise to many Angular developers, Angular is already used to power a significant number of app store apps (at least 15%). This is because Ionic Framework has been widely used as a mobile UI framework for Angular since the AngularJS days and many Cordova apps used Angular over the years.

Capacitor is a cross-platform native runtime for Web Native apps.

At a high level, that means Capacitor takes a modern web app, and then packages it up to run on iOS, Android, and PWA with access to native platform features and OS-level controls.

Capacitor then acts as the runtime facilitating communication between the web app and the underlying OS.

Let’s dig in and explore how Capacitor works under the hood.

In the React world, the primary way to build native iOS and Android apps has been React Native. Created by Facebook in 2015, React Native enables developers to use their React skills to build iOS and Android apps using platform native UI elements. React Native is popular and widely used, and it’s a great solution for many teams.

However, React Native comes with a number of tradeoffs. First, it requires developers to build in a React Native specific way, using views/JSX for each platform, and using libraries that support react-native (as opposed to most React libraries that support react-dom). But perhaps most importantly, React Native is not a web environment, so it’s not possible for teams to take their web-based React apps and libraries to deploy native apps.

The net effect is that it’s not possible to take, say, a Material-UI React web app, and deploy it natively to the Apple App Store or Google Play Store with React Native.

To do that, we need to take a look at Capacitor – a native runtime for cross-platform web apps, including any and all React web apps.

Today at the first ever official Ioniconf, we unveiled a number of exciting updates to Capacitor and the Capacitor community.

In no particular order, we announced:

• Capacitor opening up to all modern web technologies
• The Capacitor Community project
• Capacitor Elements
• Deploy to App Store for Capacitor
• Updated site and domain

Today we are excited to announce Capacitor 2.0!

Capacitor 2.0 offers some key platform updates as well as security and bug fixes. These include:

• Swift 5 and Xcode 11+ support
• Android 10 (SDK 29) and AndroidX support
• Bug fixes and usability improvements to 23+ core plugins
• Support for generating splash screens and icons

We documented the whole update and talked about what’s next for Capacitor over on the Ionic blog.

Check it out:

https://ionicframework.com/blog/announcing-capacitor-2-0/

Today 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, and the web as Progressive Web Apps—with full access to native functionality on each platform.

We documented this momentous occasion over on the Ionic blog, complete with a comparison to Cordova and where Capacitor is headed from here.

Take a look: https://ionicframework.com/blog/announcing-capacitor-1-0/.