The Web View powers web apps in native devices. Ionic maintains a Web View plugin for apps integrated with Cordova. The plugin is provided by default when using the Ionic CLI. For apps integrated with Capacitor, the Web View is automatically provided.

What is a Web View?

Ionic apps are built using web technologies and are rendered using Web Views, which are a full screen and full-powered web browser.

Modern Web Views offer many built-in HTML5 APIs for hardware functionality such as cameras, sensors, GPS, speakers, and Bluetooth, but sometimes it may also be necessary to access platform-specific hardware APIs. In Ionic apps, hardware APIs can be accessed through a bridge layer, typically by using native plugins which expose JavaScript APIs.

The Ionic Web View plugin is specialized for modern JavaScript apps. For both iOS and Android, app files are always hosted using the http:// protocol with an optimized HTTP server that runs on the local device.

CORS

Web Views enforce CORS, so it's important that external services properly handle cross-origin requests. See enable-cors.org and MDN for more details.

If CORS is not implemented on the server, there is a native plugin that performs HTTP requests in the native layer which bypasses CORS.

Server Checklist

Many web frameworks may have support for CORS built in or as official add-ons, such as the cors package for Express. If this is not an option, the following must be implemented for CORS:

• Allow http://localhost:8080 as an origin (see Access-Control-Allow-Origin)
• Allow any necessary HTTP methods (see Access-Control-Allow-Methods)
• Allow any necessary HTTP headers (see Access-Control-Allow-Headers)
• Ensure the server can handle preflight requests

File Protocol

Cordova and Capacitor apps are hosted on a local HTTP server and are served with the http:// protocol. Some plugins, however, attempt to access device files via the file:// protocol. To avoid difficulties between http:// and file://, paths to device files must be rewritten to use the local HTTP server. For example, file:///path/to/device/file must be rewritten as http://<host>:<port>/<prefix>/path/to/device/file before being rendered in the app.

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.

For Capacitor apps, the File URIs are converted automatically.

Implementations

• iOS: WKWebView
• Android: Web View for Android