Building Mobile Apps with SvelteKit and Capacitor

Pada tutorial ini, kita akan memulai dengan aplikasi SvelteKit baru dan beralih ke pengembangan mobile native menggunakan Capacitor. Anda juga dapat menambahkan Navigasi dan Transisi Native untuk merasakan pengalaman mobile native, dan menggunakan tailwindcss untuk area aman. Capacitor memungkinkan Anda untuk dengan mudah mengubah aplikasi web SvelteKit Anda menjadi aplikasi mobile native tanpa perlu melakukan modifikasi signifikan atau belajar teknologi baru seperti React Native. 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.

About Capacitor

Mengatur Aplikasi SvelteKit

Capacitor enables you to create a fantastic native mobile app without any complicated setup or steep learning curve. Its slim API and streamlined functionality make it easy to integrate into your project. You’ll be amazed at how simple it is to achieve a fully functional native app with Capacitor!

SvelteKit

Capacitor

npm create svelte@latest my-app
cd my-app
npm install
npm run build

After menjalankan perintah tersebut, Anda harus melihat sebuah folder baru di root proyek Anda. build folder tersebut akan digunakan oleh Capgo nanti, tapi untuk saat ini, kita perlu mengaturnya dengan benar. dist Menambahkan Capgo ke Aplikasi SvelteKit Anda

This folder will be used by Capacitor later, but for now, we need to set it up correctly.

Adding Capacitor to Your SvelteKit App

Capacitor sync sebagai dependensi pengembangan dan atur dalam proyek Anda. Selama pengaturan, Anda bisa menekan “enter” untuk menerima nilai default untuk nama dan ID aplikasi.

Selanjutnya, instal paket inti dan paket relevan untuk platform iOS dan Android. Capacitor CLI __CAPGO_KEEP_0__

__CAPGO_KEEP_1__

Capacitor

# 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 android

At ini, Anda harus melihat folder baru iOS dan context: Halaman/area: Situs web pemasaran Capgo. Peran: Label UI pendek atau item navigasi. Dilihat di: halaman trust.astro. Kunci pesan `dan` (Dan). Android

folder

proyek SvelteKit Anda. ini adalah proyek asli native!Untuk mengakses proyek Android nanti, Anda perlu menginstal Studio Android.

. Untuk iOS, Anda perlu Mac dan harus menginstal capacitor.config.ts file di proyek Anda, yang berisi beberapa pengaturan dasar Capacitor yang digunakan selama sinkronisasi. Yang perlu Anda perhatikan adalah webDiryang harus mengarah ke hasil perintah build Anda. Saat ini, itu salah.

Untuk memperbaiki ini, buka file capacitor.config.ts dan update pengaturan webDir:

import { CapacitorConfig } from '@capacitor/cli'

const config: CapacitorConfig = {
  appId: 'com.example.app',
  appName: 'my-app',
  webDir: 'build',
}

export default config

Setelah kami telah memperbarui pengaturan Capacitor, mari kita ubah proyek Sveltekit kami menjadi aplikasi statis dengan mengunduh paket adapter statis yang tepat:

npm i -D @sveltejs/adapter-static

Setelah paket diinstal, 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 config

Dengan svelte.config.js diperbarui, kita akan perlu menambahkan sebuah prerender opsi dengan membuat sebuah +layout.js halaman ke src/routes dan hanya tambahkan ekspor berikut ke +layout.js:

export const prerender = true

Setelah menambahkan dan memperbarui +layout.js halaman, kita akan perlu menambahkan platform mobile kita, merekonstruksi proyek kita untuk menciptakan Membangun folder

Kamu bisa melakukannya dengan menjalankan perintah-perintah berikut:

npm run build
npx cap sync

Perintah pertama npm run build Akan membangun proyek SvelteKit kamu dan menyalin pembangunan statis, sementara perintah kedua npx cap sync Akan sinkronisasi semua web code ke tempat-tempat yang tepat dari platform-platform native sehingga mereka dapat ditampilkan dalam aplikasi.

Selain itu, perintah sinkronisasi mungkin memperbarui platform-platform native dan menginstal plugin, sehingga ketika kamu menginstal plugin baru Capacitormaka saatnya untuk menjalankan npx cap sync lagi.

