Ionic Launch Event. September 28th 2021.

DocsプラグインCLI

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

Capacitor は、従来の Web と Progressive Web Apps を完全にサポートしています。実際、Capacitor を使用すると、最小限の作業で iOS や Android のアプリストアアプリの PWA バージョンを簡単に出荷することができます。

ブラウザサポート

Capacitor のコアとプラグインは ES2017 に対応しています。この新しい JavaScript 構文は、すべてのモダンブラウザ(iOS や Android の PWA を動かすものを含む)でサポートされていますが、IE11 では Babel などで追加の JavaScript 変換をしないと動作しません。

Web サポート付きのプラグインは、機能検出を行い、ブラウザが特定の Web API をサポートしていない場合は例外を throw します。

インストール

すでに Capacitor for iOS または Android で構築している場合は、追加のインストール手順はありません。

そうでない場合は、 Installation ガイドを参照してください。

Capacitor のモジュール化

多くのアプリは、JavaScript モジュールのインポートに対応したビルドシステムを持つフレームワークを使用しています。このような場合、@capacitor/core からインポートするか、プラグインをインポートすることで、Capacitor の JavaScript ランタイムがアプリに読み込まれます。

スクリプトを include して Capacitor を利用する

ビルドシステムやバンドルラ/モジュールローダーを使用していない Web アプリで Capacitor ランタイムを使用するには、以下のようにします。

  1. Capacitor の設定ファイル(/docs/v3/config)で、bundledWebRuntimetrueに設定する。
"bundledWebRuntime": true
  1. Capacitor のランタイムバンドル(capacitor.js)を Web assets ディレクトリにコピーする。
npx cap sync web
  1. index.html “に “capacitor.js “を他の JavaScript よりも先にインポートする。
<script src="capacitor.js"></script>
<script src="your/app.js"></script>

Going Live

Progressive Web App を公開する準備ができたら、Web アセットディレクトリの内容をアップロードします。

これでアプリの実行に必要なものがすべて揃いました!

Previous
<- トラブルシューティング
Next
プログレッシブウェブアプリ ->
Contribute ->