Web View

Web Viewは、ネイティブデバイス上のWebアプリを強化します。

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

Cordovaについては、IonicがWeb View のプラグインを管理しています。このプラグインは、Ionic CLIを使用する際にデフォルトで提供されます。

Web Viewとは

IonicアプリはWeb技術をつかって構築され、フルスクリーンでの表示、Webブラウザのすべての機能が使えるWeb Viewを使ってレンダリングされます。

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

Ionic Web Viewプラグインは、最新のJavaScriptアプリケーションに特化しています。iOSとAndroidの両方で、アプリファイルは常に http:// プロトコルを使ってデバイス上で動作する最適化されたHTTPサーバーしてホストされます。

CORS

Web Views enforce CORS, so it's important that external services properly handle cross-origin requests. See the CORS FAQs for information on dealing with CORS in Ionic apps.

Fileプロトコル

CordovaとCapacitorのアプリはローカルの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 View plugin　がFile URIを変換するユーティリティ関数 window.Ionic.WebView.convertFileSrc() を提供しています。また、対応するIonic Nativeプラグインもあります。また、対応するIonic Nativeプラグインとして @awesome-cordova-plugins/ionic-webview があります。

実装

• iOS: WKWebView
• Android: Web View for Android