Tidak menyadari, kamu telah menyelesaikan proses ini, jadi mari kita lihat aplikasi di perangkat!

Membangun dan Mengirimkan Aplikasi Nativ

To mengembangkan aplikasi iOS, Anda membutuhkan Xcode terinstal, dan untuk aplikasi Android, Anda membutuhkan Android Studio terinstal. Selain itu, jika Anda berencana untuk mendistribusikan aplikasi Anda di toko aplikasi, Anda perlu mendaftar ke Apple Developer Program 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 native berikut:

npx cap open ios
npx cap open android

Sekarang Anda telah mengatur proyek native Anda, mengirimkan aplikasi ke perangkat terhubung sangat mudah. Di Android Studio, Anda hanya perlu menunggu sampai segalanya siap, dan Anda dapat mengirimkan aplikasi ke perangkat terhubung tanpa mengubah pengaturan apa pun. Contoh:

Di 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 mengarahkan Anda melalui prosesnya (tetapi lagi, Anda perlu mendaftar ke Program Pengembang). Setelah itu, Anda hanya perlu menekan tombol play untuk menjalankan aplikasi di perangkat terhubung, yang dapat Anda pilih di bagian atas. Contoh:

Selamat! Anda telah berhasil mengirimkan aplikasi web SvelteKit Anda ke perangkat mobile. Contoh:

Namun, tunggu dulu, ada cara yang lebih cepat untuk melakukannya selama pengembangan…

Capacitor Reload Hidup

Dengan kemajuan ini, Anda mungkin sudah terbiasa dengan memiliki reload panas dengan semua kerangka kerja modern, dan kabar baiknya adalah bahwa Anda dapat memiliki fungsi yang sama pada perangkat seluler dengan sedikit usaha!

Aktifkan akses ke aplikasi Anda yang dihosting secara lokal dengan reload hidup pada jaringan Anda dengan memiliki aplikasi Capacitor memuat konten dari URL tertentu.

Langkah pertama adalah menentukan alamat IP lokal Anda. Jika Anda menggunakan Mac, Anda dapat menemukan informasi ini dengan menjalankan perintah berikut di terminal:

ipconfig getifaddr en0

Di Windows, jalankan:

ipconfig

Lalu cari alamat IPv4.

Kita dapat menginstruksikan Capacitor untuk memuat aplikasi secara langsung dari server dengan menambahkan entri lain ke konfigurasi 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;

Pastikan Anda menggunakan alamat IP dan port yang benarseperti yang ditunjukkan di contoh di atas.

Sekarang, kita dapat menerapkan perubahan-perubahan ini dengan menyalinnya ke proyek native kita:

npx cap copy

Perintah ini mirip dengan copy tetapi hanya akan menyalin perubahan yang dibuat pada folder web dan konfigurasi, tanpa mengupdate proyek native. syncAnda dapat mengdeploy aplikasi Anda satu kali lagi melalui Android Studio atau Xcode. Setelah itu, jika Anda mengubah sesuatu di aplikasi Svelte Anda, aplikasi akan secara otomatis reload protectedTokens

pagePath targetLanguage dan menampilkan perubahan!

Pertimbangkan hal ini Jika Anda menginstal plugin baru seperti kamera, masih memerlukan pembangunan ulang proyek native Anda. 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 SvelteKit default untuk keperluan demonstrasi.

Menggunakan Plugin Capacitor

Mari kita lihat bagaimana menggunakan plugin Capacitor dalam aksi, yang telah disebutkan beberapa kali sebelumnya. Untuk melakukan ini, kita dapat menginstal plugin sederhana dengan menjalankan:

npm i @capacitor/share

Tidak ada yang istimewa tentang plugin Plugin Bagikan, tetapi mengeluarkan dialog bagikan native! Untuk ini, kita hanya perlu mengimport paket dan memanggil share() fungsi dari aplikasi kita, jadi mari kita ubah src/routes/index.svelte menjadi 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>

As sebelumnya, ketika menginstal plugin baru, kita perlu melakukan operasi sinkronisasi dan kemudian redeploy aplikasi ke perangkat kita. Untuk melakukan ini, jalankan perintah berikut:

npx cap sync

