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
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.
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.
resources doesn’t yet generate this file, but you’ll
need it for submission. We are working on adding this to the
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
resources. This will generate the correct splashscreen
image and reference it in your
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:
rm -rf platformsrm -rf pluginsionic cordova plugin add https://github.com/jcesarmobile/cordova-plugin-statusbar\#patch-1ionic 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