Friday, 22 September, 2017 UTC
Summary
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 nightly
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
3.6.1-201709212234. 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.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 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 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
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:
rm -rf platforms
rm -rf plugins
ionic cordova plugin add https://github.com/jcesarmobile/cordova-plugin-statusbar\#patch-1
ionic cordova emulate ios
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