Getting your Ionic apps updated for iOS 11 is easy. There are a few things you need to do and some steps are different depending on whether you’re using UIWebView or WKWebView.
Note: if you don’t push a new build then your apps will work the same as they always have. These changes are required for apps doing updates for iOS 11 using Xcode 9.
The latest nightly of ionic-angular introduces compatibility for the iPhone X to make sure that your app looks great on this new device. To install the latest nightly run
npm install [email protected] --save. These fixes for the iPhone X will also be in the next stable release of ionic-angular so no fear in updating when it comes out.
The first change is to make sure you update your viewport meta tag in your
index.html to add the
viewport-fit=cover field. This ensures the webview takes up the full size of the screen. The new default is to stick the webview in the new safe regions which is not what you want for Ionic/Cordova apps:
<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">
This change has been made to the base starter project for Ionic 1.x and 2.x and above, so new projects are covered.
Learn more about new safe regions in iOS 11.
WKWebView will soon be the default for all Ionic apps running on iOS, before the release of the iPhone X. However, many are using it today.
This week we pushed a number of fixes to WKWebView fix padding issues, an issue with videos, and some smaller feature requests. Please update your plugin to the new version to try it.
If you aren’t using WKWebView yet, we suggest trying it today. We will be moving to make it the default given iPhone X and better support for safe regions. For installation instructions check out the readme here.
New Icon and Splash
Xcode needs a 1024×1024 sized icon for submission.
ionic cordova resources doesn’t yet generate this file, but you’ll need it for submission. We are working on adding this to the resources generator.
Additionally, to support iPhone X fullscreen, a new splashscreen image needs to be provided. For an existing project you will need to run
npm install -g ionic to get the latest version of the cli, and then run
ionic cordova resources. This will generate the correct splashscreen image and reference it in your
config.xml automatically for you. For new projects, you dont need to do anything, the correct setup is already built in.
There is currently a PR open to update the cordova statusbar plugin but it has not been merged yet. We are expecting this to be merged very soon, but in the meantime you can install the plugin with that PR automatically by running the following commands:
ionic cordova plugin rm cordova-plugin-statusbar ionic cordova plugin add https://github.com/apache/cordova-plugin-statusbar.git
If you follow the above instructions and are having problems deploying to a simulator or device, open the
platforms/ios/myapp.xcodeproject and hit the play button in the top left corner Xcode.
Report an issue
Notice anything weird or out of place? Please file an issue and reference iOS 11 and this blog post: https://github.com/ionic-team/ionic/issues/new