I am upgrading my App to make it work on IOS11 and IPhone X.
Ionic has instructions for this at :
http://blog.ionicframework.com/ios-11-checklist/
It requires the use of WKWebView provided by Ionic. Trouble is, Meteor bundles its own WKWebView. How do I uninstall the Meteor WKWebView ?
Many Thanks,
Beemer
Running Meteor on iOS11 and iPhone X does not require use of Ionic’s version of WkWebView. Meteor’s version in Meteor 1.6.0.1 works fine, albeit with the customizations below. This was already discussed in Deploying on iPhone X.
Items 1 and 2 are already implemented in the upcoming Meteor 1.6.1 release. Items 3 and 4 are really application specific customizations so these will stay in your app after 1.6.1 is released.
Manually install cordova-plugin-statusbar@2.3.0 and cordova-plugin-splashscreen@4.1.0, which will override the use of the default 2.2.3 and 4.0.3 versions of these plugins.
Manually add <meta name="viewport" content="viewport-fit=cover> to your <head> tag.
Use iOS launch story board images instead of hardcoded launch screen images if you want your launch screen to cover the entire screen real estate. To do so remove all the iOS App.launchScreens directives from your mobile-config.js file and use App.appendToConfig to add the paths to your universal images instead:
App.appendToConfig(`
<splash src="../../../app/path/to/Default@2x~universal~anyany.png" />
<splash src="../../../app/path/to/Default@3x~universal~anyany.png" />
`);
Bonus!
cordova-plugin-camera or cordova-plugin-geolocation starting with iOS 10 you need to add app customized usage descriptions. I found a way to do this easily in your mobile-config.js file, see iOS geolocation message. I’ll be adding this info to the Meteor Guide soon.Thanks Skirunman, will give this a go.
About point (3) launch screen images, I use App.icons() and App.launchScreens() to configure the images for IOS and Android. Do I just now use them only for the Android images ? and use App.appendToConfig() to the IOS ones ? I assume so. Will give it a try.
Thanks again, Skirunman
I have followed the Instructions …and got the App to display properly in the IPhone X Simulator.
Thank you !!
The only problem left is the Splashscreen - a blank splashscreen is displayed.
I have specified the launch screen using App.appendToConfig()
When I run $ meteor add-platform ios
I get an error :
While preparing Cordova project for platform iOS: **
** Error: Source path does not exist: resources/splashes/Default@2x~universal~anyany.png
The source path is correct as if I change the filename, I don’t get that error. However, I will get a blank splashscreen. I am assuming Default@2x~universal~anyany.png is a naming convention.
App.appendToConfig(<splash src="resources/splashes/Default@2x~universal~anyany.png"/>);
In XCode, under “App Icons and Launch Images” - I have selected “CDVLaunchScreen” from the dropdown list. This step makes the App display in IPhone X correctly. Without this, there will be a gap between the status bar and the top of the App.
Now, I just need to get Meteor to recognise the file path “resources/splashes/Default@2x~universal~anyany.png”
Any help appreciated, Thank you!
You can read more on how Cordova deals with iOS splash screens.
I think you may need the Default@3x~universal~anyany.png image for iPhone X, but I’m not 100% certain.
It does sound like the path is wrong. If your Meteor app top directory is /myApp and the splash screen image is located at /myApp/resources/splashes/Default@2x~universal~anyany.png and config at /myApp/mobile-config.js try:
App.appendToConfig(`
<splash src="../../resources/splashes/Default@2x~universal~anyany.png" />
`);
One last thing, when you get this working you are going to see a white bar at the bottom of the splash screen when it first displays because of this bug in cordova-ios that is fixed in Meteor@1.6.1 in this pull request.
I have got it to work at last. Here are the steps in case others are stuck too.
I am using Meteor 1.6.0.1 and Ionic 1.3.5
Install cordova-plugin-statusbar and cordova-plugin-splashscreen
set the status bar overlay to false
if (window.StatusBar) {
StatusBar.overlaysWebView(false);
StatusBar.backgroundColorByHexString("#3182B0");
}
mobile-config.js
I kept the configurations for icons and splashscreen as they were originally. I had to add an entry under icon for “app_store”.
There is no need to add a config for IPhoneX as it makes use of the setting for “iphone_2x”.
I had to edit the splashscreen for “iphone_2x” as the display on IPhoneX was off center. (Need to investigate further)
let resourcePath = “resources”;
App.icons({
“app_store”: resourcePath + “/icons/icon-1024.png”, // 1024
"iphone_2x": resourcePath + “/icons/iphone_2x.png”, // 120x120
"iphone_3x": resourcePath + “/icons/iphone_3x.png”, // 180x180
"ipad": resourcePath + “/icons/ipad.png”, // 76x76
"ipad_2x": resourcePath + “/icons/ipad_2x.png”, // 152x152
"ipad_pro": resourcePath + “/icons/ipad_pro.png”, // 167x167
"ios_settings": resourcePath + “/icons/ios_settings.png”, // 29x29
"ios_settings_2x": resourcePath + “/icons/ios_settings_2x.png”, // 58x58
"ios_settings_3x": resourcePath + “/icons/ios_settings_3x.png”, // 87x87
"ios_spotlight": resourcePath + “/icons/ios_spotlight.png”, // 40x40
"ios_spotlight_2x": resourcePath + “/icons/ios_spotlight_2x.png”, // 80x80
"android_mdpi": resourcePath + “/icons/android_mdpi.png”, // 48x48
"android_hdpi": resourcePath + “/icons/android_hdpi.png”, // 72x72
"android_xhdpi": resourcePath + “/icons/android_xhdpi.png”, // 96x96
"android_xxhdpi": resourcePath + “/icons/android_xxhdpi.png”, // 144x144
"android_xxxhdpi": resourcePath + “/icons/android_xxxhdpi.png” // 192x192
});
App.launchScreens({
“iphone_2x”: “resources/splashes/iphone_2x.png”, // 640x490
"iphone5": “resources/splashes/iphone5.png”, // 640x1136
"iphone6": “resources/splashes/iphone6.png”, // 750x1334
"iphone6p_portrait": “resources/splashes/iphone6p_portrait.png”, // 2208x1242
"iphone6p_landscape": “resources/splashes/iphone6p_landscape.png”, // 2208x1242
"ipad_portrait": “resources/splashes/ipad_portrait.png”, // 768x1024
"ipad_portrait_2x": “resources/splashes/ipad_portrait_2x.png”, // 1536x2048
"ipad_landscape": “resources/splashes/ipad_landscape.png”, // 1024x768
"ipad_landscape_2x": “resources/splashes/ipad_landscape_2x.png”, // 2048x1536
"android_mdpi_portrait": “resources/splashes/android_mdpi_portrait.png”, // 320x480
"android_mdpi_landscape": “resources/splashes/android_mdpi_landscape.png”, // 480x320
"android_hdpi_portrait": “resources/splashes/android_hdpi_portrait.png”, // 480x800
"android_hdpi_landscape": “resources/splashes/android_hdpi_landscape.png”, // 800x480
"android_xhdpi_portrait": “resources/splashes/android_xhdpi_portrait.png”, // 720x1280
"android_xhdpi_landscape": “resources/splashes/android_xhdpi_landscape.png”, // 1280x720
"android_xxhdpi_portrait": “resources/splashes/android_xxhdpi_portrait.png”, // 1080x1440
"android_xxhdpi_landscape": “resources/splashes/android_xxhdpi_landscape.png” // 1440x1080
});
I did not have to use the following :
App.appendToConfig(<splash src="../../../app/path/to/Default@2x~universal~anyany.png" /> <splash src="../../../app/path/to/Default@3x~universal~anyany.png" />);
Hope this helps.