Search docs/

Web View

Web Views power web apps on native devices.

The Web View is automatically provided for apps integrated with Capacitor.

For Cordova, Ionic maintains a Web View plugin. The plugin is provided by default when using the Ionic CLI.

Web Viewとは

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

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

webview architecture

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 に書き換えなければなりません。

For Capacitor apps, convert file URIs like so:

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

Capacitor.convertFileSrc(filePath);
CopyCopied

For Cordova apps, the Ionic Web View plugin provides a utility function for converting File URIs: window.Ionic.WebView.convertFileSrc(). There is also a corresponding Ionic Native plugin: @ionic-native/ionic-webview.

Implementations

Previous
Cross Platform
Next
What are PWAs?