メインコンテンツまでスキップ
バージョン: v7

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 の設定ファイル(/main/reference/config.md) で、bundledWebRuntimeをtrueに設定する。
"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 アセットディレクトリの内容をアップロードします。

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

Contents

このページを編集