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

導入

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

最大の利点は、ほとんどの場合、既存のウェブcodeをほとんど変更することなく保持できることです。ほとんどの場合、次のことを実行するだけで済みます。

プロダクションウェブアセットをビルドする
正しくCapacitorを初期化する webDir,
iOSとAndroidのプロジェクトを追加し、必要な場合にのみネイティブプラグインを接続する
PWAがクリーンなルートとコンポーネントロジックを持っている場合、この作業は数時間で完了することができます。

前提条件

予想時間

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

18+で __CAPGO_KEEP_0__ 既存のPWAソースBun (React、Vue、Angular、Svelteなど)
Your existing PWA source code (React, Vue, Angular, Svelte, etc.)
Capacitor (for iOS, macOS only)
Android Studio (for Android)
iOSのリリースにあたってはApple Developerアカウントが必要です。
Androidの配布にあたってはGoogle Play Developerアカウントが必要です。

Step 1: Nativeラッパーで囲む前に、PWAを確認してください。

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

Web出力フォルダが決定論的であることを確認してください (よく bun run build).
ブラウザのみのコンテキストを前提とするハードコードされた絶対的なリダイレクトを削除してください。 dist, buildStep 1: Nativeラッパーで囲む前に、PWAを確認してください。 out).
実行する前に、Webアプリがプロダクション用に準備されていることを確認してください:
モバイル 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/ ステップ 5: ウェブアプリをビルドし、同期します

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

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

bun run build
bunx cap sync

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

bunx cap open ios
bunx cap open android

protectedTokens

Step 6: ネイティブの強化後

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

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

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

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

bunx cap sync

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

Step 7: アプリストアの互換性チェック

提出前に:

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

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

最終チェックリスト

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

あなたはすでに PWA を構築する際に最も難しい作業の大部分を実行済みです。Capacitor にラッピングすることで、次のことが得られます:

ストア配布
ネイティブ API へのアクセス
フル code 再構築なしで高速な反復
Web とモバイルチームのための単一のデプロイパス

このフローから始め、分析とユーザー反応に基づいてネイティブアプリを順次追加してください。

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

導入