I am going through a nightmare regarding the UIWebView depreciation by Apple. I am in the process of identifying the cordova plugins and hopefully will find solutions. However, when I start from a blank ionic project, I still see references with respect to UIWebView and puzzled by it. Below please find the steps I followed:
1) ionic start testProject blank --cordova
2) Add the below into the ios section of the config.xml:
<preference name="WKWebViewOnly" value="true" />
<feature name="CDVWKWebViewEngine">
<param name="ios-package" value="CDVWKWebViewEngine" />
</feature>
<preference name="CordovaWebViewEngine" value="CDVWKWebViewEngine" />
3) ionic cordova prepare ios
4) cd platforms/ios
5) grep -Ri UIWebView
At this point, I see references at CDVUIWebViewEngine.m
If I were to install the following:
ionic cordova plugin add cordova-plugin-inappbrowser
npm install #ionic-native/in-app-browser
I also see references related to inappbrowser
I am not sure what is going on with such a basic structure. I'd grateful for any pointer you may have as I have been pulling my hairs for the last two days.
Below is my setup:
Ionic:
Ionic CLI : 6.7.0 (/home/doug/.npm-global/lib/node_modules/#ionic/cli)
Ionic Framework : #ionic/angular 5.1.1
#angular-devkit/build-angular : 0.901.7
#angular-devkit/schematics : 9.1.7
#angular/cli : 9.1.7
#ionic/angular-toolkit : 2.2.0
Cordova:
Cordova CLI : 9.0.0 (cordova-lib#9.0.1)
Cordova Platforms : ios 5.1.1
Cordova Plugins : cordova-plugin-ionic-keyboard 2.2.0, cordova-plugin-ionic-webview 4.2.1, (and 6 other plugins)
Utility:
cordova-res : 0.14.0
native-run (update available: 1.0.0) : 0.2.9
Thanks,
Doug
Related
Currently I am facing a strange issue with iOS Resources for ICON when switching between apps.
The app that I am currently working is a template downloaded from codecanyon, and I have changed the icon.png and splash.png to the client logo.
Everywhere else the Icon is working as it should, only when switching between apps, the screen where you swipe between apps, the small icon on the top left is not changed and it stays as it is.
What I am seeing right now is that when I generate icons with cordova-res, it generates 28 icons, these 3 icons are not being generated by cordova and i had to make them manually:
<icon height="29" src="resources/ios/icon/icon-small.png" width="29" />
<icon height="58" src="resources/ios/icon/icon-small#2x.png" width="58" />
<icon height="87" src="resources/ios/icon/icon-small#3x.png" width="87" />
I did generate them manually and put them on the resources/ios/icon location but still no success.
I also looked up on XCODE, the old icon is not there at all.
This is the ICON that is working on the home screen.
This is the old icon that is appearing on the top left.
IONIC INFO:
Ionic:
Ionic CLI : 6.12.3 (/Users/leotrinelmazi/.nvm/versions/node/v12.19.0/lib/node_modules/#ionic/cli)
Ionic Framework : #ionic/angular 5.8.5
#angular-devkit/build-angular : 0.803.29
#angular-devkit/schematics : 8.3.29
#angular/cli : 8.3.29
#ionic/angular-toolkit : 2.3.3
Cordova:
Cordova CLI : 9.0.0 (cordova-lib#9.0.1)
Cordova Platforms : ios 6.2.0
Cordova Plugins : cordova-plugin-ionic-keyboard 2.2.0, cordova-plugin-ionic-webview 4.2.1, (and 21 other plugins)
Utility:
cordova-res : 0.15.3
native-run (update available: 1.5.0) : 1.2.1
System:
ios-deploy : 1.11.3
ios-sim : 8.0.2
NodeJS : v12.19.0 (/Users/leotrinelmazi/.nvm/versions/node/v12.19.0/bin/node)
npm : 6.14.8
OS : macOS Big Sur
Xcode : Xcode 13.1 Build version 13A1030d
While I was already making this question, I was also looking around stackoverflow and ended up on some suggestions.
The solution for me was to uninstall the app (which have done multipletimes), shut down-turn on the iPhone (or restart) install the app again.
Now the icon is showing as it should.
I'm writing an app with cordova, Ionic v1, and AngularJS 1.5.3.
ionic info
Ionic:
ionic (Ionic CLI) : 4.10.3 (C:\Users\User\node_modules\ionic)
Ionic Framework : ionic1 1.3.5
#ionic/v1-toolkit : 1.0.22
Cordova:
cordova (Cordova CLI) : 8.1.2 (cordova-lib#8.1.1)
Cordova Platforms : android 8.1.0, ios 6.1.0, browser 5.0.4, windows 4.4.3
Cordova Plugins : cordova-plugin-ionic-webview 4.1.3, (and 17 other plugins)
System:
Android SDK Tools : 26.1.1 (C:\Users\User\Documents\Android\sdk)
NodeJS : v10.21.0 (C:\Program Files\nodejs\node.exe)
npm : 6.14.4
OS : Windows 10
In the past the new iPhone X came out and I added some code to make adustments for the "safe area".
css
body {
padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}
html
<meta name="viewport" content="viewport-fit=cover, width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
It was working for me for a long time.
However, I noticed that with the iPhone X and XR with iOS 13.6 I'm having issues with the "safe area".
As I'm using cordova-ios 6.1.0 I'm using WkWebView only.
<platform name="ios">
<preference name="WKWebViewOnly" value="true" />
I'm finding that I have to multiply the safe-area-inset-bottom by 4 to make any progress.
$calculated_padding_bottom: calc(env(safe-area-inset-bottom) * 2);
body {
padding: env(safe-area-inset-top) env(safe-area-inset-right) $calculated_padding_bottom env(safe-area-inset-left);
}
What could be wrong?
It has changed to "constant" as of 11.2
body {
padding: constant(safe-area-inset-top) constant(safe-area-inset-right) constant(safe-area- inset-bottom) constant(safe-area-inset-left);
}
Why are you using Ionic 1?
First, I've read the previous threads regarding this. And none of the solutions worked for me.
I have a Cordova-based app (not ionic) which is deployed on android and iOS. Everything works fine except that my translations doesn't work on iOS devices (neither simulator or real device). I'm using ngx-translate and it there's no problem in the browser or on Android-devices.
Here's my setup:
app.module.ts
TranslateModule.forRoot({
loader: {
provide: TranslateLoader,
useFactory: HttpLoaderFactory,
deps: [HttpClient]
}
}),
export function HttpLoaderFactory(http: HttpClient) {
return new TranslateHttpLoader(http, './assets/i18n/', '.json');
}
app.component.ts
import localeSv from '#angular/common/locales/sv';
ngOnInit(): {
this.translate.setDefaultLang('se');
registerLocaleData(localeSv);
}
Implementation:
<div translate>Click to close</div>
I've also tried using other translate styles like this.translateService.instant('something'), but it's not working.
After running cordova build ios I can see that my se.json file is in the correct folder: /assets/i18n/se.json
Version info:
"#ngx-translate/core": "^11.0.1",
"#ngx-translate/http-loader": "^4.0.0"
9.0.0 (cordova-lib#9.0.1)
ios 5.1.1
using WKWebViewOnly
allowing all http-intent and http-navigation in config.xml
Plugins:
cordova-plugin-customconfigparameters 3.0.0 "Custom Config Parameters"
cordova-plugin-device 2.0.3 "Device"
cordova-plugin-geolocation 4.0.2 "Geolocation"
cordova-plugin-splashscreen 5.0.3 "Splashscreen"
cordova-plugin-whitelist 1.3.4 "Whitelist"
cordova-plugin-wkwebview-engine 1.2.1 "Cordova WKWebView Engine"
onesignal-cordova-plugin 2.9.0 "OneSignal Push Notifications"
skwas-cordova-plugin-datetimepicker 2.1.1 "DateTime picker"
If anyone has any idea of what it could be I'd really appreciate the help. Been stuck on this for days.
If there's anyone else with the same problem. I solved it by loading my json file and setting the translation manually:
Import your .json file:
import jsonSe from '../assets/i18n/se.json';
Use the translation service to set language manually:
let jsonSeData = (jsonSe as any);
this.translate.setTranslation('se', jsonSeData, true);
try to add this lines to your config.xml if you are using wkwebview (cordova ios 6.0.0)
This can be found in the documentation: https://cordova.apache.org/announcements/2020/06/01/cordova-ios-release-6.0.0.html
<preference name="scheme" value="app" />
<preference name="hostname" value="localhost" />
I am getting Failed to load resource: The requested URL was not found on this server. error when run app in iOS emulate and device, it is working fine in Android.
I have updated iOS platform version but still getting same error. I have try with removing plugin but still same error. Check screenshot
I have setup new blank ionic 4 project and build ios it is working fine.
Ionic:
Ionic CLI : 5.4.1 (/usr/local/lib/node_modules/ionic)
Ionic Framework : #ionic/angular 4.8.1
#angular-devkit/build-angular : 0.13.9
#angular-devkit/schematics : 7.2.4
#angular/cli : 7.3.9
#ionic/angular-toolkit : 1.4.1
Capacitor:
Capacitor CLI : 1.0.0-beta.24
#capacitor/core : 1.0.0-beta.24
Cordova:
Cordova CLI : 9.0.0 (cordova-lib#9.0.1)
Cordova Platforms : android 8.1.0, ios 4.4.0
Cordova Plugins : cordova-plugin-ionic-webview 4.1.3, (and 15 other plugins)
Utility:
cordova-res : 0.6.0 (update available: 0.8.1)
native-run : 0.2.8 (update available: 0.2.9)
System:
Android SDK Tools : 26.1.1 (/Users/chetan/Library/Android/sdk)
ios-deploy : 1.9.4
NodeJS : v10.15.3 (/usr/local/bin/node)
npm : 6.4.1
OS : macOS Catalina
Xcode : Xcode 11.1 Build version 11A1027
I find at a solution for this problem, follow the next step:
1) close Xcode;
2) Make sure localhost is allowed in config.xml:
<allow-navigation href="http://localhost:8080/*" />
<preference name="CordovaWebViewEngine" value="CDVUIWebViewEngine" />
<platform name="ios">
...
Run
$ ionic cordova plugin remove cordova cordova-plugin-ionic-webview --save
$ rm -rf platforms/
$ rm -rf plugins/
inside of the tag platform ios
<feature name="CDVWKWebViewEngine">
<param name="ios-package" value="CDVWKWebViewEngine" />
</feature>
<preference name="CordovaWebViewEngine" value="CDVWKWebViewEngine" />
finally run:
ionic cordova build ios
I have found solution of the error
Adding WKWebView to your app
In order to add WKWebView, we need to add the plugin from the Ionic repository.
ionic cordova plugin add cordova-plugin-ionic-webview --save
If you already had the plugin installed, or were using a different version/fork, you’ll need to uninstall what you have first.
ionic cordova plugin rm cordova-plugin-WKWebView-engine
And that’s it! Once the plugin install is done, your next native build will include a faster, lighter, and more modern webview!
https://ionicframework.com/blog/wkwebview-for-all-a-new-webview-for-ionic/
I'm creating ios13 app in Ionic3.
But ios13Beta2 is not working in InAppBrowser.
so select param '_blank', this app is crash.
This is error detail.
[TraitCollection] Class _UIFullscreenPresentationController overrides
the -traitCollection getter, which is not supported. If you're trying
to override traits, you must use the appropriate API.
My ionic environment
Ionic:
Ionic CLI : 5.0.3
Ionic Framework : ionic-angular 3.9.6
#ionic/app-scripts : 3.2.4
Cordova:
Cordova CLI : 9.0.0 (cordova-lib#9.0.1)
Cordova Platforms : ios 5.0.1
Cordova Plugins : cordova-plugin-ionic-keyboard 2.1.3, cordova-plugin-ionic-webview 1.2.1, (and 14 other plugins)
Utility:
cordova-res : not installed
native-run : not installed
System:
ios-sim : 8.0.1
NodeJS : v12.4.0
npm : 6.9.0
OS : macOS Catalina
Xcode : Xcode 11.0 Build version 11M337n
I was facing the same issue
but finally got it resolved by downgrading the WKView
It's one of the temporary solutions until we are able to get a concrete one.
https://ionicframework.com/docs/v3/wkwebview/
you can do it by adding this in config.xml
<platform name="ios">
<preference name="CordovaWebViewEngine" value="CDVUIWebViewEngine" />