Capacitor으로 PWA를 네이티브 앱으로 변환하세요.

소개

이미 프로그레시브 웹 앱을 가지고 있습니다. 브라우저에서 작동하고 매니페스트가 있으며 오프라인 지원을 위해 서비스 워커를 사용할 수 있습니다. 이제 앱 스토어 배포, 네이티브 디바이스 API 또는 보다 나은 온보딩 펀들을 필요로 한다면 Capacitor 앱으로 마이그레이션하는 것이 프론트 엔드 다시 작성하는 것보다 빠를 때가 많습니다.

code의 가장 큰 장점은 대부분의 경우에 기존 웹 code을 거의 유지할 수 있다는 것입니다. 일반적으로 다음만 필요합니다:

생산 웹 자산 빌드
Capacitor을 올바른 webDir,
iOS 및 Android 프로젝트에 추가
밖에 필요할 때만 네이티브 플러그인을 연결하세요.

클린 루트와 컴포넌트 로직이 있는 PWA가 있다면, 이 작업은 몇 시간 만에 끝낼 수 있습니다.

필수 조건

예상 시간: 2-5 시간, 플랫폼에 따라 특정 기능에 따라 달라집니다.

Node.js 18세 이상 Bun
code (React, Vue, Angular, Svelte, etc.)가 있는 현재 PWA 소스
Xcode (iOS, macOS 전용)
Android Studio 안드로이드용
iOS를 배포하기 위해 Apple Developer 계정을 가지고 있어야 합니다.
Google Play Developer 계정을 가지고 있어야 합니다.

1단계: 네이티브 랩핑하기 전에 PWA를 확인하세요.

앱을 실행하기 전에 bunx cap init웹 앱이 프로덕션 준비가 되었는지 확인하세요:

프로덕션 빌드 스크립트가 있는지 확인하세요 (예를 들어 bun run build).
웹 출력 폴더가 결정적이도록 하세요 (종종 dist, build브라우저 전용 컨텍스트를 가정하는 절대적인 리다이렉트를 제거하세요. out).
모바일 웹 뷰에서 서비스 워커 동작이 호환되는지 확인하세요:
사용자에게 도움이 되는 경우 오프라인 지원을 유지하세요.
- __CAPGO_KEEP_0__
- 브라우저 전용 API를 사용하지 말고, 임베디드 웹뷰에서 사용할 수 없는 API를 피하십시오.
PWA 설치提示와 브라우저 전용 UX가 여전히 의미가 있습니까? 일반적으로 Capacitor 앱에서 앱 설치提示는 필요하지 않습니다.

Step 2: 웹 전용 동작을 적응하세요

앱 UI를 유지하고 브라우저 전용 논리를 게이트하세요.

설치 및 푸시提示에 대한 간단한 플랫폼 체크를 사용하세요:

import { Capacitor } from '@capacitor/core'

const isNative = Capacitor.isNativePlatform()

function registerInstallPrompt() {
  if (isNative) return
  // existing browser-only install or Web Push code
}

이것은 네이티브 컨테이너 내부에서 브라우저 전용 논리가 실행되는 것을 피합니다.

Step 3: Capacitor을 PWA 폴더에서 초기화하세요

기존 PWA 루트에서:

bun add @capacitor/core
bun add -D @capacitor/cli

Capacitor init을 실행하여 앱 이름, 번들 ID, 웹 출력 디렉토리를 지정하세요.

bunx cap init MyPWAApp com.example.my-pwa-app --web-dir dist

빌드 폴더가 build (Create React App) 또는 out (Next.js 정적 내보내기)인 경우 dist.

기본 Capacitor 설정을 추가하세요:

import type { CapacitorConfig } from '@capacitor/cli'

const config: CapacitorConfig = {
  appId: 'com.example.my-pwa-app',
  appName: 'MyPWAApp',
  webDir: 'dist',
  server: {
    iosScheme: 'https',
  },
}

