Capacitor wraps the web app in a so-called “WebView” that can display web apps inside the native app. It injects a “bridge” into the app running in the webview, that connects the code of the web app and the code of the native part so these can interact. ionic.zone/capacitor/overview
Using capacitor in 2023, so far it's been perfect. Easy to get set up & works out of the box (not naming alternatives i've tried here...), lets me use my web app skills to build mobile apps...
I got my brain fried trying to understand how to make a PWA lol all tutorials be like "oh ofc you have already done kwhwjwhsi and jwhskwusbs now let's start the first step" lol
Learning Django rn. I know html, css, js after learning Django well enough will learn Vue.js and start using Capacitor. I'm hyped for the Capacitor. Just knowing that you can write frontend using web stack and run it on every device is truly amazing!
I really like the fact that you just basically just use adapters and let capacitor worry about the rest. Kinda like angular's render, nice and simple, this is an awesome dev ux!
Very good...started with Sencha to build hybrid apps...then turned to Ionic...went to Angular as Ionic couldn't cover the web...but now..back to Ionic because it's the future...covering 5 different OS's with 1 code-base is brilliant...I thought it was good covering 2 (IOS & Android) with maybe 3 (Windows) but capacitor includes the PWA basics as well...all from code base...what more do you want !!!
You can avoid polluting your global installations with electron-packager if you 'npm i --save-dev electron-packager' and run 'npx electron-packager . --platform=win32'.
Awesome! I know you just did a video about push notifications on Ionic, but I would like to see how this works on capacitor, it would be awesome if you did a video about it!
I´ve just arrive to this video (which it don´t say nothing good about my skills I´m affraid 😅) but ... let me ask you... are still cordova or capacitor a good option to build hybrid apps?. Thank you so much for yor work.
Electron support contributor here: Just want to shed some light as to why the Geolocation plugin returned "undefined". Did you set the Enviromental Var for GOOGLE_API_KEY? If not this can be done in the /electron/index.js by adding: process.env.GOOGLE_API_KEY = 'YOUR_KEY'; If you did all that I'd be interested in seeing any error logs for it in a Github issue so we can get to the bottom of the issue. :) Really good video!
Hi Mike, thanks for posting this. I made zero effort to fix that issue because I mostly wanted to prove the build process worked on all platforms, but this will be helpful to someone working with geolocation on desktop.
thank you brother for educating us! Will ionic capacitor compete react native and flutter? whats your thoughts? sorry forgot to wish you! happy easter to you and your family
Hi Max, do you know how can I share a file from an Android App to an Ionic/Capacitor App? the PWA option is called "share target" but I'm looking to do the same for a native Android-Ionic-Capacitor app, by any chance do you know how to do that?
I am using external self created angular library in my project. In project when I do "ionic/npx cap add android" it works fine, and when I do "ionic/npx cap sync android" it gives an error project/android/src/main not found. Why it is finding assets in android/src/main rather /android/app/src/main
I have a little Problem with electron. When I create the electron app via electron-packager, the app contains nothing. That´s strange, because it works on Android, the Web, but not as a program.
Ok this video is a bit older... and I am running Node JS v20... and a newer capacitor and the imports from this video dont work... {map} from 'rxjs/operators/map'; can you update those at least in the links below?
HELP! Failed to compile. ./src/app/app.component.ts Module not found: Error: Can't resolve 'rxjs/observable/bindCallback' in '/Library/WebServer/Documents/otros/capacitor/hello-world/src/app'
im lost when you said play button and open the emulator, how do i config my emulator to see the result on windows? and how do i create the apk after that? please help
Open the /android folder with AndroidStudio. You'll see a play button on the top right corner that will run an emulator. No need to create the APK manually.
There an error at return watch.pipe(map(pos => pos.coords)); The error in vscode reads... Property 'coords' does not exist on type '[GeolocationPosition, any]'.ts(2339) How do I fix this? Pls help.
Hey Edward, you can just do something like this to get around that: ngOnInit(): void { this.watchPosition().subscribe(pos => { this.coords = pos.coords; }); } watchPosition(): Observable { return bindCallback(Geolocation.watchPosition)({}); }
Sorry I'm currently facing a problem, where after running npx cap serve, I only see a webpage load with the root directory name ~/ and the file name of my project. Is there something I might have missed? On the localhost:3333 site it says "listing directory /.../" in the tab.
In the video he is using an older @angular/cli which outputs the build-output directly in /dist. Nowadays with the later versions of @angular/cli it outputs in dist/[projectname]. To fix it just change the webDir to 'dist/[projectname]' inside the capacitor.config.json.
Anyone else getting issues following this, I get the following; app.component.ts (27,38): Property 'coords' does not exist on type '{}'. Running angular version 4.2.4
Would be fun if you would take a re-view on CapacitorJS now to see how far you could get to native performance with a PWA in 2022.
@Fireship
+1
+1
quite far!
+1
Capacitor is a very refreshing take on hybrid app development. Looking forward to seeing this tool evolve in the future.
So for the mobile platform is it still contained in web view? or it is rendered like react native? Thanks.
Capacitor wraps the web app in a so-called “WebView” that can display web apps inside the native app. It injects a “bridge” into the app running in the webview, that connects the code of the web app and the code of the native part so these can interact.
ionic.zone/capacitor/overview
Have a different today,? I
What do you think today tho?
The future is now!
Using capacitor in 2023, so far it's been perfect. Easy to get set up & works out of the box (not naming alternatives i've tried here...), lets me use my web app skills to build mobile apps...
I got my brain fried trying to understand how to make a PWA lol all tutorials be like "oh ofc you have already done kwhwjwhsi and jwhskwusbs now let's start the first step" lol
Going to try it soon - converting a Vue 3 MVP. Looking promising so far.
Or this
ua-cam.com/video/WbbAPfDVqfY/v-deo.htmlsi=z3DGlpl81iwbia67
Learning Django rn. I know html, css, js after learning Django well enough will learn Vue.js and start using Capacitor.
I'm hyped for the Capacitor. Just knowing that you can write frontend using web stack and run it on every device is truly amazing!
Your comment hyped me up even more =)
Jeff :) is the only tutor that can make you get interested in a tool in less than 5 mins. I love this
Haha, thank you. I can only make videos about topics that I am genuinely excited about.
My name is jeff
I really like the fact that you just basically just use adapters and let capacitor worry about the rest. Kinda like angular's render, nice and simple, this is an awesome dev ux!
Outstanding! The capacitor shows like a really powerful tool.
It's def much more intuitive than apache cordova, but still needs time to mature.
I bet it has 💪🏻💪🏻
Another game changer. I need to take a leap of faith and look into these new tech sooner.
This is honestly amazing
Very good...started with Sencha to build hybrid apps...then turned to Ionic...went to Angular as Ionic couldn't cover the web...but now..back to Ionic because it's the future...covering 5 different OS's with 1 code-base is brilliant...I thought it was good covering 2 (IOS & Android) with maybe 3 (Windows) but capacitor includes the PWA basics as well...all from code base...what more do you want !!!
It can't build native PS5 apps it's trash 😂 /s
@@firebasefreelance7456🙄🙄
You can avoid polluting your global installations with electron-packager if you 'npm i --save-dev electron-packager' and run 'npx electron-packager . --platform=win32'.
Jeff is my favourite tech youtuber!
this, has so much potential
I'm glad i found this video to begin playing with this (apparently) fabulous tool
would love to see a revisit now
Please update this showcase for the latest capacitor version! A lot has changed 😎
Awesome! I know you just did a video about push notifications on Ionic, but I would like to see how this works on capacitor, it would be awesome if you did a video about it!
Hi, how do you do to paste code snippets in series like that?
I´ve just arrive to this video (which it don´t say nothing good about my skills I´m affraid 😅) but ... let me ask you... are still cordova or capacitor a good option to build hybrid apps?. Thank you so much for yor work.
Electron support contributor here: Just want to shed some light as to why the Geolocation plugin returned "undefined". Did you set the Enviromental Var for GOOGLE_API_KEY? If not this can be done in the /electron/index.js by adding: process.env.GOOGLE_API_KEY = 'YOUR_KEY'; If you did all that I'd be interested in seeing any error logs for it in a Github issue so we can get to the bottom of the issue. :) Really good video!
Hi Mike, thanks for posting this. I made zero effort to fix that issue because I mostly wanted to prove the build process worked on all platforms, but this will be helpful to someone working with geolocation on desktop.
Can you please do a remake of this with new updates..
Svelte + Capacitor is the one
im super stuck about this capacitor lib!! Thank you so much for the vid !
write once, build all plalform, that's great way should apply all when software developing .
I wish real life was that easy :)
It's 3 years now plz use capacitor 3 and re make the new video 👍
Fireships feels like I am watching documentaries
What tha fuck, best notice ever, that video save my weekend of work, i can rest now, one week searching how build my angular app in android now i can
These days it's the Socket runtime 😎
This is really exciting technology, I wonder how it's gonna play with web-assembly. BTW Awesome job explaining this!
it wont
It's time to create a new updated video, since we have Capacitor v3 BETA
WOW! Thanks for the demo.
every single video you create is a piece of artwork. What is your website's url?
capacitor sounds good
Looks great. Hope it works great!
@fireship Can you please shed some light on pros and cons with Quasar ?
What's the title of the intro song, it's beautiful
thank you brother for educating us! Will ionic capacitor compete react native and flutter? whats your thoughts? sorry forgot to wish you! happy easter to you and your family
Yes, in way. React native, flutter, and Ionic are all solving similar problems in different ways. Best choice depends on a whole variety of factors.
As far as i know, every single digital eletcronic device has Capacitor inside it..
Hi Max, do you know how can I share a file from an Android App to an Ionic/Capacitor App? the PWA option is called "share target" but I'm looking to do the same for a native Android-Ionic-Capacitor app, by any chance do you know how to do that?
I am using external self created angular library in my project. In project when I do "ionic/npx cap add android" it works fine, and when I do "ionic/npx cap sync android" it gives an error project/android/src/main not found. Why it is finding assets in android/src/main rather /android/app/src/main
Wow this seems very interesting!!
capacitor === potential
I have a little Problem with electron.
When I create the electron app via electron-packager, the app contains nothing. That´s strange, because it works on Android, the Web, but not as a program.
npx cap serve no longer works with the new version of capacitor. Any pointers ?
Awesome stuff !
I was happy until I saw
Lat: undefined; Lng: undefined on windows 💀☠️👽
Capacitor does it include all community and premier plugins availiable on ionic framework docs ?
But it's a nice video Jeff
how can we make the backend works with our capacitor app Crud methods!
it's been 6 years wow
Very promising!
good job !!!
Ok this video is a bit older... and I am running Node JS v20... and a newer capacitor and the imports from this video dont work... {map} from 'rxjs/operators/map'; can you update those at least in the links below?
Also for the Angular Server... can you comment on how to move the directory structure to Apache?
definitly on my radar but ill wait for a beta release before i actualy make something with it.
That's smart, it's not quite ready for production yet.
can capacitor reach out to postgres online database in real time ? i am having trouble
HELP!
Failed to compile.
./src/app/app.component.ts
Module not found: Error: Can't resolve 'rxjs/observable/bindCallback' in '/Library/WebServer/Documents/otros/capacitor/hello-world/src/app'
import { bindCallback } from 'rxjs';
Sir what's the difference between ionic 4 and capacitor? can they no do the something like deploying electron app?
thank you
Why did the windows version lat and lng vars return undefined? Was the win pc not connected to Wi-Fi?
Hi! I really like your contents. Can you do a fun video where you're building an instant messaging app like whatsapp for example! that would be great.
is it possible to build the app using bootstrap? without the angular part
im lost when you said play button and open the emulator, how do i config my emulator to see the result on windows? and how do i create the apk after that? please help
Open the /android folder with AndroidStudio. You'll see a play button on the top right corner that will run an emulator. No need to create the APK manually.
thanks! it works for me and im very amazed!!
I use local notification, it can't popup, I according to official doc, I don't know why
There an error at
return watch.pipe(map(pos => pos.coords));
The error in vscode reads... Property 'coords' does not exist on type '[GeolocationPosition, any]'.ts(2339)
How do I fix this? Pls help.
Hey Edward, you can just do something like this to get around that:
ngOnInit(): void {
this.watchPosition().subscribe(pos => {
this.coords = pos.coords;
});
}
watchPosition(): Observable {
return bindCallback(Geolocation.watchPosition)({});
}
'npx cap add ios ' never finished ... loop in Updating iOS native dependencies .. :/
Sorry I'm currently facing a problem, where after running npx cap serve, I only see a webpage load with the root directory name ~/ and the file name of my project. Is there something I might have missed? On the localhost:3333 site it says "listing directory /.../" in the tab.
In the video he is using an older @angular/cli which outputs the build-output directly in /dist. Nowadays with the later versions of @angular/cli it outputs in dist/[projectname]. To fix it just change the webDir to 'dist/[projectname]' inside the capacitor.config.json.
Today how even think about it
you should do an update
How can we build ios while on windows
What editor u using?
That's VSCode
Will it all existing Cordova plugin work with capacitor ?
Yep, it's fully compatible with cordova capacitor.ionicframework.com/docs/basics/cordova
first one to see the video !! thank you
Nice work, thanks for watching :)
you beat me to it, lets see next video :)
You missed the opportunity to call the app capp haha
Anyone else getting issues following this, I get the following;
app.component.ts (27,38): Property 'coords' does not exist on type '{}'.
Running angular version 4.2.4
I got that error too, try replacing pos.coords with pos['coords'] and TS won't complain
callback is OLD! use async await! :) Much easier....
Why does it shows undefined in windows alert box
Desktop just needs an ENV variable to access geo coord data. github.com/electron/electron/blob/master/docs/api/environment-variables.md
Is This video still valid in 2020 ?
This shit is dope
what about angularFire2 push notifications with angular 5 SwPush() is there any update one that ?
That's on my list. I've done a bunch of push notification work recently and have some snippets to share.
thank you very much! looking forward to see them
fuck everything use flutter
just a simple advice to those who want to make native apps with web technologies
don't
Why?
Sir what's the difference between ionic 4 and capacitor? can they no do the something like deploying electron app?
thank you