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 !!!
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.
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'.
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.
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 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?
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
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?
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)({}); }
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.
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'
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
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
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
ruclips.net/video/WbbAPfDVqfY/видео.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
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 💪🏻💪🏻
This is honestly 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!
Another game changer. I need to take a leap of faith and look into these new tech sooner.
this, has so much potential
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🙄🙄
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.
would love to see a revisit now
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!
Please update this showcase for the latest capacitor version! A lot has changed 😎
I'm glad i found this video to begin playing with this (apparently) fabulous tool
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.
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!
WOW! Thanks for the demo.
Svelte + Capacitor is the one
Can you please do a remake of this with new updates..
I came here to make sure I made the right decision by using Expo React-Native.
Thank God.
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
im super stuck about this capacitor lib!! Thank you so much for the vid !
It's 3 years now plz use capacitor 3 and re make the new video 👍
write once, build all plalform, that's great way should apply all when software developing .
I wish real life was that easy :)
Looks great. Hope it works great!
These days it's the Socket runtime 😎
every single video you create is a piece of artwork. What is your website's url?
It's time to create a new updated video, since we have Capacitor v3 BETA
This is really exciting technology, I wonder how it's gonna play with web-assembly. BTW Awesome job explaining this!
it wont
Awesome stuff !
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?
@fireship Can you please shed some light on pros and cons with Quasar ?
Wow this seems very interesting!!
capacitor === potential
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.
npx cap serve no longer works with the new version of capacitor. Any pointers ?
Very promising!
What's the title of the intro song, it's beautiful
good job !!!
Sir what's the difference between ionic 4 and capacitor? can they no do the something like deploying electron app?
thank you
Capacitor does it include all community and premier plugins availiable on ionic framework docs ?
How can we build ios while on windows
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.
Why did the windows version lat and lng vars return undefined? Was the win pc not connected to Wi-Fi?
how can we make the backend works with our capacitor app Crud methods!
is it possible to build the app using bootstrap? without the angular part
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?
Fireships feels like I am watching documentaries
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.
But it's a nice video Jeff
'npx cap add ios ' never finished ... loop in Updating iOS native dependencies .. :/
I use local notification, it can't popup, I according to official doc, I don't know why
Will it all existing Cordova plugin work with capacitor ?
Yep, it's fully compatible with cordova capacitor.ionicframework.com/docs/basics/cordova
you should do an update
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)({});
}
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!!
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';
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.
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
What editor u using?
That's VSCode
Today how even think about it
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.
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
Is This video still valid in 2020 ?
This shit is dope
I was happy until I saw
Lat: undefined; Lng: undefined on windows 💀☠️👽
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
As far as i know, every single digital eletcronic device has Capacitor inside it..
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
callback is OLD! use async await! :) Much easier....
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
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