Saat menekan tombol, Anda dapat menyaksikan dialog berbagi native yang indah dalam aksi!

Selanjutnya, Anda dapat membuat aplikasi terasa lebih native di iOS dan Android dengan Capgo navigasi dan transisi, serta memperbaiki masalah layout iOS yang umum menyebabkan overflow horizontal atau area aman yang dipotong.

Tampilan UI yang terasa native dengan Capgo Navigasi dan Transisi Native

Saya telah bekerja selama bertahun-tahun dengan Ionic untuk membangun aplikasi lintas platform, tetapi mengintegrasikannya dengan SvelteKit adalah hacky dan jarang berharga ketika Anda sudah memiliki Tailwind CSS.

Untuk merasakan mobile native di aplikasi SvelteKit + Capacitor, gunakan plugin Capgo daripada kit UI web seperti Konsta UI:

• @capgo/capacitor-native-navigation --- navbar native, tab bar Liquid Glass di iOS, dan gaya tab bar yang diblur di Android. Router SvelteKit Anda menjaga keadaan jalur; plugin ini menguasai chrome native.
• @capgo/capacitor-transitions — Transisi halaman Ionic gaya dan iOS swipe-back di lapisan WebView, tanpa menerima UI Ionic.

Install kedua:

bun add @capgo/capacitor-native-navigation @capgo/capacitor-transitions
bunx cap sync

Konfigurasi navigasi native dengan mode CSS inset agar konten web menghormati bar-bar native:

import { NativeNavigation } from '@capgo/capacitor-native-navigation';

await NativeNavigation.configure({
  contentInsetMode: 'css',
  animationDuration: 360,
  glass: {
    effect: 'liquidGlass',
  },
});

Tampilkan tab bar kaca Liquid (iOS menggunakan rendering milik 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 native 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') context: Fragment teks HTML dari string UI Capgo yang lebih panjang (kunci induk `alternatives_cta_questions`). Halaman/area: Halaman perbandingan pembaruan hidup Capacitor. Peran: Paragraf pemasaran atau hukum yang panjang. Dilihat di: halaman alternatives.astro. Simpan produk/brand dan istilah developer Capgo secara tepat. Kunci pesan `alternatives_cta_questions` (Pertanyaan Tindakan Alternatif). | Fragment teks HTML dari string UI Capgo yang lebih panjang (kunci induk `appflow_cta_questions`). Halaman/area: Kopi pemasaran perbandingan/migrasi Appflow. Peran: Paragraf pemasaran atau hukum yang panjang. Dilihat di: halaman ionic-appflow.astro. Simpan produk/brand dan istilah developer Capgo secara tepat. Kunci pesan `appflow_cta_questions` (Pertanyaan Tindakan Appflow). | Fragment teks HTML dari string UI Capgo yang lebih panjang (kunci induk `capwesome_cta_questions`). Halaman/area: Halaman perbandingan Capawesome. Peran: Paragraf pemasaran atau hukum yang panjang. Dilihat di: halaman capwesome.astro. Simpan produk/brand dan istilah developer Capgo secara tepat. Kunci pesan `capwesome_cta_questions` (Pertanyaan Tindakan Capwesome). | Fragment teks HTML dari string UI Capgo yang lebih panjang (kunci induk `consulting_faq_subtitle`). Halaman/area: Halaman layanan konsultasi. Peran: Judul atau tagline bagian. Dilihat di: halaman consulting.astro. Simpan produk/brand dan istilah developer Capgo secara tepat. Kunci pesan `consulting_faq_subtitle` (Judul FAQ Konsultasi). | Halaman/area: Kopi pemasaran perbandingan/migrasi Appflow. Peran: Label UI singkat atau item navigasi. Dilihat di: halaman ionic-appflow.astro, halaman ionic-enterprise-plugins.astro, halaman solusi/ionic-enterprise-plugins.astro. Kunci pesan `appflow_plugins_or` (Appflow Plugins Atau).

sebelum menavigasi. Jangan duplikasi header atau footer web ketika navigasi native menguasai permukaan-permukaan tersebut. Lihat panduan lengkapnya: Menggunakan @capgo/capacitor-native-navigation And Gunakan @capgo/capacitor-transisi.

Area yang aman dengan Tailwind

Untuk area yang aman pada perangkat di Tailwind CSS, gunakan @capgo/tailwind-capacitor Publikasi sebagai tailwind-capacitor di npm. safe-areas Menawarkan utilitas dan plugin Tailwind lainnya yang Capacitor-ramah:

bun add -D tailwind-capacitor

Dalam src/app.css:

@import 'tailwindcss';
@plugin "@capgo/tailwind-capacitor/platform";
@plugin "@capgo/tailwind-capacitor/safe-areas";

Pakai utilitas seperti pt-safe, pb-safe, dan px-safe daripada menaburkannya env(safe-area-inset-*) oleh tangan. Projek ini aktif dikembangkan — jika ada sesuatu yang hilang untuk pengaturan SvelteKit Anda, buka PR di GitHub.

Pengaturan Layout iOS (Viewport, Area Aman, dan Overflows Horizontal)

Jika konten terlihat dipotong, bergeser, atau dapat di-scroll secara horizontal di iOS, menambahkan lebih overflow-x: hidden atau mengatur tag viewport sendiri biasanya tidak dapat memperbaikinya. Kerjakan periksaan-periksaan ini secara berurutan.

Pastikan tag meta viewport diterapkan dengan benar

Di src/app.html, atur tag meta viewport di <head>:

<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />

Pengaturan Area Aman iOS dari satu wrapper root saja

Buatlah shell aplikasi tunggal dan aplikasikan padding area aman di sana — bukan di komponen-komponen nested yang berbeda:

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);
}

