Using capacitor plugins without ionic (angular)

[AsaoluElijah]

Hi,
First of all thanks for the wonderful framework 🎉

I'm just getting started with using capacitor (coming from a Cordova background)
And I'd noticed capacitor plugins are consumed using typescript - which I guessed are compiled if you're using ionic angular.
Now my question is how can I use the plugins in a plain html, css & JavaScript (no framework) project.

What I've tried:
Creating a sample.ts file, adding the plugin code and referencing it in my html using
<script src="sample.ts"></script>

Any help will be appreciated as to how to go about this.

[jcesarmobile]

Capacitor doesn't require typescript (nor angular), the code in the docs can be used in javascript or typescript files without problems, but you need to use a bundler (like webpack). I can't really help you with that because I always use frameworks that have everything configured out of the box so I don't need to worry about that.

If you don't want to use a bundler/framework, you can set "bundledWebRuntime": true in capacitor.config.json. That generates a capacitor.js file you can link in your app.
That way you can use Capacitor object directly, which includes a Plugins object that contains all plugins.
So you can use the plugins like Capacitor.Plugins.Device.getInfo();.

[AsaoluElijah]

It works.
Exactly what I needed, thanks alot @jcesarmobile

[stepanrumyantsev]

UPDATE: Nevermind, the post from @jcesarmobile already helped me to get unstuck, I found out how to build capacitor.js and use it. Thank you!

ORIGINAL POST:

Hello!

Could you please explain the building plugins into a js file workflow in a bit more details? I would be extremely thankful.

The thing is: I have a no framework project that works just fine on Android since August 2020. No special plugins, just HTML, CSS and vanila JavaScript inside a WebView. But on iOS the HTML5 Geolocation refuses to work inside the WebView. I've been googling for months and tried everything that is possible without a major rewrite. The Allow geolocation prompt does not even show up and I get origin not allowed to access geolocation in the console of Xcode. Now it is pretty clear that the HTML5 geolocation won't work on iOS and I need a native Geolocation plugin.

So how do I proceed from setting "bundledWebRuntime": true in capacitor.config.json? How do I build a .js file out of it that will allow to access native Geolocation functionality from my vanila javascript code? What should I consider while building this project for iOS?

I would be beyond thankful if my project would be able to get coordinates using some sort of geolocation on iOS.

Thank you!

Best Regards,
Stepan