WebプロジェクトでのCapacitorの利用

Capacitor従来のWebアプリケーションとProgressive Web Appsを完全にサポートします。実際、Capacitorを使えば、iOSとAndroidのアプリストアアプリのPWAバージョンを最小限の作業で簡単にリリースできます。

インストール

Capacitorを使ってiOS、Android、Electronのアプリを作っている人は、すでにCapacitorをアプリにインストールしている可能性があります。Capacitorでは、web プラットフォームはあなたのアプリを動かすWebプロジェクトにすぎません!

Capacitorをまだインストールしていない場合は、続ける前に、Installation ガイドを参照ください。

CapacitorをModuleとして使う

一般的に、アプリをつくる時には、JavaScriptモジュールのインポートをサポートするビルドシステムを備えたフレームワークを使用します。 その場合は、アプリの上部に Capacitor をインポートすればOKです:

import { Capacitor } from '@capacitor/core';

プラグインを使用するには、 プラグイン をインポートして呼び出します。 実際に便利な機能を提供するのは、Webサポート付きのプラグインだけです。

import { Plugins } from '@capacitor/core';

const position = await Plugins.Geolocation.getCurrentPosition();

ScriptタグからCapacitorを利用する

ビルドシステムまたはバンドラー/モジュールローダーを使用していない WebアプリケーションでCapacitorコアを使用するには、capacitor.config.jsonbundledWebRuntimetrue に設定し、 指定したバージョンのCapacitor CoreをプロジェクトにコピーするようにCapacitorに指示してから、 index.htmlcapacitor.js をインポートする必要があります:

{
  "bundledWebRuntime": true
}

プロジェクトにコピーしてください。

npx cap copy web

index.htmlで、capacitor.jsをあなたのアプリのJSの前に読み込みます:

<script src="capacitor.js"></script>
<script src="your/app.js"></script>

アプリの開発

あなたはIonicのようなUIコンポーネントとビルドシステムを採用してるかもしれません。 その場合、Capacitorアプリでも、そのフレームワークのものを使ってください!

フレームワークを使用していない場合、CapacitorにはHTML5ルーティングをサポートする小さな開発サービスが付属しています。 これを使用するには、以下を実行してください:

npx cap serve

本番に反映する

Progressive Web Appを公開して、世界と共有する準備ができたら、Webディレクトリのコンテンツをアップロードします (例えば www/build/ フォルダです)。

これには、アプリケーションを実行するために必要なものがすべて含まれています!

Contributors

BackNext