メインコンテンツにジャンプ
Capgoロゴ
チュートリアル

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

CapacitorのiOSおよびAndroid向けネイティブモバイルアプリに既存のプログレッシブウェブアプリを変換する。最小限のcodeの変更でPWAをパッケージングするための実践的なガイド。

マーティン・ドナディュー

マーティン・ドナディュー

コンテンツマーケター
Capacitorを用いたPWAをネイティブアプリに変換する

イントロダクション

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

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

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

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

前提条件

予想時間: 2-5 時間、プラットフォーム固有の機能に依存します。

  • Node.js 18歳以上 Bun
  • codeの既存のPWAソース (React, Vue, Angular, Svelteなど)
  • Xcode (iOS、macOSのみ)
  • Android Studio (Android用)
  • iOSの場合、Apple Developerアカウントが必要
  • Androidの場合、Google Play Developerアカウントが必要

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

実行する前に、Webアプリがプロダクション用に準備されていることを確認してください bunx cap init, verify your web app is production-ready:

  1. プロダクション用のPWAビルドスクリプトを確実に用意してください (例えば、 bun run build).
  2. 確認してください:Web出力フォルダは決定論的であることが多いのですが ( dist, build, または out).
  3. ブラウザのみのコンテキストを前提とする絶対的なリダイレクトをハードコードしないでください。
  4. モバイルWebViewsのサービスワーカー動作と互換性があることを確認してください:
    • オフラインサポートを維持することでユーザーに役立つ場合があります。
    • ブラウザのみのAPIを避けます。Embedded WebViewでは利用できないAPIです。
  5. Confirm PWA install prompts and browser-specific UX still make sense. In a Capacitor app, app install prompts are usually not needed.

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

これにより、ネイティブコンテナ内でブラウザのみのロジックが実行されるのを防ぎます。

Step 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 静的エクスポート) の場合、 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

Step 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

ここで、Xcode または Android Studio を開きます:

bunx cap open ios
bunx cap open android

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

ステップ 6: マイグレーション後のネイティブの強化

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

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

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

  1. プラグインパッケージをインストールする
  2. プラグイン固有の設定を構成する
  3. Run:
bunx cap sync

次に再構築して再実行する。

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

提出前に:

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

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

Webアプリが綺麗にビルドされます (

  • __CAPGO_KEEP_0__が正しく初期化され、bun run build)
  • Capacitor initialized with the right webDir
  • bunx cap add ios 完了 bunx cap add android ネイティブアプリは実機で動作します
  • ブラウザのみの__CAPGO_KEEP_0__パスはネイティブ動作をゲートします
  • Browser-only code paths are gated for native behavior
  • あなたはPWAを構築する際にすでに大部分の難しい作業を行いました。__CAPGO_KEEP_0__にラップすることで、次のことが得られます:

Webアプリが綺麗にビルドされます (Capacitorが正しく初期化され、と完成

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

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

Transform Your PWAをCapacitorでネイティブアプリに変換

__CAPGO_KEEP_0__を使用している場合 Transform Your PWAをCapacitorでネイティブアプリに変換 企業運用とマイグレーションの計画に使用する場合、__CAPGO_KEEP_0__ Enterpriseと接続してください Capgo Enterpriseの製品ワークフロー Ionic Enterprise Pluginの代替品の検討を含むCapgo Enterpriseの製品ワークフローを検討する場合 __CAPGO_KEEP_0__ Enterpriseの製品ワークフローを検討する場合 Ionic Enterprise プラグイン代替 Capgo 代替 for the product workflow in Capgo Alternatives, Capgo コンサルティング 製品ワークフローは Capgo コンサルティング Capgo プレミアムサポート 製品ワークフローは Capgo プレミアムサポート

Capacitor アプリのライブ アップデート

Capgoのバグが実際に生じた場合、Capgoを使用して修正を配信するのではなく、数日間待ってアプリストアの承認を待つのではなく、ユーザーはバックグラウンドで更新を受け取り、ネイティブの変更は通常のレビュー経路を通る。

Get Started Now

Latest from our Blog

Capgoは、プロフェッショナルなモバイルアプリを作成するために必要な最良の洞察を提供します。

Capacitorアプリで2方向のコミュニケーション
開発 モバイル +1
2025年4月26日

Capacitorアプリで2方向のコミュニケーション

__CAPGO_KEEP_0__のOTA更新の5つの一般的なミス
開発 セキュリティ +1
2025年4月13日

OTA更新の際に避けるべき5つの一般的なミス

モバイルアプリのライブ更新のための5つのセキュリティベストプラクティス
開発 モバイル +1
2025年1月14日

モバイルアプリのライブ更新のための5つのセキュリティベストプラクティス

ブログからすべてを参照