Transform Your PWA to a Native App with Capacitor

導入

すでにプログレッシブウェブアプリを持っています。ブラウザで動作し、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 (アンドロイド用)
Apple Developerアカウントが必要です。iOSアプリを公開する場合
Google Play Developerアカウントが必要です。Androidアプリの配布に

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

ページ/エリア: Capgo のページ。役割: UI ラベル。見られる場所: about.astro のページ。メッセージキー `about_how_step_label` (About How Step Label)。 bunx cap init実行する前に

、確認してください。Web アプリがプロダクション用に準備されています bun run build).
プロダクション用ビルドスクリプトが PWA に設定されていることを確認してください (例えば、 dist, build, or out).
、または
ブラウザのみのコンテキストを想定したハードコードされた絶対的なリダイレクトを削除してください。
- オフラインサポートを維持するには、ユーザーに役立つかどうかを確認する。
- ブラウザのみのAPIを使用しないようにする。エンビデッドウェブビュー内では利用できないため。
PWAのインストールプロンプトとブラウザ固有のUXはまだ意味があるかどうかを確認する。Capacitorアプリでは、通常、インストールプロンプトは必要ない。

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

ブラウザのみのロジックをゲートしながら、アプリのUIを維持する。

アプリの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: Initialize Capacitor in your PWA folder

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

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

Run Capacitor init with your app name, bundle ID, and web output directory:

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

既存のPWAルートから: build __CAPGO_KEEP_0__ initを実行する。アプリ名、バンドルID、ウェブ出力ディレクトリを指定する。 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:移行後のネイティブ拡張

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

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

各新しいネイティブプラグインについて:

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

bunx cap sync

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

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

提出前に:

両方のプラットフォームでデープリンクとルーティング（デープルートも含む）をテストしてください。/ ステータスバー、セーフエリア、オリエンテーションが正しく表示されることを確認してください。
アプリの動作に影響を与える可能性のある未使用のWeb専用メタデータを削除してください（例：インストールプロンプト）。
アプリのトランスポートセキュリティとプライバシー設定を、ポリシーに合わせて保ちましょう。
各プラットフォーム用にアプリアイコン/スプラッシュアセットを追加してください。
各プラットフォームごとにアプリアイコン/スプラッシュアセットを追加してください。

最終チェックリスト Capgo __CAPGO_KEEP_0__

最終チェックリスト

Webアプリが綺麗にビルドされることを確認してください。bun run build)
Capacitorを正しく初期化 webDir
bunx cap add ios そして bunx cap add android 完成
実機で動作するネイティブアプリ
ブラウザのみの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 migrationを計画し、企業運用を接続するために Capgo 企業版 Capacitor では、Capgo Enterprise の製品ワークフローで Ionic Enterprise Plugin の代替 Capacitorを使用したPWAをネイティブアプリに変換する Capgo の代替方法 Capacitorの製品ワークフローでCapgo代替案 Capgo コンサルティング for the product workflow in Capgo Consulting, and Capgo プレミアムサポート Capgo プレミアムサポートの製品ワークフローについて