Dalam tutorial ini, kita akan mulai dengan SvelteKit app baru dan beralih ke pengembangan mobile native menggunakan Capacitor. Anda juga bisa menambahkan Capgo Native Navigation and Transitions agar terasa seperti aplikasi native, serta menggunakan tailwind-capacitor untuk safe area.
Capacitor memudahkan Anda mengubah aplikasi web SvelteKit menjadi aplikasi mobile native tanpa perlu modifikasi besar atau mempelajari skill baru seperti React Native.
Ikuti panduan langkah demi langkah ini untuk mengubah aplikasi SvelteKit Anda menjadi aplikasi mobile menggunakan Capacitor, lengkap dengan opsi Capgo Native Navigation, Transitions, dan panduan layout iOS.
Tentang Capacitor
CapacitorJS adalah pengubah permainan! Ia dapat diintegrasikan dengan mudah ke proyek web apa pun, membungkus aplikasi Anda dalam native webview dan membuatkan proyek Xcode serta Android Studio secara otomatis. Plugin-nya menyediakan akses ke fitur native perangkat seperti kamera melalui JavaScript bridge.
Capacitor memungkinkan Anda membuat aplikasi mobile native yang luar biasa tanpa setup rumit atau kurva pembelajaran yang tinggi. API yang ramping dan fungsionalitasnya yang efisien membuatnya mudah diintegrasikan ke proyek Anda. Anda akan takjub betapa mudahnya membuat aplikasi native yang berfungsi penuh dengan Capacitor!
Menyiapkan Aplikasi SvelteKit Anda
Untuk membuat aplikasi SvelteKit baru, jalankan perintah berikut:
npm create svelte@latest my-app
cd my-app
npm install
npm run buildSetelah menjalankan perintah build tersebut, Anda akan melihat dist folder baru di root proyek Anda.
Folder ini akan digunakan oleh Capacitor nanti, tetapi untuk saat ini, kita perlu mengaturnya dengan benar.
Menambahkan Capacitor ke Aplikasi SvelteKit Anda
Untuk membungkus aplikasi web apa pun ke dalam container mobile native, kita perlu mengikuti beberapa langkah awal. Setelah itu, prosesnya semudah menjalankan satu sync perintah.
Pertama, instal Capacitor CLI sebagai dev dependency dan atur di dalam proyek Anda. Saat setup, Anda bisa tekan “enter” untuk menerima nilai default untuk nama dan bundle ID.
Selanjutnya, install core package dan package yang relevan untuk platform iOS dan Android.
Terakhir, tambahkan platformnya, dan Capacitor akan membuat folder untuk setiap platform di root proyek Anda:
# Install the Capacitor CLI locally
npm install -D @capacitor/cli
# Initialize Capacitor in your SvelteKit project
npx cap init
# Install the required packages
npm install @capacitor/core @capacitor/ios @capacitor/android
# Add the native platforms
npx cap add ios
npx cap add androidPada tahap ini, Anda akan melihat iOS dan Android folder baru di proyek SvelteKit Anda.
Ini adalah proyek native sungguhan!
Untuk mengakses proyek Android nanti, Anda perlu menginstal Android Studio. Untuk iOS, Anda memerlukan Mac dan sebaiknya menginstal Xcode.
Selain itu, Anda harus menemukan file capacitor.config.ts di proyek Anda, yang berisi beberapa pengaturan dasar Capacitor yang digunakan saat sinkronisasi. Satu hal yang perlu diperhatikan adalah webDir, yang harus mengarah ke hasil dari perintah build Anda. Saat ini, pengaturannya salah.
Untuk memperbaikinya, buka file capacitor.config.ts file dan perbarui webDir:
import { CapacitorConfig } from '@capacitor/cli'
const config: CapacitorConfig = {
appId: 'com.example.app',
appName: 'my-app',
webDir: 'build',
}
export default configSetelah kita memperbarui pengaturan Capacitor, mari kita ubah proyek SvelteKit kita menjadi aplikasi statis dengan mengunduh package adapter statis yang sesuai:
npm i -D @sveltejs/adapter-staticSetelah package terinstal, kita perlu mengubah svelte.config.js file dari auto-adapter menjadi static:
import adapter from '@sveltejs/adapter-static'
import { vitePreprocess } from '@sveltejs/kit/vite'
/** @type {import('@sveltejs/kit').Config} */
const config = {
// Consult https://kit.svelte.dev/docs/integrations#preprocessors
// for more information about preprocessors
preprocess: vitePreprocess(),
kit: {
// adapter-auto only supports some environments, see https://kit.svelte.dev/docs/adapter-auto for a list.
// If your environment is not supported or you settled on a specific environment, switch out the adapter.
// See https://kit.svelte.dev/docs/adapters for more information about adapters.
adapter: adapter({
// default options are shown. On some platforms
// these options are set automatically — see below
pages: 'build',
assets: 'build',
fallback: null,
precompress: false,
strict: true
})
}
}
export default configDengan svelte.config.js yang sudah diperbarui, kita perlu menambahkan prerender opsi dengan membuat +layout.js halaman untuk src/routes dan cukup tambahkan export berikut ke +layout.js:
export const prerender = trueSetelah menambahkan dan memperbarui +layout.js halaman, kita perlu menambahkan platform mobile, lalu re-build proyek untuk membuat folder build folder
Anda bisa melakukannya dengan menjalankan perintah berikut:
npm run build
npx cap syncPerintah pertama npm run build akan mem-build proyek SvelteKit Anda dan menyalin static build, sementara perintah kedua npx cap sync akan menyinkronkan semua web code ke tempat yang tepat di platform native agar bisa ditampilkan di aplikasi.
Selain itu, perintah sync mungkin memperbarui platform native dan menginstal plugin, jadi saat Anda menginstal yang baru Plugin Capacitor, saatnya menjalankan npx cap sync lagi.
Tanpa disadari, Anda telah menyelesaikan seluruh prosesnya, jadi mari kita coba jalankan aplikasinya di perangkat!
Build dan Deploy Aplikasi Native
Untuk mengembangkan aplikasi iOS, Anda perlu memiliki Xcode terinstal, dan untuk aplikasi Android, Anda perlu memiliki Android Studio terinstal. Selain itu, jika Anda berencana mendistribusikan aplikasi di app store, Anda perlu mendaftar di Apple Developer Program untuk iOS dan Google Play Console untuk Android.
Jika Anda baru mengenal pengembangan mobile native, Anda bisa menggunakan Capacitor CLI untuk membuka kedua proyek native dengan mudah:
npx cap open ios
npx cap open androidSetelah proyek native siap, deploy aplikasi ke perangkat yang terhubung sangatlah mudah. Di Android Studio, Anda cukup menunggu hingga semuanya siap, lalu deploy aplikasi ke perangkat tanpa mengubah pengaturan apa pun. Berikut contohnya:
Di Xcode, Anda perlu mengatur signing account untuk deploy aplikasi ke perangkat asli, bukan sekadar simulator. Jika belum pernah melakukannya, Xcode akan memandu prosesnya (tapi sekali lagi, Anda harus terdaftar di Developer Program). Setelah itu, Anda cukup tekan play untuk menjalankan aplikasi di perangkat yang terhubung, yang bisa dipilih di bagian atas. Berikut contohnya:
Selamat! Anda telah berhasil deploy web app SvelteKit ke perangkat mobile. Ini contohnya:
Tapi tunggu, ada juga cara yang lebih cepat untuk melakukannya saat development…
Live Reload Capacitor
Sekarang, Anda mungkin sudah terbiasa dengan hot reload di semua framework modern, dan kabar baiknya adalah Anda bisa mendapatkan fitur yang sama di perangkat mobile dengan usaha minimal!
Aktifkan akses ke aplikasi lokal Anda dengan live reload di jaringan Anda dengan membuat aplikasi Capacitor memuat konten dari URL tertentu.
Langkah pertama adalah mencari tahu alamat IP lokal Anda. Jika menggunakan Mac, Anda bisa mengetahuinya dengan menjalankan perintah berikut di terminal:
ipconfig getifaddr en0Di Windows, jalankan:
ipconfigLalu cari alamat IPv4.
Kita bisa menginstruksikan Capacitor untuk memuat aplikasi langsung dari server dengan menambahkan entri lain ke capacitor.config.ts file:
import { CapacitorConfig } from '@capacitor/cli';
const config: CapacitorConfig = {
appId: 'com.example.app',
appName: 'my-app',
webDir: 'dist',
bundledWebRuntime: false,
server: {
url: 'http://192.168.x.xx:3000',
cleartext: true
}
};
export default config;Pastikan untuk menggunakan IP dan port yang benar, seperti yang terlihat pada contoh di atas.
Sekarang, kita bisa menerapkan perubahan ini dengan menyalinnya ke proyek native kita:
npx cap copyPanduan copy perintahnya mirip dengan sync, tapi hanya akan menyalin perubahan yang dibuat di folder web dan konfigurasi, tanpa memperbarui proyek native.
Sekarang Anda bisa deploy aplikasi sekali lagi melalui Android Studio atau Xcode. Setelah itu, jika Anda mengubah sesuatu di aplikasi Svelte Anda, aplikasi akan otomatis reload dan menampilkan perubahannya!
Perlu diingat bahwa jika Anda menginstal plugin baru seperti kamera, Anda tetap perlu melakukan rebuild pada proyek native. Ini karena file native berubah, dan tidak bisa dilakukan secara on the fly.
Perhatikan bahwa Anda harus menggunakan IP dan port yang benar dalam konfigurasi Anda. Blok code di atas menunjukkan port default SvelteKit untuk keperluan demonstrasi.
Menggunakan Plugin Capacitor
Mari kita lihat cara menggunakan plugin Capacitor secara langsung, yang sudah kita sebutkan beberapa kali sebelumnya. Untuk melakukannya, kita bisa menginstal plugin sederhana dengan menjalankan:
npm i @capacitor/shareTidak ada yang istimewa dari plugin Share, tapi ini akan memunculkan dialog share bawaan! Untuk ini, kita hanya perlu mengimpor package dan memanggil share() fungsi dari aplikasi kita, jadi mari kita ubah src/routes/index.svelte menjadi:
<script>
import { Share } from '@capacitor/share';
async function share() {
await Share.share({
title: 'Open Youtube',
text: 'Check new video on youtube',
url: 'https://www.youtube.com',
dialogTitle: 'Share with friends'
});
}
</script>
<h1>Welcome to SvelteKit and Capacitor!</h1>
<button on:click={share}>Share now!</button>Seperti yang disebutkan sebelumnya, saat menginstal plugin baru, kita perlu melakukan operasi sync lalu redeploy aplikasi ke perangkat. Untuk melakukannya, jalankan perintah berikut:
npx cap syncSetelah menekan tombol, Anda bisa melihat dialog share native yang keren langsung beraksi!
Selanjutnya, Anda bisa membuat aplikasi terasa lebih native di iOS dan Android dengan navigasi dan transisi Capgo, serta memperbaiki masalah layout iOS yang umum menyebabkan horizontal overflow atau safe area terpotong.
UI yang terasa native dengan Native Navigation dan Transitions dari Capgo
Saya sudah bertahun-tahun bekerja dengan Ionic untuk membangun aplikasi cross-platform, tapi mengintegrasikannya dengan SvelteKit terasa kurang optimal dan jarang sepadan jika Anda sudah menggunakan Tailwind CSS.
Untuk mendapatkan feel mobile native pada aplikasi SvelteKit + Capacitor, gunakan plugin Capgo alih-alih UI kit berbasis web seperti Konsta UI:
- @capgo/capacitor-native-navigation — navbar native, Liquid Glass tab bar di iOS, dan gaya tab bar blur di Android. SvelteKit router Anda tetap mengelola route state; plugin yang mengontrol native chrome.
- @capgo/capacitor-transitions — transisi halaman ala Ionic dan fitur iOS edge swipe-back di layer WebView, tanpa harus memakai Ionic UI.
Install keduanya:
bun add @capgo/capacitor-native-navigation @capgo/capacitor-transitions
bunx cap syncKonfigurasi navigasi native dengan mode inset CSS agar konten web menyesuaikan dengan bar native:
import { NativeNavigation } from '@capgo/capacitor-native-navigation';
await NativeNavigation.configure({
contentInsetMode: 'css',
animationDuration: 360,
glass: {
effect: 'liquidGlass',
},
});Render Liquid Glass tab bar (iOS menggunakan rendering dari sistem; Android menggunakan backdrop WebView yang blur):
await NativeNavigation.setTabbar({
selectedId: 'home',
labelVisibilityMode: 'labeled',
icons: true,
colors: { dynamic: true },
tabs: [
{ id: 'home', title: 'Home', icon: { svg: '...' } },
{ id: 'settings', title: 'Settings', icon: { svg: '...' } },
],
});
await NativeNavigation.addListener('tabSelect', ({ id }) => {
goto(`/${id}`);
});Tambahkan transisi halaman native di app shell Anda:
<script>
import { goto } from '$app/navigation';
import { routerOutlet, page, setDirection } from '@capgo/capacitor-transitions/svelte';
import '@capgo/capacitor-transitions';
function openSettings() {
setDirection('forward');
goto('/settings');
}
</script>
<cap-router-outlet use:routerOutlet>
<cap-page use:page>
<cap-content slot="content">
<slot />
</cap-content>
</cap-page>
</cap-router-outlet>Bungkus halaman yang di-route dengan cap-router-outlet, cap-page, dan cap-content, dan panggil setDirection('forward') atau setDirection('back') sebelum navigasi. Jangan duplikasi header atau footer web kalau navigasi native sudah menangani area tersebut.
Lihat panduan lengkapnya: Menggunakan @capgo/capacitor-native-navigation dan Menggunakan @capgo/capacitor-transitions.
Safe areas dengan Tailwind
Untuk safe area perangkat di Tailwind CSS, gunakan @capgo/tailwind-capacitor (diterbitkan sebagai tailwind-capacitor pada npm). Ini menyediakan safe-areas utilitas dan plugin Tailwind lain yang kompatibel dengan Capacitor:
bun add -D tailwind-capacitorDi src/app.css:
@import 'tailwindcss';
@plugin "@capgo/tailwind-capacitor/platform";
@plugin "@capgo/tailwind-capacitor/safe-areas";Gunakan utilitas seperti pt-safe, pb-safe, dan px-safe daripada menyisipkan env(safe-area-inset-*) secara manual. Proyek ini aktif dikembangkan — jika ada yang kurang untuk setup SvelteKit Anda, buka PR di GitHub.
Memperbaiki Masalah Layout iOS (Viewport, Safe Area, dan Horizontal Overflow)
Jika konten terlihat terpotong, bergeser, atau bisa di-scroll secara horizontal di iOS, menambahkan lebih banyak overflow-x: hidden atau hanya mengutak-atik tag viewport saja biasanya tidak memperbaikinya. Lakukan pemeriksaan ini secara berurutan.
Pastikan meta tag viewport diterapkan dengan benar
Di src/app.html, atur viewport meta tag di <head>:
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />Tangani iOS safe area hanya dari satu root wrapper
Buat satu app shell dan terapkan safe area padding di sana — bukan di beberapa komponen bersarang:
html,
body,
body {
width: 100%;
min-height: 100%;
margin: 0;
padding: 0;
overflow-x: hidden;
}
* {
box-sizing: border-box;
}
.app-shell {
min-height: 100dvh;
width: 100%;
padding-top: env(safe-area-inset-top);
padding-right: env(safe-area-inset-right);
padding-bottom: env(safe-area-inset-bottom);
padding-left: env(safe-area-inset-left);
}Bungkus seluruh konten halaman di dalam .app-shell. Padding safe-area yang dobel di header, modal, dan wrapper layout sering membuat UI terlihat terpotong atau terlalu besar.
Dengan @capgo/tailwind-capacitor, Anda bisa menggunakan padding yang sama dengan utility seperti pt-safe pb-safe px-safe pada satu shell tersebut.
Atur Capacitor iOS contentInset ke never dulu
Di capacitor.config.ts, lebih baik nonaktifkan native inset dan biarkan CSS (atau Native Navigation’s contentInsetMode: 'css') mengatur safe area:
const config: CapacitorConfig = {
appId: 'com.example.myapp',
appName: 'my-app',
webDir: 'build',
ios: {
contentInset: 'never',
},
};Mencampur automatic content inset dari Capacitor dengan CSS env(safe-area-inset-*) padding sering kali menjadi penyebab spasi ganda.
Temukan elemen yang benar-benar overflow
Penyebab umumnya adalah elemen yang menggunakan 100vw, Tailwind w-screen, lebar pixel tetap, atau ukuran yang besar min-width.
Di Safari Web Inspector, jalankan:
[...document.querySelectorAll('*')]
.filter(el => el.scrollWidth > document.documentElement.clientWidth)
.map(el => ({
el,
tag: el.tagName,
class: el.className,
scrollWidth: el.scrollWidth,
clientWidth: document.documentElement.clientWidth,
}));Dengan Tailwind, ganti w-screen dengan w-full jika memungkinkan. Banyak masalah overflow horizontal berasal dari 100vw / w-screen, duplikasi safe-area padding, atau container berukuran tetap — bukan dari viewport meta tag itu sendiri.
Kesimpulan
Capacitor adalah pilihan tepat untuk membangun aplikasi native dari proyek web yang sudah ada, memberikan cara simpel untuk berbagi code dan menjaga UI tetap konsisten.
Dan dengan hadirnya Capgo, makin mudah menambahkan live updates ke aplikasi Anda, sehingga pengguna Anda selalu bisa mengakses fitur terbaru dan perbaikan bug.
Jika ingin belajar cara menambahkan Capgo ke aplikasi SvelteKit Anda, simak artikel berikut:
Pelajari cara Capgo membantu Anda membangun aplikasi lebih baik dan lebih cepat, daftar akun gratis sekarang hari ini.
Lanjutkan dari Building Mobile Apps with SvelteKit and Capacitor
Jika Anda menggunakan Membangun Mobile Apps dengan SvelteKit dan Capacitor untuk merencanakan otomatisasi CI/CD, hubungkan dengan CI/CD Capgo untuk workflow produk di Capgo CI/CD, Capgo Native Build untuk workflow produk di Capgo Native Builds, Integrasi Capgo untuk alur kerja produk di Integrasi Capgo, Integrasi CI/CD untuk detail implementasi di Integrasi CI/CD, dan Integrasi GitHub Actions untuk detail implementasi di Integrasi GitHub Actions.
