capacitorでガワアプリを作る

capacitorとは

ionicチームが作成してるcordovaみたいなやつ。
内部でウェブブラウザ動いているでwebページをそのままネイティブアプリにすることができる。

ネイティブで実行したいことはプラグインを通して実行することができる。
主要なネイティブ機能はプラグインが提供されているのでネイティブを意識しないでアプリを作成することができる。

導入方法

npm install @capacitor/core @capacitor/cli
npx cap init

プロジェクトのルートフォルダに capacitor.cofig.ts が作成される

import { CapacitorConfig } from '@capacitor/cli';

const config: CapacitorConfig = {
  appId: 'tokyo.karaage.sushi',
  appName: 'karaage-ng-site',
  webDir: 'dist',
  bundledWebRuntime: false
};

export default config;

CapacitorConfig.webDir がビルドしたアプリフォルダになるので適宜変更しておく。

iOSのビルド

cocoapodを使うので別途インストールしておく

npm install @capacitor/ios
npx cap add ios

プロジェクトのルートフォルダに ios/ が作成される。
xcodeで ios/App/App.xcworkspace からプロジェクトを開く。

.gitignore に ios/ を追加しておく。

Androidのビルド

npm install @capacitor/android
npx cap add android

プロジェクトのルートフォルダに android/ が作成される。
android studioで android/ からプロジェクトを開く。

.gitignore に android/ を追加しておく。

感想

SPAで作ったアプリケーションをそのままネイティブアプリに移行できるので良い。
ただ ionic-router などを併用しないとスワイプバックなどのネイティブっぽい挙動がないので ionic を使ったほうがいい気がする。