Selimuti semua konten halaman di dalam .app-shellPengaturan padding area aman yang berulang di header, modal, dan wrapper layout sering membuat UI terlihat dipotong atau terlalu besar.

Dengan @capgo/tailwind-capacitoranda dapat mengungkapkan padding yang sama dengan utilitas seperti pt-safe pb-safe px-safe di shell tunggal itu.

Atur Capacitor iOS contentInset ke never pertama

Di capacitor.config.ts, lebih baik menggunakan inset asli dan biarkan CSS (atau Native Navigation’s contentInsetMode: 'css') mengendalikan area aman:

const config: CapacitorConfig = {
  appId: 'com.example.myapp',
  appName: 'my-app',
  webDir: 'build',
  ios: {
    contentInset: 'never',
  },
};

Menggabungkan Capacitor’s automatic content inset dengan padding CSS env(safe-area-inset-*) adalah penyebab umum dari jarak ganda.

Temukan elemen yang sebenarnya mengalir melebihi

Penyebab biasanya adalah elemen yang menggunakan 100vw, Tailwind w-screen, lebar piksel yang tetap, atau lebar yang sangat min-width.

In 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 ketika memungkinkan. Banyak masalah overflow horizontal berasal dari 100vw / w-screen, padding area yang 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 dari CapgoMembuat aplikasi mobile dengan SvelteKit dan Capacitor lebih mudah lagi, sehingga pengguna Anda selalu memiliki akses ke fitur dan perbaikan bug terbaru.

Jika Anda ingin mengetahui cara menambahkan Capgo ke aplikasi SvelteKit Anda, lihatlah artikel berikutnya:

Belajar bagaimana Capgo dapat membantu Anda membuat aplikasi yang lebih baik dengan lebih cepat. Daftar gratis sekarang.

Teruskan dari Membuat Aplikasi Mobile dengan SvelteKit dan Capacitor

Jika Anda menggunakan Membuat Aplikasi Mobile dengan SvelteKit dan Capacitor untuk merencanakan otomatisasi CI/CD, hubungkannya dengan Capgo CI/CD untuk alur kerja produk di Capgo CI/CD, Capgo Pembangunan Nadi untuk alur kerja produk dalam Capgo Pembangunan Nadi Capgo Integrasi for the product workflow in Capgo Integrations, Halaman/Areas: Bagian Pemasaran Integrasi. Peran: Judul Bagian atau Halaman. Dilihat di: halaman integrasi.astro. Simpan istilah produk/merek Capgo dan istilah pengembang secara tepat. Kunci pesan `integrations_title` (Judul Integrasi). untuk alur kerja produk dalam __CAPGO_KEEP_0__ Integrasi GitHub Actions Integration for the implementation detail in GitHub Actions Integration.