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

Martin Donadieu

You already have a Progressive Web App. It works in browsers, has a manifest, and maybe uses a service worker for offline support. If you now need app store distribution, native device APIs, or a better onboarding funnel, migrating to a Capacitor app is usually faster than rewriting your front end.

The biggest advantage is that you keep almost all of your existing web code. In most cases, you only need to:

導入
既存のProgressive Web Appを持っています。ブラウザで動作し、manifestがあり、サービスワーカーを使用してオフラインサポートを実装しているかもしれません。アプリストアの配布、ネイティブデバイスAPI、またはより良いオンボーディングフローの必要性が生じた場合、Capacitor アプリに移行することは、フロントエンドを再構築することよりも速い場合が多いです。 webDir,
最大の利点は、ほとんどの場合、既存のWeb __CAPGO_KEEP_0__ をほとんど変更することなく保持できることです。通常、次の作業のみが必要です。
と必要な箇所のみでネイティブプラグインをwireします。

クリーンルートとコンポーネントロジックを持つPWAの場合、数時間で済みます。

前提条件

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

Node.js 18歳以上 Bun
既存のPWAソース code (React、Vue、Angular、Svelteなど)
Xcode (iOS、macOSのみ)
Android Studio Android向け
iOSの公開を計画している場合は、Apple Developerアカウントが必要です。
Androidの配布用にGoogle Play Developerアカウントが必要です。

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

実行する前に、Webアプリがプロダクション用に準備されていることを確認してください: bunx cap initプロダクション用ビルドスクリプト (例えば、

Web出力フォルダが決定論的 (よく bun run build).
ブラウザのみのコンテキストを前提とする絶対的なリダイレクトがハードコードされている場合は、 dist, buildモバイルWebViewsと互換性のあるサービスワーカーの動作を確認してください: out).
ユーザーにとって役に立つ場合は、オフラインサポートを維持してください。
__CAPGO_KEEP_0__
- __CAPGO_KEEP_0__
- ブラウザのみのAPIを使用しないでください。エンクローズドウェブビューでは利用できません。
Capacitor アプリでは、通常、インストールのプロンプトは必要ありません。PWA インストールのプロンプトとブラウザ固有のUIはまだ意味があります。

ステップ 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.

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 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から、デバイスまたはエミュレータに接続し実行してください。

ステップ 6:ネイティブの強化

ここでは、必要に応じてWebのみの機能をネイティブAPIで置き換えます:

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

すべての新しいネイティブプラグインごとに:

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

bunx cap sync

すると、再構築して再実行する

ステップ 7: アプリストアのパリティチェック

提出前に:

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

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

最終チェックリスト

Webアプリが綺麗にビルドされます (bun run build)
Capacitorが正しく初期化されます webDir
bunx cap add ios そして bunx cap add android __CAPGO_KEEP_0__
本物のデバイスで実行されるネイティブアプリ
ブラウザのみのcodeパスはネイティブ動作のためのゲート
アップデートチャンネルとアプリストアアセットは設定

CapacitorでPWAをwrapすることで、すでに作成した大部分のハードワークを実行することができます。

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

このフローから始め、分析とユーザーフィードバックに基づいてネイティブに一つずつ開発していきましょう。

Transform Your PWAをネイティブアプリに変換するCapacitorから続きましょう

If you are using ネイティブアプリに変換するPWAをCapacitorで を計画し、__CAPGO_KEEP_0__ Enterpriseと接続して、の製品ワークフローにCapgo Enterpriseを for the product workflow in Capgo Enterprise, の製品ワークフローに__CAPGO_KEEP_0__ Alternativesをの製品ワークフローに__CAPGO_KEEP_0__ Alternativesをの製品ワークフローにCapgo Consultingをの製品ワークフローにCapgo Consultingをの製品ワークフローにCapgo Premium Supportを Capgo Enterprise Capgo Alternatives for the product workflow in Capgo Premium Support.