export default config

4단계: 네이티브 플랫폼 추가

코어 네이티브 패키지를 설치하고 프로젝트 폴더를 생성하세요:

bun add @capacitor/ios @capacitor/android
bunx cap add ios
bunx cap add android

Capacitor이 이 단계에서 ios/ 폴더를 생성했습니다. Syncing은 빌드된 웹 자산을 두 개의 플랫폼에 복사합니다. android/ 5단계: 웹 앱 빌드 및 Sync

PWA 빌드 및 웹 자산 Sync:

네이티브 프로젝트 열기:

bun run build
bunx cap sync

Xcode 또는 Android Studio에서 장치 또는 에뮬레이터를 연결하고 실행하세요.

bunx cap open ios
bunx cap open android

6단계: 네이티브 향상 후 마이그레이션

이것은 네이티브 API에서 웹 전용 기능을 대체하는 곳입니다. 필요할 때:

푸시 알림 -> @capacitor/push-notifications
보안 키/값 저장소 -> @capacitor/preferences
카메라 / 미디어 -> @capacitor/camera
생체 인증 -> @capacitor-community/native-biometric (또는 선택한 플러그인)

새로운 네이티브 플러그인에 대해:

플러그인 패키지를 설치하십시오
플러그인별 설정을 구성하십시오
Run:

bunx cap sync

다시 빌드하고 다시 실행하십시오.

7단계: 앱스토어 동일성 검사

제출 전에:

테스트 링크 및 라우팅 (/ 모바일 및 데스크톱에서 깊은 경로를 테스트합니다.
모바일 및 데스크톱에서 상태바, 안전 영역, 및 방향이 올바른지 확인합니다.
사용하지 않는 웹 전용 메타데이터를 제거하여 앱 동작과 충돌하지 않도록 합니다. (예를 들어, 설치 프롬프트).
앱의 전송 보안 및 개인 정보 설정을 정책에 맞게 유지합니다.
각 플랫폼에 앱 아이콘/스플래시 자산을 추가합니다.

앱이 OTA 업데이트를 사용하는 경우, 네이티브로 안전한 업데이트 전략과 함께 릴리즈 PIPELINE을 pair하고 Capgo 통제된 롤아웃 및 롤백을 위해

최종 체크리스트

웹 앱 빌드가 깨끗하게 작동합니다. (bun run build)
Capacitor webDir
bunx cap add ios 그리고 bunx cap add android 완료
실제 기기에서 실행되는 네이티브 앱
브라우저 전용 code 경로가 네이티브 동작을 위해 게이트웨이됩니다.
업데이트 채널 및 앱 스토어 자산이 구성됩니다.

이미 PWA를 빌드할 때 대부분의 어려운 작업을 이미 수행했습니다. Capacitor로 wrapping하면 다음과 같은 이점이 있습니다:

스토어 배포
네이티브 API에 대한 접근
전체 code 재작성 없이 빠른 반복
웹 및 모바일 팀이 공유하는 단일 배포 경로

이 흐름에서 시작하고, 분석 및 사용자 feedback에 따라 네이티브로 반복하세요.

Transform Your PWA를 Capacitor로 네이티브 앱으로 변환하세요.

만약에 당신이 사용 중이라면 Transform Your PWA to a Native App with Capacitor 이동 및 기업 운영을 계획하고 싶다면 __CAPGO_KEEP_0__와 연결하세요. Capgo Enterprise Capgo Enterprise에서 제품 워크플로우를 위해 Ionic Enterprise Plugin 대체 Ionic Enterprise Plugin 대체에서 제품 워크플로우를 위해 Capgo 대체 Capgo 대체에서 제품 워크플로우를 위해 Capgo 컨설팅 Capgo 컨설팅에서 제품 워크플로우를 위해 Capgo 프리미엄 지원 Capgo 프리미엄 지원 workflow에 대한 제품.

Capacitor 앱으로 변환하세요.

소개