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

導入

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

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

プロダクション用ウェブアセットをビルドする
initialize Capacitor with the right webDir,
iOSとAndroidのプロジェクトを追加し、必要な箇所のみネイティブプラグインを接続する
ネイティブプラグインを必要な箇所のみ接続する

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

前提条件

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

Node.js 18+で Bun
Your existing PWA source code (React, Vue, Angular, Svelte, etc.)
Xcode iOS、macOS向け
Android Studio Android向け
iOSの公開にあたってはApple Developerアカウントが必要
Android向けの配布にあたってはGoogle Play Developerアカウントが必要

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

実行する前に bunx cap init、確認してください

プロダクション用のビルドスクリプトがPWAに設定されていることを確認してください bun run build).
確認してください dist, build確実に決定的なWeb出力フォルダが設定されていることを確認してください out).
ブラウザのみのコンテキストを想定している絶対的なリダイレクトを削除してください
モバイル用Webビューのサービスワーカー動作が互換性があることを確認する:
- オフラインサポートを維持することでユーザーに役立つ場合があります。
- ブラウザのみのAPIを避ける。Embedded Webviewでは利用できないためです。
PWAのインストールプロンプトやブラウザ固有のUIが、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
}

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

ステップ3: CapacitorをPWAフォルダに初期化する

既存のPWAルートから:

bun add @capacitor/core
bun add -D @capacitor/cli

Capacitor initを実行します。アプリ名、バンドルID、Web出力ディレクトリを指定します。

bunx cap init MyPWAApp com.example.my-pwa-app --web-dir dist

ビルドフォルダが build ((Create React App) または out ((Next.js static export), 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

Step 4: Native プラットフォームを追加

Install core native packages and generate project folders:

bun add @capacitor/ios @capacitor/android
bunx cap add ios
bunx cap add android

At this point Capacitor has created ios/ と android/ folders. Web アセットを両方のプラットフォームに同步する

Step 5: Web アプリをビルドしてsync

Build the PWA and sync web assets:

bun run build
bunx cap sync

Native プロジェクトを開く

bunx cap open ios
bunx cap open android

Xcode または Android Studio から、デバイスまたはエミュレータを接続し実行する

Step 6: Native enhancements after migration

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

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

各新しいネイティブプラグインの場合:

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

bunx cap sync

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

Step 7: App Store の一致性確認

提出前に:

両方のプラットフォームでテストする/ テストする
ステータスバー、セーフエリア、オートリオリエーションが正しいことを確認する
不要な Web のみのメタデータを削除する (例: インストールの促進)
アプリのトランスポートセキュリティとプライバシー設定を、ポリシーに合わせて保つ
各プラットフォーム用のアプリアイコン/スプラッシュアセットを追加する

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

__CAPGO_KEEP_0__

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

あなたはすでにPWAを構築する際に最も難しい部分をほとんど行ったことになります。Capacitorにラップすることであなたは次のことが得られます。

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

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

Keep going from Transform Your PWA to a Native App with Capacitor

Capacitorを使用している場合 Transform Your PWA to a Native App with Capacitor Capacitorを使用してPWAをネイティブアプリに変換する方法については、Capacitorを使用してPWAをネイティブアプリに変換する方法については Capgo Enterprise for the product workflow in Capgo Enterprise, Capacitorを使用してPWAをネイティブアプリに変換する方法については、Capacitorを使用してPWAをネイティブアプリに変換する方法については Capacitorを使用してPWAをネイティブアプリに変換する方法については、Capacitorを使用してPWAをネイティブアプリに変換する方法については Capgo Alternatives for the product workflow in Capgo Alternatives, Capgo Consulting Capgoの製品ワークフローにおけるCapgoコンサルティング、 Capgoプレミアムサポート Capgoの製品ワークフローにおけるCapgoプレミアムサポート。