メインコンテンツへスキップ
バージョン: v8

Web View

Webビューは、ネイティブデバイスでWebアプリを動かすために必要です。

Webビューは、Capacitorと統合されたアプリに自動的に提供されます。

Cordovaの場合、IonicはWebビュープラグインを管理しています。このプラグインは、Ionic CLIを使用するとデフォルトで提供されます。

Webビューとは？​

IonicアプリはWeb技術を使用して構築され、フルスクリーンでフルパワーのWebブラウザであるWebビューを使用してレンダリングされます。

最新のWebビューは、カメラ、センサー、GPS、スピーカー、Bluetoothなどのハードウェア機能のための多くの組み込みHTML5 APIを提供していますが、プラットフォーム固有のハードウェアAPIにアクセスする必要がある場合もあります。Ionicアプリでは、ハードウェアAPIには通常、JavaScript APIを公開するネイティブプラグインを使用することで、ブリッジ層を介してアクセスできます。

Diagram illustrating the architecture of a Web View in Ionic apps, showing the bridge between native app components and web components.

Ionic Webビュープラグインは、最新のJavaScriptアプリ用に特化しています。iOSとAndroidの両方で、アプリファイルは常にローカルデバイスで実行される最適化されたHTTPサーバーを使用してhttp://プロトコルでホストされます。

CORS​

WebビューはCORSを強制するため、外部サービスがクロスオリジンリクエストを適切に処理することが重要です。IonicアプリでのCORSの処理については、CORS FAQを参照してください。

ファイルプロトコル​

CapacitorとCordovaアプリはローカルHTTPサーバーでホストされ、http://プロトコルで提供されます。ただし、一部のプラグインは、file://プロトコルを介してデバイスファイルにアクセスしようとします。http://とfile://の間の問題を回避するために、デバイスファイルへのパスは、ローカルHTTPサーバーを使用するように書き換える必要があります。たとえば、file:///path/to/device/fileは、アプリでレンダリングされる前に、http://<host>:<port>/<prefix>/path/to/device/fileとして書き換える必要があります。

Capacitorアプリの場合、ファイルURIを次のように変換します。

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

Capacitor.convertFileSrc(filePath);

Cordovaアプリの場合、Ionic Webビュープラグインは、ファイルURIを変換するためのユーティリティ関数window.Ionic.WebView.convertFileSrc()を提供しています。対応するIonic Nativeプラグインもあります: @awesome-cordova-plugins/ionic-webview。

実装​

目次

このページを編集