diogo-cordova-plugin-ionic-webview
v0.0.1
Published
Ionic Web View Engine Plugin
Downloads
3
Readme
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
@ 4.x
, which uses the new features that may not work with all apps. See Requirements and Migrating to 4.x.
2.x documentation can be found here.
: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 when using http://
, https://
or a custom scheme. All ionic://
urls are whitelisted by the plugin.
Android Preferences
Preferences only available Android platform
Scheme
<preference name="Scheme" value="https" />
Default value is http
Configures the Scheme the app uses to load the content.
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
)
iOS Preferences
Preferences only available for iOS platform
iosScheme
<preference name="iosScheme" value="httpsionic" />
Default value is ionic
Configures the Scheme the app uses to load the content.
Values like http
, https
or file
are not valid and will use default value instead.
If you change it, you'll need to add a new allow-navigation
entry in the config.xml
for the configured scheme (i.e <allow-navigation href="httpsionic://*"/>
if iosScheme
is set to httpsionic
).
KeyboardAppearanceDark
<preference name="KeyboardAppearanceDark" value="false" />
Whether to use a dark styled keyboard on iOS
Plugin Requirements
- Cordova CLI: 7.1.0+
- iOS: iOS 11+ and
cordova-ios
4+ - Android: Android 4.4+ and
cordova-android
6.4+
Migrating to 4.x
Remove and re-add the Web View plugin:
cordova plugin rm cordova-plugin-ionic-webview cordova plugin add cordova-plugin-ionic-webview@latest
Apps are now served from HTTP on Android by default.
- The default origin for requests from the Android WebView is
http://localhost
. IfHostname
andScheme
preferences are set, then origin will beschemeValue://HostnameValue
.
- The default origin for requests from the Android WebView is
Apps are now served from
ionic://
scheme on iOS by default.- The default origin for requests from the iOS WebView is
ionic://localhost
. IfHostname
andiosScheme
preferences are set, then origin will beiosSchemeValue://HostnameValue
.
- The default origin for requests from the iOS WebView is
Replace any usages of
window.Ionic.normalizeURL()
withwindow.Ionic.WebView.convertFileSrc()
.For Ionic Angular projects, there is an Ionic Native wrapper:
npm install @ionic-native/ionic-webview@beta