CapacitorでPWAをネイティブアプリに変換する

導入

すでにパワフルなウェブアプリを持っています。ブラウザで動作し、manifestがあり、サービスワーカーを使用してオフラインサポートも実現しています。アプリストア配信、ネイティブデバイスAPI、またはより良いオンボーディングフローの必要性が生じた場合、Capacitorアプリに移行することは、フロントエンドを再構築するよりも速い場合が多いです。

codeの最大の利点は、ほとんどの場合、既存のウェブcodeをほぼすべて保持できることです。次のような場合にのみ、以下の作業を行う必要があります。

プロダクションウェブアセットのビルド
initialize Capacitor に適切な webDir,
iOS と Android のプロジェクトを追加し、
ネイティブプラグインを必要に応じてのみで構築する。

PWA がクリーンなルートとコンポーネントロジックを持っている場合、この作業は 1-2 時間で完了することができます。

前提条件

推定時間2-5 時間、プラットフォーム固有の機能に応じて。

Node.js 18 以降のバージョンで Bun
既存の PWA ソース code (React、Vue、Angular、Svelte など)
Xcode (for iOS, macOS only)
Android Studio (for Android)
iOSのリリースにあたってはApple Developerアカウントが必要です。
Androidの配布にあたってはGoogle Play Developerアカウントが必要です。

ステップ 1: PWAをネイティブにラッピングする前に、確認してください。

実行する前に、以下を確認してください。 bunx cap initプロダクション用に準備されたウェブアプリが確実に存在することを確認してください。

プロダクション用ビルドスクリプト (例えば bun run build).
ウェブ出力フォルダが決定論的であることを確認してください (よく dist, buildブラウザのみのコンテキストを前提とするハードコードされた絶対的なリダイレクトを削除してください。 out).
__CAPGO_KEEP_0__
モバイル WebViews と互換性のあるサービスワーカーの動作を確認する:
- __CAPGO_KEEP_0__ アプリでユーザーに役立つ場合はオフラインサポートを維持する。
- エンビデッドウェブビュー内では利用できないブラウザのみ API を避ける。
Capacitor アプリでは通常、インストールの促しは必要ないため、PWA インストールの促しとブラウザ固有の UX を確認する。

ステップ 2: ウェブのみの動作を適応させる

アプリの UI を維持しながらブラウザのみのロジックをゲートする。

インストールとプッシュの促しにシンプルなプラットフォームチェックを使用する:

import { Capacitor } from '@capacitor/core'

const isNative = Capacitor.isNativePlatform()

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

これにより、ネイティブコンテナ内でブラウザのみのロジックが発火するのを避ける。

ステップ 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/ と android/ フォルダを作成しました。同期は、両方のプラットフォームにビルドされた Web アセットをコピーします。

ステップ 5: Web アプリをビルドし、同期します

PWA をビルドし、Web アセットを同期します:

bun run build
bunx cap sync

ネイティブプロジェクトを開きます:

bunx cap open ios
bunx cap open android

Xcode または Android Studio から、デバイスまたはエミュレータを接続し、実行してください。

Step 6: Native enhancements after migration

このステップでは、必要に応じてウェブ専用の機能をネイティブAPIに置き換えます:

Push通知 -> @capacitor/push-notifications
セキュアなキー/値ストレージ -> @capacitor/preferences
カメラ/メディア -> @capacitor/camera
バイオメトリック認証 -> @capacitor-community/native-biometric (またはプラグインの選択)

各新しいネイティブプラグインごとに:

プラグインパッケージをインストール
プラグイン固有の設定を構成
Run:

bunx cap sync

再構築して再実行してください。

Step 7: アプリストアの互換性確認

提出前に:

両方のプラットフォームでテストする (/ とディープルーティング)。
ステータスバー、セーフエリア、およびオリエンテーションが正しいことを確認します。
アプリの動作に影響を与える可能性のある未使用のWebのみのメタデータを削除します (例: インストールの促進)。
アプリのトランスポートセキュリティとプライバシー設定を、ポリシーと一致させます。
各プラットフォーム用にアプリアイコン/スプラッシュアセットを追加します。

アプリがOTA更新を使用している場合、ネイティブセーフな更新戦略と組み合わせてリリースパイプラインをPairし、制御されたロールアウトとロールバック Capgo を考慮することをお勧めします。

最終チェックリスト

Web app builds cleanly (bun run build)
Capacitor が正しく初期化された webDir
bunx cap add ios と bunx cap add android 完了
Native アプリは実機デバイスで動作
ブラウザのみの code パスは、ネイティブ動作のためにゲートされます
アップデートチャンネルとアプリストアアセットは設定

あなたはすでにPWAを構築するのに困難な部分のほとんどを済ませた。Capacitorにラッピングすることであなたは:

ストア配布
ネイティブAPIへのアクセス
フル code 再構築なしで、より速い開発
ウェブとモバイルチームのための単一のデプロイパス

このフローから始め、分析とユーザーフィードバックに基づいてネイティブアプリを順次実装してください。

Capacitorから続けて、PWAをネイティブアプリに変換してください。

あなたが「__CAPGO_KEEP_0__」を使用している場合 Capacitorから続けて、PWAをネイティブアプリに変換してください。 あなたが企業向けの移行と運用を計画している場合、__CAPGO_KEEP_0__ Enterpriseと接続してください。 Capgo Enterpriseの製品ワークフローでは、Capgo Enterpriseを使用してください。 for the product workflow in Capgo Enterprise, Ionic Enterprise Plugin Alternativesの製品ワークフローでは、Ionic Enterprise Plugin Alternativesを使用してください。 __CAPGO_KEEP_0__ Alternativesの製品ワークフローでは、__CAPGO_KEEP_0__ Alternativesを使用してください。 Capgo Alternativesの製品ワークフローでは、Capgo Alternativesを使用してください。 Capgo Consulting Capgo Capgoの製品ワークフローにおけるCapgoコンサルティング、そして Capgoプレミアムサポート Capgoプレミアムサポートの製品ワークフローにおける

Capacitorでパワフルなウェブアプリをネイティブアプリに変換する

導入