I have a huge issue with Webview 3. One of our dev upgraded it to webview 3 without using Ionic native webview plugin and it is working fine at the moment on Ionic 3 app. According to the doc it has breaking change like so
Replace any usages of window.Ionic.normalizeURL() with window.Ionic.WebView.convertFileSrc()
But that dev didn't do that too. But camera functionality is also working fine. i.e.
imageURI = normalizeURL(imageURI) is working fine on webview 3. Can you tell me what was this behavior? What kind of issues will this app have in the future?
This is his files:
package.json
{
"name": "amr",
"version": "3.0.1",
"author": "Ionic Framework",
"homepage": "http://ionicframework.com/",
"private": true,
"config": {
"ionic_copy": "./config/copy.config.js"
},
"scripts": {
"clean": "ionic-app-scripts clean",
"build": "ionic-app-scripts build",
"lint": "ionic-app-scripts lint",
"ionic:build": "ionic-app-scripts build",
"ionic:serve": "ionic-app-scripts serve"
},
"optionalDependencies": {
"ios-deploy": "^1.9.4"
},
"dependencies": {
"@agm/core": "^1.0.0-beta.2",
"@angular/common": "5.0.3",
"@angular/compiler": "5.0.3",
"@angular/compiler-cli": "5.0.3",
"@angular/core": "5.0.3",
"@angular/forms": "5.0.3",
"@angular/http": "5.0.3",
"@angular/platform-browser": "5.0.3",
"@angular/platform-browser-dynamic": "5.0.3",
"@ionic-native/app-version": "^4.18.0",
"@ionic-native/background-geolocation": "^4.15.0",
"@ionic-native/background-mode": "^4.8.0",
"@ionic-native/branch-io": "^4.15.0",
"@ionic-native/camera": "^4.5.2",
"@ionic-native/clipboard": "^4.9.1",
"@ionic-native/contacts": "^4.7.0",
"@ionic-native/core": "^4.14.0",
"@ionic-native/diagnostic": "^4.15.0",
"@ionic-native/document-viewer": "^4.15.0",
"@ionic-native/facebook": "^4.12.2",
"@ionic-native/file": "^4.5.2",
"@ionic-native/file-opener": "^4.11.0",
"@ionic-native/file-transfer": "^4.11.0",
"@ionic-native/geolocation": "^4.5.2",
"@ionic-native/google-maps": "^4.14.0",
"@ionic-native/image-resizer": "^4.7.0",
"@ionic-native/in-app-browser": "^4.12.0",
"@ionic-native/keyboard": "^4.11.0",
"@ionic-native/location-accuracy": "^4.5.2",
"@ionic-native/market": "^4.18.0",
"@ionic-native/mixpanel": "^4.15.0",
"@ionic-native/music-controls": "^4.8.0",
"@ionic-native/onesignal": "^4.15.0",
"@ionic-native/screen-orientation": "^4.11.0",
"@ionic-native/sms": "^4.15.0",
"@ionic-native/social-sharing": "^4.9.1",
"@ionic-native/splash-screen": "4.4.0",
"@ionic-native/status-bar": "4.4.0",
"@ionic/pro": "^1.0.20",
"@ionic/storage": "2.1.3",
"@types/node": "^10.12.18",
"@vimeo/player": "^2.6.3",
"angular-progress-bar": "^1.0.3",
"angular-svg-round-progressbar": "^2.0.0",
"angular2-google-place": "^2.0.2",
"angular2-jwt": "^0.2.3",
"angularfire2": "5.0.0-rc.6",
"animate.css": "^3.5.2",
"branch-cordova-sdk": "^3.1.5",
"com.synconset.imagepicker": "^2.1.10",
"cordova-android": "6.4.0",
"cordova-clipboard": "^1.2.1",
"cordova-custom-config": "^5.0.2",
"cordova-ios": "4.5.5",
"cordova-plugin-add-swift-support": "^1.7.1",
"cordova-plugin-app-version": "^0.1.9",
"cordova-plugin-background-mode": "git+https://github.com/katzer/cordova-plugin-background-mode.git",
"cordova-plugin-camera": "^4.0.3",
"cordova-plugin-contacts": "^3.0.1",
"cordova-plugin-device": "^2.0.2",
"cordova-plugin-document-viewer": "^0.9.10",
"cordova-plugin-facebook4": "^2.5.0",
"cordova-plugin-file": "^6.0.1",
"cordova-plugin-file-opener2": "^2.1.4",
"cordova-plugin-file-transfer": "^1.7.1",
"cordova-plugin-geolocation": "^4.0.1",
"cordova-plugin-googlemaps": "^2.4.6",
"cordova-plugin-googlemaps-sdk": "git+https://github.com/mapsplugin/cordova-plugin-googlemaps-sdk.git#2.6.0",
"cordova-plugin-inappbrowser": "^3.0.0",
"cordova-plugin-ionic-webview": "^3.0.0",
"cordova-plugin-market": "^1.2.0",
"cordova-plugin-mauron85-background-geolocation": "^2.3.6",
"cordova-plugin-mixpanel": "^4.5.2",
"cordova-plugin-music-controls": "^2.2.0",
"cordova-plugin-nativegeocoder": "^3.1.3",
"cordova-plugin-request-location-accuracy": "^2.2.3",
"cordova-plugin-screen-orientation": "^3.0.1",
"cordova-plugin-splashscreen": "^5.0.2",
"cordova-plugin-statusbar": "^2.4.2",
"cordova-plugin-whitelist": "^1.3.3",
"cordova-plugin-x-socialsharing": "^5.4.4",
"cordova-sms-plugin": "^0.1.13",
"cordova-sqlite-storage": "^2.6.0",
"cordova.plugins.diagnostic": "^4.0.10",
"css-animator": "^2.3.0",
"es6-promise-plugin": "^4.2.2",
"firebase": "4.8.2",
"google-maps": "^3.2.1",
"info.protonet.imageresizer": "^0.1.1",
"ionic-angular": "3.9.2",
"ionic-plugin-keyboard": "^2.2.1",
"ionic2-auto-complete": "^1.6.2-alpha",
"ionic2-google-places-autocomplete": "^1.0.2",
"ionicons": "3.0.0",
"jwt-decode": "^2.2.0",
"list": "1.0.0",
"moment": "^2.23.0",
"ng-lazyload-image": "3.4.2",
"ngx-slick": "^0.2.1",
"onesignal-cordova-plugin": "^2.4.6",
"promise-polyfill": "^8.0.0",
"pubnub": "^4.21.5",
"pubnub-angular2": "^1.3.1",
"raven-js": "^3.27.0",
"rxjs": "5.5.2",
"sw-toolbox": "3.6.0",
"tslib": "^1.9.3",
"zone.js": "0.8.18"
},
"devDependencies": {
"@ionic/app-scripts": "^3.2.1",
"@ionic/lab": "1.0.11",
"@types/googlemaps": "^3.30.16",
"typescript": "2.4.2"
},
"description": "An Ionic project",
"cordova": {
"plugins": {
"ionic-plugin-keyboard": {},
"cordova-plugin-whitelist": {},
"cordova-plugin-device": {},
"cordova-plugin-camera": {
"CAMERA_USAGE_DESCRIPTION": "Upload profile pic",
"PHOTOLIBRARY_USAGE_DESCRIPTION": "Upload profile pic",
"PHOTO_LIBRARY_USAGE_DESCRIPTION": "App would like to access the library."
},
"cordova-plugin-file": {},
"cordova-plugin-file-transfer": {},
"cordova-plugin-geolocation": {
"GEOLOCATION_USAGE_DESCRIPTION": "To locate your Location"
},
"cordova-plugin-contacts": {
"CONTACTS_USAGE_DESCRIPTION": "To invite Friends"
},
"cordova-plugin-splashscreen": {},
"cordova-plugin-request-location-accuracy": {},
"cordova-plugin-statusbar": {},
"info.protonet.imageresizer": {},
"cordova-sqlite-storage": {},
"cordova-plugin-ionic-webview": {},
"cordova-plugin-music-controls": {},
"cordova-plugin-background-mode": {},
"cordova-clipboard": {},
"cordova-plugin-x-socialsharing": {
"ANDROID_SUPPORT_V4_VERSION": "24.1.1+"
},
"cordova-plugin-screen-orientation": {},
"cordova-plugin-file-opener2": {
"ANDROID_SUPPORT_V4_VERSION": "27.+"
},
"cordova-plugin-app-version": {},
"cordova-plugin-inappbrowser": {},
"com.synconset.imagepicker": {
"PHOTOLIBRARY_USAGE_DESCRIPTION": "App would like to access the library.",
"PHOTO_LIBRARY_USAGE_DESCRIPTION": "App would like to access the library."
},
"cordova-plugin-facebook4": {
"APP_ID": "22",
"APP_NAME": "You Are a CEO",
"FACEBOOK_ANDROID_SDK_VERSION": "4.+"
},
"cordova-plugin-mixpanel": {
"PLAY_SERVICES_VERSION": "+"
},
"cordova-plugin-document-viewer": {},
"cordova-plugin-googlemaps": {
"API_KEY_FOR_ANDROID": "rp0",
"API_KEY_FOR_IOS": "rp0",
"PLAY_SERVICES_VERSION": "15.0.1",
"ANDROID_SUPPORT_V4_VERSION": "27.+",
"LOCATION_WHEN_IN_USE_DESCRIPTION": "This app wants to get your location while this app runs only.",
"LOCATION_ALWAYS_USAGE_DESCRIPTION": "This app wants to get your location always, even this app runs in background."
},
"branch-cordova-sdk": {},
"cordova-plugin-mauron85-background-geolocation": {
"GOOGLE_PLAY_SERVICES_VERSION": "11+",
"ANDROID_SUPPORT_LIBRARY_VERSION": "23+",
"ICON": "@mipmap/icon",
"SMALL_ICON": "@mipmap/icon",
"ACCOUNT_NAME": "@string/app_name",
"ACCOUNT_LABEL": "@string/app_name",
"ACCOUNT_TYPE": "$PACKAGE_NAME.account",
"CONTENT_AUTHORITY": "$PACKAGE_NAME",
"ALWAYS_USAGE_DESCRIPTION": "This app always requires location tracking"
},
"cordova.plugins.diagnostic": {},
"cordova-sms-plugin": {},
"cordova-plugin-nativegeocoder": {
"LOCATION_WHEN_IN_USE_DESCRIPTION": "Use geocoder service"
},
"onesignal-cordova-plugin": {},
"cordova-custom-config": {},
"cordova-plugin-market": {}
},
"cordova-plugin-ionic": {
"APP_ID": "2",
"CHANNEL_NAME": "Production",
"UPDATE_METHOD": "background",
"MAX_STORE": "2"
},
"cordova-plugin-ionic-webview": {},
"platforms": [
"ios",
"android"
]
},
"platforms": [
"android",
"ios"
]
}
config.xml
<?xml version='1.0' encoding='utf-8'?>
<widget id="mobile" version="4.5.32" versionCode="4.5.32" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0">
<name>You</name>
<description>of you.</description>
<author email="ww.com" href="http://w.com/">You</author>
<access origin="*" />
<allow-intent href="http://*/*" />
<allow-intent href="https://*/*" />
<allow-intent href="tel:*" />
<allow-intent href="sms:*" />
<allow-intent href="mailto:*" />
<allow-intent href="geo:*" />
<allow-navigation href="*" />
<preference name="ScrollEnabled" value="false" />
<preference name="SplashMaintainAspectRatio" value="true" />
<preference name="FadeSplashScreenDuration" value="300" />
<preference name="SplashShowOnlyFirstTime" value="false" />
<preference name="SplashScreen" value="screen" />
<preference name="StatusBarOverlaysWebView" value="false" />
<preference name="StatusBarBackgroundColor" value="#000000" />
<preference name="StatusBarStyle" value="lightcontent" />
<preference name="LoadUrlTimeoutValue" value="30000" />
<preference name="ShowSplashScreenSpinner" value="false" />
<preference name="SplashScreenDelay" value="2000" />
<preference name="webviewbounce" value="false" />
<preference name="UIWebViewBounce" value="false" />
<preference name="DisallowOverscroll" value="true" />
<preference name="android-minSdkVersion" value="19" />
<preference name="BackupWebStorage" value="none" />
<preference name="orientation" value="portrait" />
<preference name="AllowInlineMediaPlayback" value="true" />
<platform name="android">
<allow-intent href="market:*" />
<icon density="ldpi" src="resources/android/icon/drawable-ldpi-icon.png" />
<icon density="mdpi" src="resources/android/icon/drawable-mdpi-icon.png" />
<icon density="hdpi" src="resources/android/icon/drawable-hdpi-icon.png" />
<icon density="xhdpi" src="resources/android/icon/drawable-xhdpi-icon.png" />
<icon density="xxhdpi" src="resources/android/icon/drawable-xxhdpi-icon.png" />
<icon density="xxxhdpi" src="resources/android/icon/drawable-xxxhdpi-icon.png" />
<splash density="land-ldpi" src="resources/android/splash/drawable-land-ldpi-screen.png" />
<splash density="land-mdpi" src="resources/android/splash/drawable-land-mdpi-screen.png" />
<splash density="land-hdpi" src="resources/android/splash/drawable-land-hdpi-screen.png" />
<splash density="land-xhdpi" src="resources/android/splash/drawable-land-xhdpi-screen.png" />
<splash density="land-xxhdpi" src="resources/android/splash/drawable-land-xxhdpi-screen.png" />
<splash density="land-xxxhdpi" src="resources/android/splash/drawable-land-xxxhdpi-screen.png" />
<splash density="port-ldpi" src="resources/android/splash/drawable-port-ldpi-screen.png" />
<splash density="port-mdpi" src="resources/android/splash/drawable-port-mdpi-screen.png" />
<splash density="port-hdpi" src="resources/android/splash/drawable-port-hdpi-screen.png" />
<splash density="port-xhdpi" src="resources/android/splash/drawable-port-xhdpi-screen.png" />
<splash density="port-xxhdpi" src="resources/android/splash/drawable-port-xxhdpi-screen.png" />
<splash density="port-xxxhdpi" src="resources/android/splash/drawable-port-xxxhdpi-screen.png" />
<preference name="AndroidPersistentFileLocation" value="Compatibility" />
<preference name="AndroidExtraFilesystems" value="sdcard,cache" />
</platform>
<platform name="ios">
<config-file parent="NSPhotoLibraryAddUsageDescription" platform="ios" target="*-Info.plist">
<string>You can upload your profile picture using your Photo Library</string>
</config-file>
<config-file parent="NSCameraUsageDescription" platform="ios" target="*-Info.plist">
<string>You can upload your profile picture using your camera</string>
</config-file>
<config-file parent="NSContactsUsageDescription" target="*-Info.plist">
<string>To invite Friends </string>
</config-file>
<preference default="This app needs contact access" name="CONTACTS_USAGE_DESCRIPTION" />
<allow-intent href="itms:*" />
<allow-intent href="itms-apps:*" />
<icon height="57" src="resources/ios/icon/icon.png" width="57" />
<icon height="114" src="resources/ios/icon/[email protected]" width="114" />
<icon height="40" src="resources/ios/icon/icon-40.png" width="40" />
<icon height="80" src="resources/ios/icon/[email protected]" width="80" />
<icon height="120" src="resources/ios/icon/[email protected]" width="120" />
<icon height="50" src="resources/ios/icon/icon-50.png" width="50" />
<icon height="100" src="resources/ios/icon/[email protected]" width="100" />
<icon height="60" src="resources/ios/icon/icon-60.png" width="60" />
<icon height="120" src="resources/ios/icon/[email protected]" width="120" />
<icon height="180" src="resources/ios/icon/[email protected]" width="180" />
<icon height="72" src="resources/ios/icon/icon-72.png" width="72" />
<icon height="144" src="resources/ios/icon/[email protected]" width="144" />
<icon height="76" src="resources/ios/icon/icon-76.png" width="76" />
<icon height="152" src="resources/ios/icon/[email protected]" width="152" />
<icon height="167" src="resources/ios/icon/[email protected]" width="167" />
<icon height="29" src="resources/ios/icon/icon-small.png" width="29" />
<icon height="58" src="resources/ios/icon/[email protected]" width="58" />
<icon height="87" src="resources/ios/icon/[email protected]" width="87" />
<icon height="1024" src="resources/ios/icon/icon-1024.png" width="1024" />
<splash height="1136" src="resources/ios/splash/Default-568h@2x~iphone.png" width="640" />
<splash height="1334" src="resources/ios/splash/Default-667h.png" width="750" />
<splash height="2208" src="resources/ios/splash/Default-736h.png" width="1242" />
<splash height="1242" src="resources/ios/splash/Default-Landscape-736h.png" width="2208" />
<splash height="1536" src="resources/ios/splash/Default-Landscape@2x~ipad.png" width="2048" />
<splash height="2048" src="resources/ios/splash/Default-Landscape@~ipadpro.png" width="2732" />
<splash height="768" src="resources/ios/splash/Default-Landscape~ipad.png" width="1024" />
<splash height="2048" src="resources/ios/splash/Default-Portrait@2x~ipad.png" width="1536" />
<splash height="2732" src="resources/ios/splash/Default-Portrait@~ipadpro.png" width="2048" />
<splash height="1024" src="resources/ios/splash/Default-Portrait~ipad.png" width="768" />
<splash height="960" src="resources/ios/splash/Default@2x~iphone.png" width="640" />
<splash height="480" src="resources/ios/splash/Default~iphone.png" width="320" />
<splash height="2732" src="resources/ios/splash/Default@2x~universal~anyany.png" width="2732" />
<preference name="iosPersistentFileLocation" value="Compatibility" />
<custom-config-file parent="UIStatusBarHidden" platform="ios" target="*-Info.plist">
<true />
</custom-config-file>
<custom-config-file parent="UIViewControllerBasedStatusBarAppearance" platform="ios" target="*-Info.plist">
<false />
</custom-config-file>
</platform>
<edit-config file="*-Info.plist" mode="merge" target="NSLocationWhenInUseUsageDescription">
<string>need location access to find things nearby</string>
</edit-config>
<edit-config file="*-Info.plist" mode="merge" target="NSContactsUsageDescription">
<string>need contacts access to search friends</string>
</edit-config>
<edit-config file="*-Info.plist" mode="merge" target="NSCameraUsageDescription">
<string>need camera access to take pictures</string>
</edit-config>
<edit-config file="*-Info.plist" mode="merge" target="NSPhotoLibraryUsageDescription">
<string>need photo library access to get pictures from there</string>
</edit-config>
<edit-config file="*-Info.plist" mode="merge" target="NSPhotoLibraryAddUsageDescription">
<string>need photo library access to save pictures there</string>
</edit-config>
<plugin name="cordova-sqlite-storage" spec="^2.5.0" />
<plugin name="cordova-plugin-ionic-webview" spec="^3.0.0" />
<plugin name="cordova-plugin-music-controls" spec="^2.1.4" />
<plugin name="cordova-plugin-x-socialsharing" spec="^5.4.1" />
<plugin name="cordova-plugin-screen-orientation" spec="^3.0.1" />
<plugin name="cordova-plugin-file-opener2" spec="^2.0.19" />
<plugin name="cordova-plugin-app-version" spec="^0.1.9" />
<plugin name="cordova-plugin-inappbrowser" spec="^3.0.0" />
<plugin name="com.synconset.imagepicker" spec="^2.1.10">
<variable name="PHOTOLIBRARY_USAGE_DESCRIPTION" value="App would like to access the library." />
<variable name="PHOTO_LIBRARY_USAGE_DESCRIPTION" value="App would like to access the library." />
</plugin>
<plugin name="cordova-plugin-facebook4" spec="^2.5.0">
<variable name="APP_ID" value="22" />
<variable name="APP_NAME" value="You Are a CEO" />
<variable name="FACEBOOK_ANDROID_SDK_VERSION" value="4.+" />
</plugin>
<plugin name="onesignal-cordova-plugin" spec="^2.4.4" />
<plugin name="cordova-plugin-mixpanel" spec="^4.5.0">
<variable name="PLAY_SERVICES_VERSION" value="+" />
</plugin>
<plugin name="cordova-plugin-document-viewer" spec="^0.9.10" />
<plugin name="cordova-plugin-googlemaps" spec="^2.4.6">
<variable name="API_KEY_FOR_ANDROID" value="rp0" />
<variable name="API_KEY_FOR_IOS" value="p0" />
<variable name="PLAY_SERVICES_VERSION" value="15.0.1" />
<variable name="ANDROID_SUPPORT_V4_VERSION" value="27.+" />
</plugin>
<branch-config>
<branch-key value="32" />
<uri-scheme value="youareaceo" />
<link-domain value="lsa3.app.link" />
<android-testmode value="false" />
<ios-team-release value="2ZTVGV2634" />
</branch-config>
<plugin name="branch-cordova-sdk" spec="^3.1.0" />
<plugin name="cordova-plugin-mauron85-background-geolocation" spec="^2.3.6">
<variable name="GOOGLE_PLAY_SERVICES_VERSION" value="11+" />
<variable name="ANDROID_SUPPORT_LIBRARY_VERSION" value="23+" />
<variable name="ICON" value="@mipmap/icon" />
<variable name="SMALL_ICON" value="@mipmap/icon" />
<variable name="ACCOUNT_NAME" value="@string/app_name" />
<variable name="ACCOUNT_LABEL" value="@string/app_name" />
<variable name="ACCOUNT_TYPE" value="$PACKAGE_NAME.account" />
<variable name="CONTENT_AUTHORITY" value="$PACKAGE_NAME" />
</plugin>
<plugin name="cordova.plugins.diagnostic" spec="^4.0.10" />
<plugin name="cordova-sms-plugin" spec="^0.1.13" />
<plugin name="ionic-plugin-keyboard" spec="^2.2.1" />
<plugin name="cordova-plugin-device" spec="^2.0.2" />
<plugin name="cordova-clipboard" spec="^1.2.1" />
<plugin name="cordova-plugin-background-mode" spec="git+https://github.com/katzer/cordova-plugin-background-mode.git" />
<plugin name="cordova-plugin-camera" spec="^4.0.3">
<variable name="CAMERA_USAGE_DESCRIPTION" value="Upload profile pic" />
<variable name="PHOTOLIBRARY_USAGE_DESCRIPTION" value="Upload profile pic" />
<variable name="PHOTO_LIBRARY_USAGE_DESCRIPTION" value="App would like to access the library." />
</plugin>
<plugin name="cordova-plugin-file" spec="^6.0.1" />
<plugin name="cordova-plugin-file-transfer" spec="^1.7.1" />
<plugin name="cordova-plugin-geolocation" spec="^4.0.1">
<variable name="GEOLOCATION_USAGE_DESCRIPTION" value="To locate your Location" />
</plugin>
<plugin name="cordova-plugin-contacts" spec="^3.0.1">
<variable name="CONTACTS_USAGE_DESCRIPTION" value="To invite Friends" />
</plugin>
<plugin name="cordova-plugin-splashscreen" spec="^5.0.2" />
<plugin name="cordova-plugin-request-location-accuracy" spec="^2.2.3" />
<plugin name="cordova-plugin-statusbar" spec="^2.4.2" />
<plugin name="info.protonet.imageresizer" spec="^0.1.1" />
<plugin name="cordova-plugin-nativegeocoder" spec="^3.1.2" />
<plugin name="cordova-plugin-whitelist" spec="^1.3.3" />
<content src="index.html" />
<plugin name="cordova-plugin-market" spec="1.2.0" />
<engine name="ios" spec="4.5.5" />
<engine name="android" spec="6.4.0" />
</widget>
But when I followed this doc with ionic 3 app it shows this error on the device. Can I have any explanation for this behavior?
Git repo: https://github.com/Sampath-Lokuge/webview-3-with-ionic-3
normalizeURL calls convertFileSrc internally and shows a warning telling you it's deprecated. It will probably go away on next major release, so you are safe for now, but might not on next release.