Search docs/

Web View

Contents

Web Viewは、ネイティブデバイスでWebアプリケーションを表示することができます。Ionicは、Cordovaと統合されたWeb View pluginをメンテナンスしています。Ionic CLIを使用すると、プラグインがデフォルトで提供されます。Capacitorを利用している場合、Web Viewは自動的に提供されます。

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は CORS を強制するため、外部サービスがcross-originリクエストを正しく処理することが重要です。詳しくは enable-cors.orgMDN をご利用ください。

CORSがサーバーに実装されていない場合は、 CORSをバイパスするネイティブ層でHTTP要求を実行するa native pluginがあります。

サーバーチェックリスト

多くのWebフレームワークは、CORSをサポートするか、公式のアドオンがあります。例えば、Expressは cors パッケージが提供されています。これがもし存在しない場合、CORSのために以下を設定する必要があります。

  1. http://localhost:8080 をオリジンとして許可 (Access-Control-Allow-Origin参照)
  2. HTTP methodsを許可する必要があります (Access-Control-Allow-Methods参照)
  3. HTTP headersを許可する必要があります (Access-Control-Allow-Headers参照)
  4. サーバが preflight requests を処理できるようにする

Fileプロトコル

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

Cordovaアプリの場合、Ionic Web View plugin はファイルURLを変換するためのユーティリティ window.Ionic.WebView.convertFileSrc() があります。対応する @ionic-native/ionic-webview というIonic Nativeのプラグインもあります。

Capacitorアプリの場合、ファイルURIは自動的に変換されます:

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

Capacitor.convertFileSrc(filePath);

Implementations

Previous
Contributing
Next
Ionic Storage