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

導入

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

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

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

もしPWAがクリーンなルートとコンポーネントロジックを持っていたら、数時間で完了することができます。

前提条件

予定時間: 2-5 hours, depending on platform-specific features.

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

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

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

生産用のWebアプリが準備できていることを確認してください bun run build).
生産用のビルドスクリプトが用意されていることを確認してください(例えば dist, buildWeb出力フォルダが決定論的であることを確認してください(よく out).
、または
ブラウザのみのコンテキストを想定した絶対的なリダイレクトを削除してください。
- サービスワーカーの動作がモバイルWebViewsと互換性があることを確認してください
- オフラインサポートを維持することを検討してください。ユーザーにとって役に立つ場合
Confirm PWA install prompts and browser-specific UX still make sense. In a Capacitor app, app install prompts are usually not needed.

PWAのインストールプロンプトやブラウザ固有のUXがまだ意味をなしていることを確認してください。__CAPGO_KEEP_0__アプリでは、通常インストールプロンプトは必要ありません。

ステップ2: Webのみの動作を適応させる

ブラウザのプラットフォームチェックをインストールとプッシュプロンプト周辺に実行する:

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

__CAPGO_KEEP_0__ の基本的な設定を追加する

ステップ 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 (またはプラグインの選択)

CapgoでNativeアプリに変換するための新しいステップ

新しいネイティブプラグインをインストールする
プラグイン固有の設定を構成する
Run:

bunx cap sync

再構築して再実行する

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

提出前に

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

アプリが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__パスはネイティブ動作にゲートされます
And
Browser-only code paths are gated for native behavior
アップデートチャンネルとアプリストアアセットは設定されています。

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

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

このフローから始め、分析とユーザーフィードバックに基づいてネイティブに一つずつ反復してください。

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

あなたが使用している Transform Your PWAをCapacitorでネイティブアプリに変換する を利用してマイグレーションとエンタープライズオペレーションの計画を行い、__CAPGO_KEEP_0__ Enterpriseと接続する Capgo Enterprise for the product workflow in Capgo Enterprise, CapacitorでPWAをネイティブアプリに変換する Capacitorの製品ワークフローについては、Ionic Enterprise Plugin Alternativesで確認してください。 Capgo の代替手段 Capacitorの製品ワークフローにおけるCapgo Alternatives、 Capgo コンサルティング for the product workflow in Capgo Consulting, and Capgo プレミアムサポート for the product workflow in Capgo Premium Support.

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

導入