Introduction
既にProgressive Web Appを実装しています。ブラウザで動作し、manifestを持ち、オフラインサポートのためにサービスワーカーを使用しているかもしれません。アプリストアの配布、ネイティブデバイスAPI、またはより良いオンボーディングのフローの必要性が生じた場合、Capacitorアプリに移行することは、フロントエンドを再構築するよりも速い場合が多い。
最大の利点は、ほとんどの既存のWeb codeを保持できることです。ほとんどの場合、次の作業のみが必要です:
- プロダクションWebアセットのビルド
- Capacitorの初期化に適切な
webDir, - iOSとAndroidプロジェクトの追加
- 必要な場合にのみネイティブプラグインのワイヤー
もしPWAがクリーンなルートとコンポーネントロジックを持っていたら、数時間で完了することもあります。
前提条件
推定時間: 2-5時間、プラットフォーム固有の機能に依存します。
- Node.js 18歳以上 Bun
- codeの既存のPWAソース (React, Vue, Angular, Svelteなど)
- Xcode (iOS、macOSのみ)
- Android Studio (Androidのみ)
- iOSの場合、Apple Developerアカウントが必要です
- Androidの場合、Google Play Developerアカウントが必要です
ステップ1: PWAをネイティブにラップする前に、確認してください
実行する前に、確認してください bunx cap init、ウェブアプリがプロダクション用に準備されていることを確認してください:
- PWAのビルドスクリプトが正常に作成されていることを確認してください (例えば、
bun run build). - Web出力フォルダが決定論的であることを確認してください (よく
dist,build, またはout). - ブラウザのみのコンテキストを前提とする絶対的なリダイレクトを削除してください。
- サービスワーカーの動作がモバイルWebViewsと互換性があることを確認してください:
- オフラインサポートを維持することでユーザーに役立つ場合は、オフラインサポートを維持してください。
- ブラウザのみのAPIを避けます。これらのAPIは、埋め込まれたWebview内では利用できません。
- PWAのインストールプロンプトとブラウザ固有のUXがまだ意味をなしていることを確認してください。Capacitorアプリでは、通常インストールプロンプトは必要ありません。
ステップ2: Webのみの動作を適応させる
アプリの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 フォルダに初期化する
From your existing PWA root:
bun add @capacitor/core
bun add -D @capacitor/cliRun Capacitor init を実行してアプリ名、バンドル ID、ウェブ出力ディレクトリを指定する
bunx cap init MyPWAApp com.example.my-pwa-app --web-dir distIf your build folder is build (Create React App) または out (Next.js 静的エクスポート), 以下の内容を置き換える dist.
Add a basic Capacitor config:
import type { CapacitorConfig } from '@capacitor/cli'
const config: CapacitorConfig = {
appId: 'com.example.my-pwa-app',
appName: 'MyPWAApp',
webDir: 'dist',
server: {
iosScheme: 'https',
},
}
export default configStep 4: ネイティブプラットフォームを追加する
Install core native packages とプロジェクトフォルダを生成する:
bun add @capacitor/ios @capacitor/android
bunx cap add ios
bunx cap add androidこの時点で Capacitor は ios/ と android/ フォルダが作成された。 同期は、両方のプラットフォームにビルド済みのウェブアセットをコピーする。
Step 5: Web アプリをビルドし、同期
PWA をビルドし、Web アセットを同期:
bun run build
bunx cap syncここで、ネイティブ プロジェクトを開く
bunx cap open ios
bunx cap open androidXcode または Android Studio から、デバイスまたはエミュレータを接続し、実行
Step 6: ネイティブ アプリケーションへの移行後
ここで、Web でのみ機能する機能を必要に応じてネイティブ API で置き換える
- プッシュ通知 ->
@capacitor/push-notifications - セキュアなキー/値ストレージ ->
@capacitor/preferences - カメラ/メディア ->
@capacitor/camera - バイオメトリック認証 ->
@capacitor-community/native-biometric(または選択したプラグイン)
各新しいネイティブ プラグインごとに
- プラグインパッケージをインストールする
- プラグイン固有の設定を構成する
- Run:
bunx cap sync次に、再構築してもう一度実行する。
ステップ 7: アプリストアのパリティチェック
提出前に:
- 両方のプラットフォームで、深いリンクとルーティング (
/と深いルート) をテストする。 - ステータスバー、セーフエリア、およびオリエンテーションが正しいことを確認する。
- 未使用のウェブ専用メタデータを削除する (例: インストールの促進)。これはアプリの動作と競合する。
- アプリのトランスポートセキュリティとプライバシー設定を、ポリシーと一致させる。
- 各プラットフォーム用にアプリアイコン/スプラッシュアセットを追加する。
あなたのアプリがOTA更新を使用している場合、リリースパイプラインをネイティブセーフの更新戦略と組み合わせて考慮してください Capgo 制御されたロールアウトとロールバック
最終チェックリスト
- Webアプリが綺麗にビルドされます
bun run build) - Capacitor
webDir bunx cap add iosとbunx cap add android完了- ネイティブアプリは実機で動作します
- ブラウザのみのcodeパスはネイティブの動作でブロックされています
- アップデートチャンネルとアプリストアのアセットは設定されています
あなたはすでにPWAを構築する際に最も難しい作業のほとんどを実行していました。Capacitorでラップするとあなたに次のことが得られます
- 配布チャネル
- ネイティブAPIへのアクセス
- Faster iteration without a full code rewrite,
- Webとモバイルチームのための単一のデプロイパス
このフローから始め、分析とユーザーフィードバックに基づいてネイティブに一つずつ反復してください。
Keep going from Transform Your PWA to a Native App with Capacitor
Capacitorを使用している場合 Transform Your PWA to a Native App with Capacitor Capacitor Enterprise Capgo Enterprise for the product workflow in Capgo Enterprise, Capacitor Enterprise Capacitorの代替品の製品ワークフローについて Capgoの代替品 for the product workflow in Capgo Alternatives, Capgoのコンサルティング for the product workflow in Capgo Consulting, and Capgoのプレミアムサポート for the product workflow in Capgo Premium Support.
