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.

ionic-angular

The latest stable release of ionic-angular introduces compatibility for the iPhone X to make sure that your app looks great on this new device. To update to the latest release follow the instructions mentioned here. We are working on even more fixes for the next release to improve our compatibility for the iPhone X even further.

npm install ionic-angular@latest

Ionic 1

For those using Ionic for AngularJS (also known as Ionic 1), we just released 1.3.5 to address the iPhone X and safe regions. Follow these instructions to update to the latest release: https://github.com/ionic-team/ionic-v1/issues/317#issuecomment-339357499

bower install ionic-team/ionic-bower#1.3.5

# or npm

npm install ionic-angular@legacy

Viewport Fit

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

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.

cordova-plugin-statusbar

Update: The statusbar plugin PR has been merged in. Please install the latest stable version of the cordova statusbar.

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

Signup for the Ionic Newsletter to get the latest news and updates!