Building Mobile Apps with SvelteKit and Capacitor

Apa yang akan kita lakukan dalam tutorial ini adalah memulai dengan aplikasi baru SvelteKit dan beralih ke pengembangan mobile native menggunakan Capacitor. Anda juga dapat menambahkan Capgo Navigasi dan Transisi Native untuk merasakan pengalaman mobile native, dan menggunakan tailwind-capacitor untuk area yang aman.

Capacitor memungkinkan Anda untuk dengan mudah mengonversi aplikasi web SvelteKit Anda menjadi aplikasi mobile native tanpa perlu melakukan modifikasi yang signifikan atau belajar kemampuan baru seperti React Native.

Ikuti panduan langkah demi langkah ini untuk mengubah aplikasi SvelteKit Anda menjadi aplikasi mobile menggunakan Capacitor, dengan pilihan Capgo Navigasi, Transisi, dan panduan layout iOS.

Tentang Capacitor

CapacitorJS adalah perubahan besar! Ini dapat dengan mudah diintegrasi ke dalam proyek web apa pun, menggandung aplikasi Anda dalam view 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 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!

Mengatur Aplikasi SvelteKit Anda

Untuk membuat aplikasi SvelteKit baru, jalankan perintah berikut:

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

Setelah menjalankan build perintah, Anda harus melihat aplikasi baru dist folder di root proyek 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

Untuk mengemas aplikasi web apa pun ke dalam kontainer mobile native, kita perlu mengikuti beberapa langkah awal. Setelah itu, cukup dengan menjalankan perintah tunggal. sync Pertama, instal

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

Terakhir, tambahkan platform, dan Capgo akan membuat folder untuk setiap platform di root proyek Anda:

Finally, add the platforms, and Capacitor will create folders for each platform at the root of your project:

# 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

iOS ios dan android folder di proyek SvelteKit Anda.

Proyek ini benar-benar native!

Untuk mengakses proyek Android nanti, Anda perlu menginstal Android Studio. Untuk iOS, Anda perlu 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 selama sinkronisasi. Satu-satunya hal yang perlu Anda perhatikan adalah webDiryang harus mengarah ke hasil perintah build Anda. Saat ini, itu salah.

Untuk memperbaiki hal ini, buka file capacitor.config.ts dan perbarui webDir:

import { CapacitorConfig } from '@capacitor/cli'

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

export default config

ow that we’ve updated our Capacitor settings, let’s change out Sveltekit project to a static application by downloading the proper static adapter package:

npm i -D @sveltejs/adapter-static

HTML teks fragmen dari string Capgo UI yang lebih panjang (kunci induk `solutions_cordova_to_capacitor_ai_step2_body`). Halaman/area: Halaman pemasaran solusi Capgo. Peran: Kalimat teks situs web. Dilihat di: halaman solusi/cordova-to-capacitor-ai.astro. Kunci pesan `solutions_cordova_to_capacitor_ai_step2_body` (Solutions Cordova To Capacitor Ai Step2 Body). Setelah kami memperbarui pengaturan kami __CAPGO_KEEP_0__, mari kita ubah proyek Sveltekit kami menjadi aplikasi statis dengan mengunduh paket adapter statis yang tepat: Setelah paket diinstal, kami perlu mengubah

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

svelte.config.js file dari auto-adapter ke statis: Dengan file svelte.config.js yang diperbarui, kami perlu menambahkan prerender option dengan membuat sebuah +layout.js halaman ke src/routes dan cukup tambahkan ekspor berikut ke +layout.js:

export const prerender = true

Setelah menambahkan dan memperbarui +layout.js halaman, kita perlu menambahkan platform mobile kita, membangun kembali project kita untuk membuat build context: folder yang berisi hasil pembangunan HTML dari halaman yang lebih besar di halaman Capgo UI (parent key `solutions_cordova_to_capacitor_ai_step2_body`). Halaman/area: halaman pemasaran solusi Capgo. Peran: kalimat teks website. Dilihat di: halaman solutions/cordova-to-capacitor-ai.astro. Kunci pesan `solutions_cordova_to_capacitor_ai_step2_body` (Solutions Cordova To Capacitor Ai Step2 Body).

Anda bisa melakukannya dengan menjalankan perintah-perintah berikut:

npm run build
npx cap sync

Perintah pertama npm run build akan membangun proyek SvelteKit Anda dan menyalin pembangunan statis, sedangkan perintah kedua npx cap sync akan sinkronkan semua web code ke tempat-tempat yang tepat di platform-platform native sehingga dapat ditampilkan di aplikasi.

Selain itu, perintah sinkronisasi mungkin memperbarui platform-platform native dan menginstal plugin, sehingga ketika Anda menginstal plugin __CAPGO_KEEP_0__ baru Capacitor pluginslagi. npx cap sync Tidak menyadari, Anda telah menyelesaikan proses ini, jadi mari kita lihat aplikasi di perangkat!

Membangun dan Mengembangkan Aplikasi Native

Untuk mengembangkan aplikasi iOS, Anda memerlukan

Xcode Xcode terpasang, dan untuk aplikasi Android, Anda membutuhkan Studio Android terpasang. Selain itu, jika Anda berencana untuk mendistribusikan aplikasi Anda 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 native berikut:

npx cap open ios
npx cap open android

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

