導入
すでにProgressive Web Appを持っています。ブラウザで動作し、manifestがあり、オフラインサポートのためにサービスワーカーを使用しているかもしれません。アプリストア配布、ネイティブデバイスAPI、またはより良いオンボーディングフラネルが必要になった場合、Capacitor アプリに移行することは、フロントエンドを再構築するよりも速い場合が多い。
最大の利点は、ほとんどの既存のWeb code を保持できることです。ほとんどの場合、次のことを実行するだけで済みます。
- プロダクションWebアセットをビルドする
- 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.)
- __CAPGO_KEEP_0__ (for iOS, macOS only)
- Android Studio (for Android)
- iOS向けのApple Developerアカウントが必要です。iOSアプリを公開する場合
- Android向けのGoogle Play Developerアカウントが必要です。
ステップ 1: PWAをネイティブアプリにラッピングする前に、PWAを確認してください。
実行する前に、 bunx cap init確認してください。
- プロダクション用のビルドスクリプトがPWAに含まれていることを確認してください (例えば、
bun run build). - 確認してください。
dist,buildブラウザのみで動作することを前提としたハードコードされた絶対的なリダイレクトを削除してください。out). - 確認してください。
- モバイル WebView の動作とサービスワーカーの互換性を確認する:
- ユーザーにとって役立つ場合、オフラインサポートを維持する。
- ブラウザのみの API を使用しないようにする。これらは、埋め込まれた 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アプリ名、バンドル ID、Web 出力ディレクトリとともに、Capacitor init を実行する:
bunx cap init MyPWAApp com.example.my-pwa-app --web-dir distビルドフォルダが build (Create React App) または out (Next.js static export), 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/ フォルダを生成しました。 同期は、両方のプラットフォームにビルドされたWebアセットをコピーします。 android/ ステップ 5: Webアプリをビルドし、同期します
PWAをビルドし、Webアセットを同期します:
ネイティブプロジェクトを開いてください:
bun run build
bunx cap syncXcodeまたはAndroid Studioから、デバイスまたはエミュレータを接続し、実行してください。
bunx cap open ios
bunx cap open androidと
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 parity checks
提出前に:
- 両方のプラットフォームでテストする
/テストする - バージョン
- 未使用のWeb専用メタデータを削除する
- アプリの動作と矛盾する
- インストールのプロンプト
アプリの安全性とプライバシー設定を Capgo OTA更新を使用するアプリの場合、
リリースパイプラインをネイティブセーフな更新戦略と組み合わせて検討する
- Web app が綺麗にビルドされます (
bun run build) - Capacitor が正しく初期化されます
webDir bunx cap add iosそしてbunx cap add androidcompleted- Native アプリは実機で動作します
- ブラウザのみの code パスは、Native ビヘイビアーのためにゲートされます
- アップデート チャンネルとアプリ ストア アセットは設定されます
あなたはすでに、PWA をビルドする際に最も難しい作業のほとんどを実行していました。Capacitor にラッピングすることであなたは次のことが得られます:
- ストア ディストリビューション
- Native API にアクセス
- フル code 再構築なしで、より速い開発
- Web とモバイル チームのための、単一のデプロイ パス
このフローから始め、分析とユーザーフィードバックに基づいてネイティブアプリを一つずつ実装していきましょう。
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プレミアムサポート。
