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.
http:// protocol with an optimized HTTP server that runs on the local device.
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.
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:
http://localhost:8080as an origin (see
- Allow any necessary HTTP methods (see
- Allow any necessary HTTP headers (see
- Ensure the server can handle preflight requests
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
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:
For Capacitor apps, the File URIs are converted automatically.