cordova-plugin-ionic-webview

Ionic Web View for Cordova

A Web View plugin for Cordova, focused on providing the highest performance experience for Ionic apps (but can be used with any Cordova app).

This plugin uses WKWebView on iOS and the latest evergreen webview on Android. Additionally, this plugin makes it easy to use HTML5 style routing that web developers expect for building single-page apps.

Note: This repo and its documentation are for cordova-plugin-ionic-webview @ 3.x, which uses the new features that may not work with all apps. See Requirements and Migrating to 3.x.

:book: Documentation: https://beta.ionicframework.com/docs/building/webview

:mega: Support/Questions? Please see our Support Page for general support questions. The issues on GitHub should be reserved for bug reports and feature requests.

:sparkling_heart: Want to contribute? Please see CONTRIBUTING.md.

Configuration

This plugin has several configuration options that can be set in config.xml.

Android and iOS Preferences

Preferences available for both iOS and Android

Hostname

<preference name="Hostname" value="app" />

Default value is localhost.

Example ionic://app on iOS, http://app on Android.

If you change it, you'll need to add a new allow-navigation entry in the config.xml for the configured url (i.e <allow-navigation href="http://app/*"/> if Hostname is set to app). This is only needed for the Android url as it uses http://, all ionic:// urls are whitelisted by the plugin.

Android Preferences

Preferences only available Android platform

MixedContentMode

<preference name="MixedContentMode" value="2" />

Configures the WebView's behavior when an origin attempts to load a resource from a different origin.

Default value is 0 (MIXED_CONTENT_ALWAYS_ALLOW), which allows loading resources from other origins.

Other possible values are 1 (MIXED_CONTENT_NEVER_ALLOW) and 2 (MIXED_CONTENT_COMPATIBILITY_MODE)

Android documentation

iOS Preferences

Preferences only available for iOS platform

WKSuspendInBackground

<preference name="WKSuspendInBackground" value="false" />

Set to false to stop WKWebView suspending in background too eagerly.

KeyboardAppearanceDark

<preference name="KeyboardAppearanceDark" value="false" />

Whether to use a dark styled keyboard on iOS

Plugin Requirements

• iOS: iOS 11+ and cordova-ios 4+
• Android: Android 4.4+ and cordova-android 6.4+

Migrating to 3.x

1. Remove and re-add the Web View plugin:

   cordova plugin rm cordova-plugin-ionic-webview
   cordova plugin add cordova-plugin-ionic-webview@latest
   

2. Apps are now served from HTTP on Android.

   • The default origin for requests from the Android WebView is http://localhost. If Hostname preference is set, then origin will be http://HostnameValue.

3. Apps are now served from ionic:// scheme on iOS.

   • The default origin for requests from the iOS WebView is ionic://localhost. If Hostname preference is set, then origin will be ionic://HostnameValue.

4. Replace any usages of window.Ionic.normalizeURL() with window.Ionic.WebView.convertFileSrc().

   • For Ionic Angular projects, there is an Ionic Native wrapper:

     npm install @ionic-native/ionic-webview@beta
     

Changelog

3.0.0 (2019-01-03)

Bug Fixes

• iOS: Remove unused code (#247) (bceb17a)

Features

• Allows configuration of Mixed Content Mode (#240) (486d412), closes #231
• Android: Implement ionic-file and ionic-content urls (#242) (8ef0c30), closes #204 #183
• iOS: Remove GCDWebServer (#244) (0dee0cf)
• WebViewLocalServer.java: return 404 error code when a local file is not found (#217) (f7a551e), closes #216

BREAKING CHANGES

• iOS: Sets deployment-target to 11, so will only work on iOS 11+

• Address changes

• changes the default from 1 (never) to 0 (always)

• WebViewLocalServer.java: Until now, the Android part of the plugin was returning a 200 http code even though the requested file didn't exist. This behavior was inconsistent with the historical behavior of the iOS webView. This change makes them both work in the same manner but introduces a breaking change for the current Android users that are expecting a 200 http code no matter what and are testing the not found error just by checking if the body is null.