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

導入

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

最大の利点は、ほとんどの既存のウェブcodeを維持できることです。ほとんどの場合、次の作業のみが必要です。

プロダクション用のウェブアセットをビルドする
Capacitorを正しく初期化する webDir,
iOSとAndroidのプロジェクトを追加する
必要な場合にのみネイティブプラグインを接続する

PWAがクリーンなルートとコンポーネントロジックを持っている場合、数時間で済みます。

前提条件

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

Node.js 18+ の場合 Bun
既存の PWA ソース code (React, Vue, Angular, Svelte など)
Xcode (iOS、macOS のみ)
Android Studio (Android のみ)
Apple Developer アカウントが iOS の場合の配布に必要です
Google Play Developer アカウントが Android の場合の配布に必要です

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

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

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

Step 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
}

ブラウザのみのロジックがネイティブコンテナ内で実行されないようにします。

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

ステップ 6: マイグレーション後のネイティブエンハンスメント

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

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

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

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

bunx cap sync

次に、再構築して再実行します。

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

提出前に:

両方のプラットフォームで、(とディープルート) のディープリンクとルーティングをテストします。/ ステータスバー、セーフエリア、およびオリエンテーションが正しいことを確認します。
__CAPGO_KEEP_0__
不要したい未使用のWeb専用メタデータを削除します。これは、インストールのプロンプトなど、アプリの動作と矛盾するものです。
__CAPGO_KEEP_0__
アプリのトランスポートセキュリティとプライバシー設定を、組織のポリシーと一致させるようにします。

各プラットフォーム用にアプリのアイコン/スプラッシュアセットを追加します。 Capgo __CAPGO_KEEP_0__

を検討してください。

最終チェックリストbun run build)
Capacitor initialized with the right webDir
bunx cap add ios __CAPGO_KEEP_0__ bunx cap add android で初期化された正しい
と完了しました。
ブラウザのみのcodeパスはネイティブの動作にゲートされます。
__CAPGO_KEEP_0__の更新チャネルとアプリストアアセットは設定されます。

あなたはPWAを構築する際にすでにほとんどの難しい作業を実行したのです。Capacitorにラッピングすることであなたは:

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

このフローから始め、分析とユーザーフィードバックに基づいてネイティブにイテレーションを実行してください。

Capacitorを使用してPWAをネイティブアプリに変換する

導入