Dalam tutorial ini, kita akan memulai dengan sebuah SvelteKit app and transition to native mobile development using Capacitor. You can also add Capgo Native Navigation and Transitions for a native mobile feel, and use tailwind-capacitor for safe areas.
Capacitor allows you to easily convert your SvelteKit web application into a native mobile app without the need for significant modifications or learning a new skill like React Native.
Follow this step-by-step guide to transform your SvelteKit app into a mobile app using Capacitor, with optional Capgo Native Navigation, Transitions, and iOS layout guidance.
Tentang Capacitor
CapacitorJS adalah perubahan besar! Ini dapat diintegrasi dengan mudah ke dalam proyek web apa pun, mengelilingi aplikasi Anda dengan tampilan web native dan menghasilkan proyek Xcode dan Android Studio native untuk Anda. Plugin-pluginnya memberikan akses ke fitur perangkat native seperti kamera melalui jembatan JavaScript.
Capacitor memungkinkan Anda membuat aplikasi mobile native yang fantastis tanpa setup yang rumit atau kurva belajar yang curam. API dan fungsi Capacitor yang disederhanakan membuatnya mudah untuk diintegrasikan ke dalam proyek Anda. Anda akan terkejut dengan betapa sederhananya mencapai aplikasi mobile native yang sepenuhnya berfungsi dengan Capacitor!
Mengatur Aplikasi SvelteKit
Untuk membuat aplikasi SvelteKit baru, jalankan perintah berikut:
npm create svelte@latest my-app
cd my-app
npm install
npm run buildSetelah menjalankan build command, Anda akan melihat sebuah dist Menambahkan __CAPGO_KEEP_0__ ke Aplikasi SvelteKit
Folder ini akan digunakan oleh Capacitor nanti, tapi sekarang kita harus mengaturnya dengan benar.
Menambahkan Capacitor ke Aplikasi SvelteKit
To package any web app into a native mobile container, we need to follow a few initial steps. Afterward, it’s as simple as running a single sync command.
Terlebih dahulu, instal Capacitor CLI sebagai dependensi pengembangan dan atur konfigurasi di dalam proyek Anda. Selama proses pengaturan, Anda dapat menekan tombol “Enter” untuk menerima nilai default untuk nama dan ID aplikasi.
Selanjutnya, instal paket inti dan paket relevan untuk platform iOS dan Android.
Terakhir, tambahkan platform, 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 titik ini, Anda harus melihat folder baru ios dan context folder di proyek SvelteKit Anda.
Proyek-proyek ini benar-benar asli dan native!
Untuk mengakses proyek Android nanti, Anda perlu menginstal Studio Android. Untuk iOS, Anda membutuhkan Mac dan harus menginstal Xcode.
Selain itu, Anda harus menemukan sebuah Konfigurasi capacitor. file di proyek Anda, yang berisi beberapa pengaturan dasar Capacitor yang digunakan selama sinkronisasi. Yang perlu Anda perhatikan adalah webDir, yang harus mengarah ke hasil perintah build Anda. Saat ini, itu salah.
Untuk memperbaiki ini, buka file dan update Konfigurasi capacitor. file dan update webDir:
import { CapacitorConfig } from '@capacitor/cli'
const config: CapacitorConfig = {
appId: 'com.example.app',
appName: 'my-app',
webDir: 'build',
}
export default configSekarang bahwa kita telah memperbarui pengaturan Capacitor kita, mari kita ubah proyek Sveltekit kita menjadi aplikasi statis dengan mengunduh paket adapter statis yang tepat:
npm i -D @sveltejs/adapter-staticSetelah paket terinstal, kami perlu mengubah svelte.config.js file dari auto-adapter ke statis:
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 yang svelte.config.js diupdate, kami perlu menambahkan prerender option dengan membuat sebuah +layout.js halaman ke src/rute dan hanya tambahkan ekspor berikut ke +layout.js:
export const prerender = trueSetelah menambahkan dan memperbarui +layout.js Untuk halaman ini, kita akan menambahkan platform mobile, kemudian membangun kembali proyek untuk membuat} context folder
Kamu bisa melakukannya dengan menjalankan perintah-perintah berikut:
npm run build
npx cap syncPerintah pertama npm run build akan membangun proyek SvelteKit dan menyalin build statis, sedangkan perintah kedua npx cap sync akan sinkronkan semua web code ke tempat yang tepat di platform native sehingga dapat ditampilkan di aplikasi.
Selain itu, perintah sinkronisasi mungkin memperbarui platform native dan menginstal plugin, sehingga ketika kamu menginstal plugin baru Capacitor plugin, saatnya menjalankan npx cap sync lagi.
Tidak menyadari, Anda telah menyelesaikan proses, jadi mari kita lihat aplikasi di perangkat!
Membangun dan Mengirimkan Aplikasi Nativ
Untuk mengembangkan aplikasi iOS, Anda memerlukan Xcode terpasang, dan untuk aplikasi Android, Anda memerlukan Studio Android terpasang. Selain itu, jika Anda berencana untuk mendistribusikan aplikasi di toko aplikasi, Anda perlu mendaftar ke Program Pengembang Apple untuk iOS dan Google Play Console untuk Android.
Jika Anda baru dalam pengembangan mobile native, Anda dapat menggunakan Capacitor CLI untuk dengan mudah membuka proyek-proyek native berikut:
npx cap open ios
npx cap open androidSetelah Anda telah mengatur proyek-proyek native, mengirimkan aplikasi ke perangkat yang terhubung adalah mudah. Di Android Studio, Anda hanya perlu menunggu sampai segalanya siap, dan Anda dapat mengirimkan aplikasi ke perangkat yang terhubung tanpa mengubah pengaturan apa pun. Contoh berikut ini:
In Xcode, Anda perlu mengatur akun tanda tangan Anda untuk mengirimkan aplikasi ke perangkat nyata bukan hanya simulator. Jika Anda belum pernah melakukannya sebelumnya, Xcode akan mengantarkan Anda melalui proses (tetapi lagi, Anda perlu terdaftar dalam Program Pengembang). Setelah itu, Anda hanya perlu menekan tombol play untuk menjalankan aplikasi pada perangkat yang terhubung, yang dapat Anda pilih di bagian atas. Berikut contoh:
Hore! Anda telah berhasil mengirimkan aplikasi web SvelteKit Anda ke perangkat mobile. Berikut contoh:
Tapi tunggu, ada cara yang lebih cepat untuk melakukannya selama pengembangan…
Capacitor Reload Hidup
Sekarang Anda mungkin sudah terbiasa dengan memiliki reload panas dengan semua kerangka kerja modern, dan kabar baiknya adalah Anda dapat memiliki fungsi yang sama pada perangkat mobile dengan sedikit usaha!
Aktifkan akses ke aplikasi Anda yang dihosting secara lokal dengan reload hidup pada jaringan Anda oleh memiliki aplikasi Capacitor memuat konten dari URL tertentu.
Langkah pertama adalah menentukan alamat IP lokal Anda. Jika Anda menggunakan Mac, Anda dapat menemukannya dengan menjalankan perintah berikut di terminal:
ipconfig getifaddr en0Di Windows, jalankan:
ipconfigLalu cari alamat IPv4.
Kita dapat menginstruksikan Capacitor untuk memuat aplikasi secara langsung dari server dengan menambahkan entri lain ke file kami: 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;alamat IP dan port yang benar seperti yang ditunjukkan di contoh di atas.seperti yang ditunjukkan di atas.
Sekarang, kita dapat menerapkan perubahan-perubahan ini dengan menyalinnya ke proyek native kita.
npx cap copyThe copy __CAPGO_KEEP_0__ adalah singkatan dari Capacitor, bukan Capgo. sync, but it will only salin perubahan yang dibuat ke folder web dan konfigurasi, tanpa mengupdate proyek native.
Anda dapat mengdeploy aplikasi satu kali lagi melalui Android Studio atau Xcode. Setelah itu, jika Anda mengubah sesuatu di aplikasi Svelte Anda, aplikasi akan secara otomatis reload dan menampilkan perubahan!
Pertahankanlah perlu diingat bahwa jika Anda menginstall plugin baru seperti kamera, masih memerlukan rebuild proyek native. Hal ini karena file native telah berubah, dan tidak dapat dilakukan secara langsung.
Perlu diingat bahwa Anda harus menggunakan IP dan port yang benar dalam konfigurasi. Blok code di atas menampilkan port default SvelteKit untuk keperluan demonstrasi.
Menggunakan Capacitor Plugins
Tinjauan singkat tentang bagaimana menggunakan plugin Capacitor dalam aksi, yang telah disebutkan beberapa kali sebelumnya. Untuk melakukan ini, kita dapat menginstall plugin sederhana dengan menjalankan:
npm i @capacitor/shareTidak ada yang istimewa tentang hal ini Plugin berbagiTapi itu membuka dialog berbagi native! Untuk hal ini, kita hanya perlu mengimport paket dan memanggil fungsi dari aplikasi kita, jadi mari kita ubah share() fungsi dari aplikasi kami, jadi mari kita ubah src/rute/index.svelte ke ke ini:
<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>Selanjutnya, Anda dapat membuat aplikasi terasa lebih native pada iOS dan Android dengan navigasi dan transisi __CAPGO_KEEP_0__ dan memperbaiki masalah layout iOS yang umum yang menyebabkan overflow horizontal atau area aman yang dipotong.
npx cap syncSetelah menekan tombol, Anda dapat menyaksikan dialog berbagi asli yang indah beraksi!
Next, you can make the app feel more native on iOS and Android with Capgo navigation and transitions, and fix common iOS layout issues that cause horizontal overflow or cropped safe areas.
Antarmuka yang terasa asli dengan Capgo Navigasi dan Transisi Navigasi Asli
Saya telah bekerja selama bertahun-tahun dengan Ionic untuk membuat aplikasi lintas platform, tetapi mengintegrasikannya dengan SvelteKit adalah cara yang tidak elegan dan jarang berguna ketika Anda sudah memiliki Tailwind CSS.
Untuk menciptakan perasaan mobile asli di dalam aplikasi SvelteKit + Capacitor, gunakan plugin-plugin Capgo daripada kit UI web saja seperti Konsta UI.
- @capgo/capacitor-navigasi native — navbar asli, Liquid Glass tab bar di iOS, dan gaya tab bar yang diboroskan di Android. Router SvelteKit Anda menjaga keadaan jalur; plugin menguasai chrome asli.
- @capgo/capacitor-transisi — transisi halaman Ionic-style dan swipe-back di lapisan WebView iOS tanpa menerima UI Ionic.
Instal keduanya:
bun add @capgo/capacitor-native-navigation @capgo/capacitor-transitions
bunx cap syncKonfigurasi navigasi asli dengan mode CSS inset agar konten web menghormati bar-bar asli:
import { NativeNavigation } from '@capgo/capacitor-native-navigation';
await NativeNavigation.configure({
contentInsetMode: 'css',
animationDuration: 360,
glass: {
effect: 'liquidGlass',
},
});Tampilkan tab bar Liquid Glass (iOS menggunakan rendering yang dimiliki sistem; Android menggunakan latar belakang WebView yang diboroskan):
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 asli di shell aplikasi:
<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>Wrap halaman yang diarahkan dalam cap-router-outlet, cap-pagedan cap-contentdan panggil setDirection('forward') atau setDirection('back') sebelum berpindah. Jangan duplikat header atau footer web ketika navigasi native menguasai permukaan tersebut.
Lihat panduan lengkap: Menggunakan @capgo/capacitor-navigasi-native dan Menggunakan @capgo/capacitor-transisi.
Area yang aman dengan Tailwind
Untuk area yang aman perangkat di Tailwind CSS, gunakan @capgo/tailwind-capacitor (diterbitkan sebagai) tailwind-capacitor di npm. Ini menyediakan safe-areas alat-alat dan plugin lainnya Capacitor-ramah Tailwind:
bun add -D tailwind-capacitorIn src/app.css:
@import 'tailwindcss';
@plugin "@capgo/tailwind-capacitor/platform";
@plugin "@capgo/tailwind-capacitor/safe-areas";Pakai alat-alat seperti pt-safe, pb-safe, dan px-safe menggunakan alih-alih menyebarkan env(safe-area-inset-*) dengan tangan. Projek ini aktif dikembangkan — jika ada sesuatu yang hilang untuk pengaturan SvelteKit Anda, Buka PR di GitHub.
Mengatasi Masalah Tata Letak iOS (Viewport, Area Aman, dan Berlebihan Horizontal)
Jika konten terlihat dipotong, bergeser, atau dapat di-scroll ke kiri pada iOS, menambahkan lebih banyak overflow-x: hidden Atur viewport tag sendiri biasanya tidak cukup untuk memperbaiki masalah tersebut. Jalankan periksa-periksa ini dalam urutan yang tepat.
Fixing iOS Layout Issues (Viewport, Safe Area, and Horizontal Overflow)
In src/app.htmlatur tag meta viewport di <head>:
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />Tangani zona aman iOS dari wrapper root saja
Buat shell aplikasi tunggal dan aplikasikan padding zona aman di sana — bukan di komponen nested beberapa kali:
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);
}Tutup semua konten halaman di dalam .app-shellPenggunaan padding area yang sama di header, modal, dan wrapper layout sering membuat tampilan UI terlihat terpotong atau terlalu besar.
With @capgo/tailwind-capacitorAnda dapat mengekspresikan padding yang sama dengan utilitas seperti pt-safe pb-safe px-safe di dalam satu shell tersebut.
Terapkan Capacitor iOS contentInset ke never first
Dalam capacitor.config.ts, lebih baik menggunakan native inset disabled dan biarkan CSS (atau Native Navigation's) contentInsetMode: 'css') mengendalikan area yang aman:
const config: CapacitorConfig = {
appId: 'com.example.myapp',
appName: 'my-app',
webDir: 'build',
ios: {
contentInset: 'never',
},
};Menggabungkan Capacitor’s automatic content inset dengan CSS env(safe-area-inset-*) padding adalah penyebab umum dari jarak ganda.
Temukan elemen yang benar-benar melebihi batas
Biasanya, penyebabnya adalah elemen yang menggunakan 100vw, Tailwind w-screen, lebar piksel tetap, atau besar min-width.
Dalam 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, gantikan w-screen dengan w-full ketika memungkinkan. Banyak masalah overflow horizontal berasal dari 100vw / w-screenpadding area aman yang diulang, atau kontainer dengan lebar tetap — bukan dari tag meta viewport itu sendiri.
Kesimpulan
Capacitor adalah pilihan yang sangat baik untuk membuat aplikasi native berdasarkan proyek web yang sudah ada, menawarkan cara sederhana untuk berbagi code dan menjaga UI yang konsisten.
Dan dengan penambahan Capgo, aplikasi Anda bahkan lebih mudah untuk diperbarui secara langsung, sehingga pengguna Anda selalu memiliki akses ke fitur dan perbaikan bug terbaru.
Jika Anda ingin belajar cara menambahkan Capgo ke aplikasi SvelteKit Anda, lihatlah artikel selanjutnya:
Learn how Capgo can help you build better apps faster, Daftar diri Anda untuk akun gratis hari ini.
Teruskan dari Membangun Aplikasi Mobile dengan SvelteKit dan Capacitor
Mengapa Anda menggunakan Building Mobile Apps with SvelteKit and Capacitor untuk merencanakan otomatisasi CI/CD, hubungkannya dengan Capgo CI/CD untuk alur kerja produk dalam Capgo CI/CD, Capgo Native Builds untuk alur kerja produk dalam Capgo Pembangunan Nativ Capgo Integrations untuk alur kerja produk dalam Capgo Integrasi, Pengintegrasian Integrasi untuk detail implementasi di Pengintegrasian Integrasi, dan GitHub Actions Integration untuk detail implementasi di GitHub Integrasi Aksi.