Di Xcode, Anda perlu mengatur akun tanda tangan Anda untuk meng-deploy aplikasi ke perangkat nyata bukan hanya simulator. Jika Anda belum pernah melakukannya sebelumnya, Xcode akan mengantarkan 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 berikut:

Selamat! Anda telah berhasil meng-deploy aplikasi web SvelteKit Anda ke perangkat mobile. Contoh berikut:

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

Capacitor Live Reload

By now, Anda mungkin sudah terbiasa dengan memiliki hot reload dengan semua framework modern, dan kabar baiknya adalah Anda bisa memiliki fungsi yang sama di perangkat seluler dengan usaha minimal!

Memungkinkan akses ke aplikasi Anda yang dihosting secara lokal dengan live reload di jaringan Anda dengan memiliki aplikasi Capacitor memuat konten dari URL tertentu.

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

ipconfig getifaddr en0

Di Windows, jalankan:

ipconfig

Lalu cari alamat IPv4.

Kita bisa menginstruksikan Capacitor untuk memuat aplikasi secara langsung dari server dengan menambahkan entri lain ke file: capacitor.config.ts Pastikan Anda menggunakan

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;

file: alamat IP yang benar dan port, seperti yang ditunjukkan di atas.

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

npx cap copy

Kata perintah ini mirip dengan copy , tetapi hanya akan menyalin perubahan yang dibuat pada folder web dan konfigurasi, tanpa memperbarui proyek asli. syncAnda dapat menyelesaikan proses deploy 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!

Hati-hati perlu diingat bahwa __CAPGO_KEEP_0__

__CAPGO_KEEP_1__ Jika Anda menginstal plugin baru seperti kamera, maka masih memerlukan rebuild projek native Anda. 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 Share plugin, tetapi itu menampilkan dialog berbagi native! Untuk ini, kita hanya perlu mengimport paket dan memanggil share() fungsi dari aplikasi kita, jadi mari kita ubah src/routes/index.svelte 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>

Seperti yang telah disebutkan 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

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

Aplikasi Anda akan terasa lebih alami di iOS dan Android dengan Capgo navigasi dan transisi, serta memperbaiki masalah layout iOS yang umum menyebabkan overflow horizontal atau area aman yang dipotong.

Antarmuka yang terasa alami dengan Capgo Navigasi dan Transisi Asli

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

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

• @capgo/capacitor-native-navigation — navbar asli, tab bar Liquid Glass di iOS, dan gaya tab bar yang diblur di Android. Router SvelteKit Anda tetap mengelola state route; plugin ini yang mengelola chrome asli.
• @capgo/capacitor-transitions — transisi halaman seperti Ionic dan swipe-back di lapisan WebView iOS, tanpa mengadopsi 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',
  },
});

Render tab bar Glass 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 dalam 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-page, dan cap-content, dan panggil setDirection('forward') atau setDirection('back') sebelum berpindah. Jangan duplikasi header atau footer web ketika navigasi native menguasai permukaan tersebut.

Lihat panduan lengkap: Menggunakan @capgo/capacitor-native-navigation dan Menggunakan @capgo/capacitor-transitions.

Daerah aman dengan Tailwind

Untuk daerah aman perangkat di Tailwind CSS, gunakan @capgo/tailwind-capacitor (diterbitkan sebagai) tailwind-capacitor di npm). Ini menyediakan safe-areas fasilitas dan plugin Tailwind lainnya yang Capacitor-ramah:

bun add -D tailwind-capacitor

In src/app.css:

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

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

Memperbaiki Masalah Tata Letak iOS (Viewport, Area Aman, dan Overlalu Horizontal)

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

Pastikan tag meta viewport diterapkan dengan benar

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

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

Menangani area aman iOS dari satu wrapper root saja

Buatlah sebuah 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-shellPenambahan padding area aman yang berulang di header, modal, dan wrapper tata letak 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 dalam cangkang tunggal itu.

Set Capacitor iOS contentInset ke never context

Halaman/area: Halaman produk live update. Peran: Label UI pendek atau item navigasi. Kunci pesan `live_update_dynamic_label_to` (Label Dinamis Live Update To). capacitor.config.tspertama contentInsetMode: 'css'Di

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

Mixing Capacitor’s automatic content inset with CSS env(safe-area-inset-*) ) mengendalikan area aman:

Menggabungkan __CAPGO_KEEP_0__’s automatic content inset dengan CSS

padding adalah penyebab umum dari jarak ganda. 100vwTailwind w-screenlebar piksel tetap, atau lebar yang besar 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 keluaran horizontal datang dari 100vw / w-screenduplikasi padding area yang aman, atau kontainer 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 Capgolebih mudah lagi untuk menambahkan pembaruan hidup ke aplikasi Anda, 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 berikutnya:

Pelajari bagaimana Capgo dapat membantu Anda membuat aplikasi yang lebih baik dengan lebih cepat daftar diri Anda untuk akun gratis hari ini.

Teruskan dari Membangun Aplikasi Mobile dengan SvelteKit dan Capacitor

Jika Anda menggunakan Membangun 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 Native Builds untuk alur kerja produk di Capgo Native Builds Integrasi Capgo untuk alur kerja produk dalam Capgo Integrasi Pengintegrasian CI/CD untuk detail implementasi dalam Pengintegrasian CI/CD, dan Pengintegrasian GitHub Aksi untuk detail implementasi dalam Pengintegrasian GitHub Aksi