Install Capacitor.
Add Capacitor to your project and create a config for your app
npm install @capacitor/core @capacitor/cli
npx cap init [name] [id] --web-dir=public
Build native mobile apps with web technology and Svelte
Add Capacitor to your project and create a config for your app
npm install @capacitor/core @capacitor/cli
npx cap init [name] [id] --web-dir=public
The compiled web assets will be copied into each Capacitor native platform during the next step.
npm run build
Capacitor's native projects exist in their own top-level folders and should be considered part of your app (check them into source control).
npx cap add android
npx cap add ios
With Capacitor installed, adding calls to native device features is as straight forward as calling other JavaScript methods
<script>
import {Plugins} from '@capacitor/core';
let loc = null;
async function getCurrentPosition(){
const { Geolocation } = Plugins;
const res = await Geolocation.getCurrentPosition()
loc = res
}
</script>
<div>
<h1>Geolocation</h1>
<p>Your location is:</p>
<p>Latitude: {loc?.coords.latitude}</p>
<p>Longitude: {loc?.coords.longitude}</p>
<button on:click={getCurrentPosition}>
Get Current Location
</button>
</div>
This is only the beginning. Learn more about the Capacitor development workflow or using more native APIs .