Originally published at: Announcing Capacitor 3.0 - Ionic Blog
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…
8 Likes
What are the steps, in order, to update from the V3 beta?
I updated the cli first, then tried the following:
Tried blog post command and got the following error:
Davids-MacBook-Pro:aom-ionic daveshirman$ npm install @capacitor/core@latest
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! Found: @capacitor/core@3.0.0
npm ERR! node_modules/@capacitor/core
npm ERR! @capacitor/core@"3.0.0" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer @capacitor/core@"3.0.0-rc.0" from @capacitor/filesystem@0.5.2
npm ERR! node_modules/@capacitor/filesystem
npm ERR! @capacitor/filesystem@"^0.5.2" from the root project
Try this batch cli command.
npm i @capacitor/{core,cli,ios,android,filesystem}@latest
Thanks, but same problem:
Davids-MacBook-Pro:aom-ionic daveshirman$ npm i @capacitor/{core,cli,ios,android,filesystem}@latest
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! Found: @capacitor/android@3.0.0-rc.0
npm ERR! node_modules/@capacitor/android
npm ERR! @capacitor/android@"3.0.0" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! @capacitor/android@"3.0.0" from the root project
npm ERR!
npm ERR! Conflicting peer dependency: @capacitor/core@3.0.0
npm ERR! node_modules/@capacitor/core
npm ERR! peer @capacitor/core@"~3.0.0" from @capacitor/android@3.0.0
npm ERR! node_modules/@capacitor/android
npm ERR! @capacitor/android@"3.0.0" from the root project
npm ERR!
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
Try with –legacy-peer-deps
@mhartington Thanks for the assistance. Is there any news on whether the LocalNotifications Capacitor plugin is fixed yet?
Edit 2: All looks good + Share plugin no longer crashes app if invoked twice, great.
Note: I have not:
- upgraded
gradle version to 7, - or edited the
variables.gradlefile yet. - Changed my targetSdk to 30 (on 29)
As I am using external storage still on Android. I believe this will break if I do.
Edit 1: reinstalled AngularFire, will update this post if all looks good for other people’s knowledge.
Thanks, that did enable the batch command above to work.
However, testing this new config by trying to make a new release build:
ionic capacitor build android --prod --release
…Produces a ton of errors with AngularFire, so gonna roll back unless that’s an easy fix.
I imagine many people are using this npm library too.
Great news!
I have only tried Capacitor once and the reason fot not migrating from Cordova was the fact that the .ipa produced by the capacitor build was over 50MB while the same build in Cordova was around 7MB.
The modularity feature in Capacitor 3 means that from now on the .ipa build size will be small?
Do the capacitor plugin still use Swift Libraries that adds lot of MB in the total .ipa build?
Thank you
Probably best to open a new topic for this.
Capacitor’s modularity should reduce the overall size, yes. Final size though does come from the web code that is shipped, as well as the native libraries being used.
Since Capacitor makes proper use of native packages/libraries, the native tooling should be able to remove unused code from the final build.
Thank you for your response!
I am a very very early adopter of Ionic and the only thing now stopping me from migrating from Cordova to Capacitor is the large .ipa produced due to Swift libraries the iOS build is adding.
I will definitely give it a try in order to be sure that I will be able to have a rather small .ipa file with the new Capacitor 3.
Just for reference:
Thanks, that’s a great update!
The blogpost mentions a different “configurations based on the development environment” for the TypeScript configuration files. How this can be achieved? Should I create multiple config files or multiple config objects within one file?
1 Like
This looks interesting.
We’re trying to overcome PWA storage capacity restrictions, in order to download / cache video on user devices, for an online school platform.
Is this something Capacitor would allow us to do?
My experience with the update, maybe it can be useful to someone of you.
I was able to update to capacitor 3.
This was my environment before the update:
Ionic:
Ionic CLI : 6.16.1 (/usr/local/lib/node_modules/@ionic/cli)
Ionic Framework : @ionic/angular 5.3.1
@angular-devkit/build-angular : 0.803.26
@angular-devkit/schematics : 8.3.26
@angular/cli : 8.3.26
@ionic/angular-toolkit : 2.3.3
Capacitor:
Capacitor CLI : 2.4.1
@capacitor/android : 2.4.1
@capacitor/core : 2.4.1
@capacitor/ios : 2.4.1
Cordova:
Cordova CLI : 9.0.0 (cordova-lib@9.0.1)
Cordova Platforms : not available
Cordova Plugins : not available
Utility:
cordova-res (update available: 0.15.3) : 0.15.1
native-run (update available: 1.3.0) : 0.2.8
System:
ios-deploy : 1.9.4
ios-sim : 8.0.2
NodeJS : v14.17.0 (/usr/local/bin/node)
npm : 6.14.13
OS : macOS Big Sur
Xcode : Xcode 12.5 Build version 12E262
This is the environment after the update:
Ionic:
Ionic CLI : 6.16.1 (/usr/local/lib/node_modules/@ionic/cli)
Ionic Framework : @ionic/angular 5.3.1
@angular-devkit/build-angular : 0.901.15
@angular-devkit/schematics : 9.1.15
@angular/cli : 9.1.15
@ionic/angular-toolkit : 2.3.3
Capacitor:
Capacitor CLI : 3.0.0
@capacitor/android : 3.0.0
@capacitor/core : 3.0.0
@capacitor/ios : 3.0.0
Cordova:
Cordova CLI : 9.0.0 (cordova-lib@9.0.1)
Cordova Platforms : not available
Cordova Plugins : not available
Utility:
cordova-res (update available: 0.15.3) : 0.15.1
native-run : 1.3.0
System:
ios-deploy : 1.9.4
ios-sim : 8.0.2
NodeJS : v14.17.0 (/usr/local/bin/node)
npm : 6.14.13
OS : macOS Big Sur
Xcode : Xcode 12.5 Build version 12E262
Capacitor 3 uses Typescript 3.8+, i had to update Angular from version 8 to 9 otherwise i was able to use only Typescript version < 3.6 (greater version need Angular 9+) which is incompatible with Capacitor 3.
After that I had to manually update polyfills.ts changing the file import from
import ‘./zone-flags.ts’;
to:
import ‘./zone-flags’;
My app uses 3 plugins (facebook-login, camera and push-notification).
I have installed the latest version an tthe app runs and compiles but i get no push notifications and i can’t use the camera.
Facebook Login works fine.
The Android apk now is about 500k larger, i think it’s because of Angular 9.
I think i will revert to Capacitor 2 for the moment and wait for the plugins to be more stable.
YEAHHHH… Super excited about this… Amazing work by the Ionic Team. I have been happily working with Capacitor right from the first beta version and until the most recent v3 RC releases.
Thrilled to upgrade my apps to v3 stable now. Keep it up guys…! 
2 Likes
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.
I was excited about this feature, but it seems either useless or I couldn’t find a proper way to use it 
.
Since the run command only runs the build once and doesnt monitor my code for changes, like ionic capacitor run - it’s kinda pointless while devving.
And since for dev I have to still use ionic capacitor run - I still have to have AndroidStudio open - thus I cannot save my computer’s resources, unlike this blog post claims 
.
Update your Ionic CLI. We pushed a change before the launch that included some features for this.
ionic cap run <platform> --livereload
Enabled live-reload while running on the native platform.
should I run it alongside ionic serve?
Nope, if you have the latest ionic cli, it will run the devserver as well.
npm i -g @ionic/cli@latest
ionic cap run <platform> --livereload
1 Like
Thanks, works like a charm 
.
I would put a link in the docs that mentions that command - run
And also, mention it here - Capacitor - build cross platform apps with the web
Is there a reason --livereload isn’t listed here https://capacitorjs.com/docs/cli/run ?
Are there other options not listed?
1 Like