My app shows a white screen on the device but it correctly runs in the browser and emulator. I have tried a lot of solutions, but none have worked for me. I also use the ionic run ios -l -c command to see errors on the console log but it didn't show any errors.
Does anyone have any suggestions on how I could debug this issue?
IOS is deprecated the UIWebview in the latest version of the IOS.
Install the WKWebview plugin in ionic project using the following commnad
cordova-plugin-ionic-webview
Remove ios platform from ionic project using below command
ionic cordova platform rm ios
Open config.xml file of the ionic project and place the below line of code inside ios platform ( )
After steap you config.xml file code look like
<platform name="ios">
<preference name="WKWebViewOnly" value="true" />
<feature name="CDVWKWebViewEngine">
<param name="ios-package" value="CDVWKWebViewEngine" />
</feature>
Add Readd ios platform
ionic cordova platform add ios
I also faced same issue:
but you can replace your html page contents by <ion-content> with <ion-scroll>.. and also set overflow-scroll="false"
Another thing is check in your config.xml file that all this values are set
<preference name="SplashScreenDelay" value="2000"/>
<preference name="FadeSplashScreenDuration" value="2000"/>
<preference name="SplashScreen" value="screen"/>
<preference name="ShowSplashScreenSpinner" value="false"/>
<preference name="AutoHideSplashScreen" value="false" />
and also change in app.js file by adding this line
$ionicConfigProvider.views.swipeBackEnabled(false);
I faced a similar issue recently. Can you try performing a clean installation after deleting node_modules, platforms and plugins directories.
If it didn't work update your app.component.ts like this.
import { SplashScreen } from '#ionic-native/splash-screen';
export class MyApp {
...
constructor(... public splashScreen: SplashScreen, ...) {
this.initializeApp();
}
initializeApp() {
this.platform.ready().then(() => {
...
setTimeout(() => {
this.splashScreen.hide();
}, 2000);
...
});
}
In your config.xml set this perference.
<preference name="AutoHideSplashScreen" value="false" />
<preference name="SplashShowOnlyFirstTime" value="false" />
<preference name="ShowSplashScreen" value="false" />
<preference name="SplashScreenDelay" value="3000" />
<preference name="ShowSplashScreenSpinner" value="false" />
<preference name="FadeSplashScreen" value="false" />
I'm developing the push notification feature with FCM on my app, both for Android and iOS.
After I successuflly managed the push notifications on Android devices, I was trying to do the same on a iOS one.
So, I started creted the template, like I made for Android.
But, creating the template, I got an error:
Build for ios is started
Uploading iOS keys...
Completed
Uploading an application template...
Completed
Building status: pending (13 attempts)
Building status: error ("plugman install --platform ios --project /tmp/gimlet/2719563/project --plugin phonegap-plugin-push#1.9.0": Fetching plugin "phonegap-plugin-push#1.9.0" via npm
Installing "phonegap-plugin-push" at "1.9.0" for ios
Failed to install 'phonegap-plugin-push':undefined
undefined
)
Removing iOS keys...
Completed
Removing the application template...
Completed
Error: Building status: error ("plugman install --platform ios --project /tmp/gimlet/2719563/project --plugin phonegap-plugin-push#1.9.0": Fetching plugin "phonegap-plugin-push#1.9.0" via npm
Installing "phonegap-plugin-push" at "1.9.0" for ios
Failed to install 'phonegap-plugin-push':undefined
undefined
)
This is my config.xml file:
<widget id="com.devexpress.apptemplate" version="1.0" versionCode="1">
<name>ApplicationTemplate</name>
<description>Template</description>
<preference name="phonegap-version" value="cli-6.4.0" />
<preference name="permissions" value="none" />
<preference name="prerendered-icon" value="true" />
<preference name="android-windowSoftInputMode" value="adjustPan" />
<preference name="SplashScreen" value="splash" />
<preference name="SplashScreenDelay" value="60000" />
<preference name="AutoHideSplashScreen" value="false" />
<preference name="SplashShowOnlyFirstTime" value="false" />
<preference name="FadeSplashScreen" value="false" />
<preference name="ShowSplashScreenSpinner" value="false" />
<preference name="DisallowOverscroll" value="true" />
<preference name="StatusBarOverlaysWebView" value="false" />
<preference name="StatusBarBackgroundColor" value="#000000" />
<preference name="android-minSdkVersion" value="15" />
<preference name="android-targetSdkVersion" value="22" />
<plugin name="cordova-plugin-geolocation" />
<plugin name="cordova-plugin-splashscreen" onload="true" />
<plugin name="cordova-plugin-whitelist" />
<plugin name="cordova-plugin-ios-longpress-fix" />
<plugin name="cordova-plugin-statusbar" onload="true" />
<plugin name="phonegap-plugin-push" spec="1.9.0"/>
<access origin="*" />
</widget>
The config.xml file is in the project APP.mobile (not in APP.shared). I don't understand why I can build the native template for Android (and it works like a charm) and in iOS not.
UPDATE: Summarized all the steps here: https://programmingistheway.wordpress.com/2017/07/19/devextremephonegap-how-to-manage-push-notifications-with-fcm/
To use FCM you should use v2.x.x version of the plugin
Latest published version is v2.0.0-rc5, try with that, or even install from github with cordova plugin add https://github.com/phonegap/phonegap-plugin-push/
In your config.xml you have to add the google-services json and plist files like this
<platform name="android">
<resource-file src="google-services.json" target="google-services.json" />
</platform>
<platform name="ios">
<resource-file src="GoogleService-Info.plist" />
</platform>
In your other question you seem to be using github url, not sure why you went back to 1.9.0
I'm trying to make this config work with PhoneGap build server:
<gap:plugin name="com.phonegap.plugin.statusbar" version="1.1.0" />
<preference name="StatusBarOverlaysWebView" value="false" />
<preference name="StatusBarBackgroundColor" value="#7fbfd3" />
<preference name="StatusBarStyle" value="lightcontent" />
<feature name="StatusBar">
<param name="ios-package" value="CDVStatusBar" onload="true" />
</feature>
It works fine when I use cordova build but no luck with PhoneGap build server for now. Plugin is vailable from JS, color is applied but there is no additional space for status bar. I've tried both org.apache.cordova.statusbar and com.phonegap.plugin.statusbar. Any ideas how to make it work with PhoneGap build server?
Here is rest of installed plugins and preferences set
<preference name="permissions" value="none" />
<preference name="phonegap-version" value="3.7.0" />
<preference name="orientation" value="portrait" />
<preference name="target-device" value="universal" />
<preference name="fullscreen" value="true" />
<preference name="webviewbounce" value="true" />
<preference name="prerendered-icon" value="true" />
<preference name="stay-in-webview" value="false" />
<preference name="detect-data-types" value="true" />
<preference name="exit-on-suspend" value="false" />
<preference name="show-splash-screen-spinner" value="false" />
<preference name="disable-cursor" value="false" />
<preference name="android-minSdkVersion" value="19" />
<preference name="deployment-target" value="7.0" />
<preference name="android-installLocation" value="auto" />
<preference name="webviewbounce" value="false" />
<preference name="DisallowOverscroll" value="true" />
<gap:plugin name="org.apache.cordova.console" />
<gap:plugin name="org.apache.cordova.inappbrowser" />
<gap:plugin name="com.ququplay.websocket.websocket" version="0.1.0" />
<gap:plugin name="org.apache.cordova.device" />
<gap:plugin name="com.telerik.plugins.wkwebview" />
It won't work with Hydration if you're using that; otherwise it should, but not all preferences...
I've shared a similar issue to PGB support today. Here my ticket:
The plugin cordova-plugin-statusbar not works correctly on PGB.
<gap:plugin name="cordova-plugin-statusbar" source="npm" />
Some configuration preferences are not considered on build. I've setted on config.xml following common preferences:
<preference name="StatusBarOverlaysWebView" value="false" />
<preference name="StatusBarBackgroundColor" value="#0ff000" />
<preference name="StatusBarStyle" value="default" />
I've tested on phonegap CLI, it works fine.
On PGB the iOS StatusBar overlays the webview. But if I turn off the overlays programmatically using the plugin's API, it works fine, and I can see the green StatusBar as setted on preferences,... but not the style default (dark text) also setted on preferences.
I've also tested the previous plugin source but it raises same results:
<gap:plugin name="org.apache.cordova.statusbar" source="pgb" />
I've created an App HelloWorld only for that purpose: 1493471
FYI, I've also tested the deprecated Plugin com.phonegap.plugin.statusbar, it considers the StatusBarOverlaysWebView preference but not the others...
I was dealing with the same issue and i found out that WKWebView has some bugs with position css styling. Using de the default Webview will solve your overlay problem.
However, Im still trying to find a solution that works with WKWebView.
I have a problem with the StatusBar in iOS. My app ID is 234560, StatusBar version "0.1.4" as suggested (here) and phonegap version 3.6.3. I have granted the permissions (CDVStatusBar) and the preferences (StatusBarOverlaysWebView false, StatusBarBackgroundColor A7A7A7 and StatusBarStyle lightcontent) with no sucess. My bar still appears as if StatusBarOverlaysWebView would be set to true and the background color is also not applied. This is how the relevant preferences are set in my config.xml:
<preference name="phonegap-version" value="3.6.3" />
<preference name="orientation" value="both" />
<preference name="target-device" value="universal" />
<preference name="fullscreen" value="false" />
<preference name="webviewbounce" value="false" />
<preference name="stay-in-webview" value="true" />
<preference name="show-splash-screen-spinner" value="true" />
<gap:plugin name="org.apache.cordova.statusbar" version="0.1.4" />
<preference name="permissions" value="none" />
<feature name="Device">
<param name="ios-package" value="CDVDevice" />
</feature>
<feature name="StatusBar">
<param name="ios-package" value="CDVStatusBar" onload="true" />
</feature>
<preference name="StatusBarOverlaysWebView" value="false"/>
<preference name="StatusBarBackgroundColor" value="#A7A7A7"/>
<preference name="StatusBarStyle" value="lightcontent" />
I would love to have any assistance, I have been reading a lot of issues regarding to this topic but non of them were ussing this phonegap version. Thank you in advance!
I had the same problem, then I decided to remove the plugin and then add it again, it worked!!
The github site for the plugin says this which worked for me:
iOS Quirks:
Starting with iOS 11 you must include viewport-fit=cover in your index.html viewport meta tag if you want the status bar to overlay the webview:
<meta name="viewport" content="initial-scale=1, width=device-width, **viewport-fit=cover**">
I´m getting this error in XCode:
2013-08-23 14:36:18.284 Tell The DJ[14955:c07] ERROR: Plugin 'Device' not found, or is not a CDVPlugin. Check your plugin mapping in config.xml.
2013-08-23 14:36:18.284 Tell The DJ[14955:c07] -[CDVCommandQueue executePending] [Line 116] FAILED pluginJSON = [
"Device1096677259",
"Device",
"getDeviceInfo",
[
]
]
2013-08-23 14:36:18.285 Tell The DJ[14955:c07] CDVPlugin class CDVConnection (pluginName: NetworkStatus) does not exist.
2013-08-23 14:36:18.285 Tell The DJ[14955:c07] ERROR: Plugin 'NetworkStatus' not found, or is not a CDVPlugin. Check your plugin mapping in config.xml.
2013-08-23 14:36:18.285 Tell The DJ[14955:c07] -[CDVCommandQueue executePending] [Line 116] FAILED pluginJSON = [
"NetworkStatus1096677260",
"NetworkStatus",
"getConnectionInfo",
[
]
]
I installed Phonegap 3.0 with the Command Line Interface and paste my www files into the project folders. The app works fine but when i come to native functions like device ID, camera, network connections it fails and gets me this error. But I think my config.xml is right?
<?xml version='1.0' encoding='utf-8'?>
<widget id="io.cordova.helloCordova" version="2.0.0" xmlns="http://www.w3.org/ns/widgets">
<name>Hello Cordova</name>
<description>
A sample Apache Cordova application that responds to the deviceready event.
</description>
<author email="dev#cordova.apache.org" href="http://cordova.io">
Apache Cordova Team
</author>
<content src="index.html" />
<feature name="LocalStorage">
<param name="ios-package" value="CDVLocalStorage" />
</feature>
<access origin="http://dev.tellthedj.de" />
<preference name="KeyboardDisplayRequiresUserAction" value="true" />
<preference name="SuppressesIncrementalRendering" value="false" />
<preference name="UIWebViewBounce" value="true" />
<preference name="TopActivityIndicator" value="gray" />
<preference name="EnableLocation" value="false" />
<preference name="EnableViewportScale" value="false" />
<preference name="AutoHideSplashScreen" value="true" />
<preference name="ShowSplashScreenSpinner" value="true" />
<preference name="MediaPlaybackRequiresUserAction" value="false" />
<preference name="AllowInlineMediaPlayback" value="false" />
<preference name="OpenAllWhitelistURLsInWebView" value="false" />
<preference name="BackupWebStorage" value="cloud" />
<preference name="orientation" value="portrait" />
<preference name="webviewbounce" value="false" />
<preference name="prerendered-icon" value="true" />
<preference name="phonegap-version" value="3.0.0" />
<preference name="fullscreen" value="false" />
<preference name="stay-in-webview" value="false" />
<preference name="android-minSdkVersion" value="7" />
<preference name="android-installLocation" value="internalOnly" />
<preference name="target-device" value="universal" />
<preference name="autohide-splashscreen" value="true" />
<preference name="load-url-timeout" value="60000" />
<preference name="show-splashscreen-spinner" value="true" />
<preference name="show-splash-screen-spinner" value="true" />
<preference name="allow-inline-media-playback" value="false" />
<preference name="launch-mode" value="standard" />
<feature name="Media">
<param name="ios-package" value="CDVSound" />
</feature>
<feature name="Camera">
<param name="ios-package" value="CDVCamera" />
</feature>
<feature name="Console">
<param name="ios-package" value="CDVLogger" />
</feature>
<feature name="Device">
<param name="ios-package" value="CDVDevice" />
</feature>
<feature name="Notification">
<param name="ios-package" value="CDVNotification" />
</feature>
<feature name="File">
<param name="ios-package" value="CDVFile" />
</feature>
<feature name="FileTransfer">
<param name="ios-package" value="CDVFileTransfer" />
</feature>
<feature name="Geolocation">
<param name="ios-package" value="CDVLocation" />
</feature>
<feature name="Capture">
<param name="ios-package" value="CDVCapture" />
</feature>
<feature name="NetworkStatus">
<param name="ios-package" value="CDVConnection" />
</feature>
<feature name="SplashScreen">
<param name="ios-package" value="CDVSplashScreen" />
</feature>
<plugins>
<plugin name="Device" value="CDVDevice" />
</plugins>
</widget>
I was using PhoneGap 3.0/3.1 and was removing the local build folder before rebuilding (since I had to copy icons and stuff in a secondary build script). This broke my plugins and produced this same error message.
In the end I found I had to remove ./plugins/ios.json when removing ./platforms/ios to make sure the plugins were rebuilt.
Deleting the platforms/ios folder is not a solution for me as all manual customizations to the xcode project will be lost.
But there is a simple way around:
In XCode, goto Build Phases -> open the Compiled Sources dropdown.
Click + and add the missing plugin .m file that should be in your
Plugins directory (but is missing from the compiled sources).
This solution came from another stack overflow answer, here: https://stackoverflow.com/a/21148428/80254
Another alternative:
In xcode make sure the source files of the plugin has the 'target membership' settings set: In File-Explorer go to Plugins > CDVDevice.m and check if there is a tick next to your app name at "target membership" on the right side of xcode window. This actually does the same as the other solution but is a bit more convenient.
From here: https://stackoverflow.com/a/20576744/80254
I encountered the same issue. I have followed the solution given by Jeffrey Van Alstine. This is my script for building and testing an iOS app developed using Phonegap 3.0/3.1.
#!/bin/bash
echo "Killing xcode..."
kill $(ps aux | grep 'Xcode' | awk '{print $2}')
rm -r platforms/ios
rm plugins/ios.json
phonegap build ios
open platforms/ios/*.xcodeproj
Save it as a bash file, for example, ios.sh into your working directory (directory that contains www folder) and run ./ios.sh
This seems to be a known issue for 3.* versions
https://issues.apache.org/jira/browse/CB-4971
you can solve this by upgrading Phonegap to release 3.4.
Try reinstalling the plugin:
phonegap local plugin add https://git-wip-us.apache.org/repos/asf/cordova-plugin-device.git
I use Cordova 3.7 and I solved the problem with Kobkrit Viriyayudhakorn 's solution, BUT of course you need to use
cordova build ios
instead of
phonegap build ios
i think you need to use the correct config.xml
for me, it is Xcode project target folder config.xml, and not platform www folder
I have found a solution that worked for me. I was using with the Compass plugin and after adding the plugin I have noticed that the config.xml (plugin docs) says it should have
<feature name="Compass">
<param name="ios-package" value="**CDVLocation**" />
</feature>
while the ios.json in plugin has added
"config.xml": {
"/*": {
"<feature name=\"Compass\"><param name=\"ios-package\" value=\"**CDVCompass**\" /></feature>": 1,
"<feature name=\"Device\"><param name=\"ios-package\" value=\"CDVDevice\" /></feature>": 1
}
One of then refers to CDVCompass while the other CDVLocation ... changing the xml to CDVCompass did the trick and now the app is working.
I am so tired of removing and re-adding platforms for plugin issues! It seems like it is still a problem even now (2014/10) where if you add plugins to an app after adding platforms the plugin sometime does not get propagated down to the corresponding platform folders/etc. Note this seems to mainly affect iOS - not Android.
I think my solution is just an updated method of doing same thing bjunix posted earlier - but in XCode 6 to fix this sort of thing without removing/re-adding my platform I:
Expand my App/Plugins folder in the left project navigator panel
Click on each plugin file in the list that is currently in red text (one at time)
Jump to the right side (Utilities) panel and click the folder icon in the Identity and Type section to re-link it to the actual file (see screenshot below).
After doing the above my project finally builds.
When this happens, it seems the xcode npm package responsible for making changes to the pbxproj file sometimes leaves references to plugin files that have been removed. I have not tracked down under what exact circumstances this occurs, but it appears to happen from frequent plugin remove/add operations (to update a plugin for example).
I suspect that when a plugin is removed and the xcode npm package fails at its job, it is only able to remove the plugin file references from the PBXBuildFile section but no other sections, leaving the pbxproj in a broken state.
When the xcode npm package attempts to add the plugin file references again, it first checks if the references are already in pbxproj. It looks in the PBXFileReference section, and since it finds references to the plugin in there, aborts further processing, getting us nowhere.
My solution, albeit a hack when it comes down to it, is to force the xcode npm package to check the PBXBuildFile section instead. That section will be missing the references and in turn the plugin will be re-installed correctly.
Change pbxFileReferenceSection to pbxBuildFileSection on this line: https://github.com/alunny/node-xcode/blob/master/lib/pbxProject.js#L620
Re-install your plugins, and you should be good to go.
I my case After install Paypal Plugin I am facing issue.
I resolved its by add "PayPalMobileCordovaPlugin.m" in the Compile Source.
So you just need to add .m file in Compile source add it works for me.
Check Screenshot.
Hope its work for you
This can also happen if you have a plugin that is referenced but not installed. If you have tried the above solutions and can't find the referenced plugin's .m file it might be that the plugin isn't really installed.
I would check your plugins directory to be sure that there are files in it. If not, reinstall the plugin. I ran into this when I had a typo in the git repo when restoring plugins from the config.xml.
I resolved this issue by changing the "plugin" entry to a "feature" entry in the config.xml. (using PhoneGap 3.1/iOS). This is what the fix looked like:
<feature name="DGGeofencing">
<param name="ios-package" value="DGGeofencing"/>
</feature>
I solved this issue with complete reinstall of Node.js and Phonegap through the CLI Tool