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**">
Related
I'm developing a hybrid mobile app using PhoneGap as a build tool.
Enviroment:
Visual Studio 2015
DevExteme library
PhoneGap cli version 8.0.0
Cordova iOS version 5.0.0
Plugin added: Cordova Support Google Services and Cordova Plugin Firebase Analytics
Development certificate for iOS unlocked on my PhoneGap account
Steps:
Build a PhoneGap Zip.
Upload the code on PhoneGap account.
Build the app.
The problem: PhoneGap doesn't show iOS build, but only Android (which works perfectly on device)
What am I doing wrong?
Thank you in advance,
Sara
Edit: 2019-03-07
As requested, I add config.xml.
<widget id="com.devexpress.apptemplate" version="1.0" versionCode="1">
<name>ApplicationTemplate</name>
<description>Template</description>
<author email="email#sample.com" href="http://sample.com">Author</author>
<preference name="permissions" value="none" />
<preference name="prerendered-icon" value="true" />
<preference name="android-windowSoftInputMode" value="adjustResize" />
<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="14" />
<preference name="android-targetSdkVersion" value="22" />
<preference name="cordova-ios" version="5.0.0" />
<preference name="phonegap-version" value="cli-8.0.0" />
<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" />
<access origin="*" />
<plugin name="cordova-plugin-inappbrowser" source="npm"></plugin>
<platform name="ios">
<resource-file src="GoogleService-Info.plist" />
</platform>
<plugin name ="cordova-support-google-services" />
<plugin name ="cordova-plugin-firebase-analytics" />
</widget>
I'm working on an iOS (8 and 9) app. I'm using phonegap build to pack everything up and phonegap desktop along with phonegap developer app to do some tests. My UI is already designed and everything looks fine when using the phonegap developer app as well as in mobile safari, but when i port it to my device, the UI looks blurry, including font, borders, divs, even, the status bar and keyboard.
Here's the correct view, using Phonegap app and mobile safari:
Good
And Here's the actual view when installed.:
Bad quality
I have set the viewport and scales but they do not affect the status bar nor the keyboard.
Here's my XML
<preference name="phonegap-version" value="3.7.0" />
<preference name="orientation" value="default" />
<platform name="ios">
<preference name="Orientation" value="all" />
</platform>
<preference name="fullscreen" value="true" />
<preference name="target-device" value="universal" />
<preference name="webviewbounce" value="true" />
<preference name="prerendered-icon" value="true" />
<preference name="stay-in-webview" value="true" />
<preference name="ios-statusbarstyle" value="lightcontent" />
<preference name="android-windowSoftInputMode" value="adjustPan" />
<preference name="ShowSplashScreenSpinner" 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="auto-hide-splash-screen" value="false" />
<preference name="SplashScreenDelay" value="5000" />
<preference name="EnableViewportScale" value="true" />
<preference name="TopActivityIndicator" value="gray" />
<preference name="KeyboardDisplayRequiresUserAction" value="false" />
<preference name="HideKeyboardFormAccessoryBar" value="true" />
<preference name="SuppressesIncrementalRendering" value="true" />
<preference name="android-minSdkVersion" value="18" />
<preference name="android-installLocation" value="internalOnly" />
<preference name="ErrorUrl" value="" />
<preference name="BackgroundColor" value="0x000000" />
<preference name="KeepRunning" value="true" />
<preference name="DisallowOverscroll" value="true" />
<preference name="LoadingDialog" value="" />
<preference name="LoadUrlTimeoutValue" value="20000" />
<preference name="disable-cursor" value="true" />
<gap:config-file platform="ios" parent="UIViewControllerBasedStatusBarAppearance" overwrite="true">
<false/>
</gap:config-file>
<content src="index.html" />
<gap:platform name="ios" />
<gap:platform name="android" />
I have to mention that using a newer version of CLI does not solve the issue.
Here's my meta tag
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width" />
Phonegap desktop's example app is also showing this behaviour.
Do you have any ideas of what may be happening?
I Found the issue. It turns out that, since iOS 9, the splashscreen requirements changed. So, when the .ipa was created, there were some files missing (The splashscreen for iPhone 6 and 6+).
Adding the next xml code to my config.xml
<gap:splash src="Splash/Default-667h#2x.png" gap:platform="ios" width="750" height="1334" />
<gap:splash src="Splash/Default-Portrait-736h#3x.png" gap:platform="ios" width="1242" height="2208" />
<gap:splash src="Splash/Default-Landscape-736h#3x.png" gap:platform="ios" width="2208" height="1242" />
and the corresponding files made the trick.
Now the view seems really sharp.
Hope this helps someone.
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.
Am developing a Jquery mobile application using cordova geolocation api.
Cordova : 3.6.3,
geolocation : cordova plugin add org.apache.cordova.geolocation (latest version),
jQuery Mobile : 1.4.4
Am getting exact current position using following code
navigator.geolocation.getCurrentPosition(drawMap,handleError, {
enableHighAccuracy: true,
maximumAge : 0,
timeout : 60000
});
Problem with watch position, its always trigger Unknown Error. The same code working fine in IOS-6
watchProcess = navigator.geolocation.watchPosition(handleSuccess,
handleError, {
enableHighAccuracy: true,
maximumAge : 0,
timeout : 60000
});
switch(error.code)
{
case error.PERMISSION_DENIED:
alert("User did not share geolocation data");
$(".ajax-loader").hide();
break;
case error.POSITION_UNAVAILABLE:
alert("Could not detect current position");
$(".ajax-loader").hide();
break;
case error.TIMEOUT:
alert("Retrieving position timed out, could not detect your location");
$(".ajax-loader").hide();
break;
default:
alert("Unknown Error"); // Always getting Unknown Error
$(".ajax-loader").hide();
break;
}
Tried adding following code in my platforms/ios/NavSustain/config.xml file but no luck
<gap:config-file platform="ios" parent="NSLocationAlwaysUsageDescription" overwrite="false"> <array> <string>Allow GPS</string> </array> </gap:config-file>
My config.xml file is
<?xml version='1.0' encoding='utf-8'?>
<widget id="com.navsustain.navsustain" version="0.0.1" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0">
<preference name="AllowInlineMediaPlayback" value="false" />
<preference name="AutoHideSplashScreen" value="true" />
<preference name="BackupWebStorage" value="cloud" />
<preference name="DisallowOverscroll" value="false" />
<preference name="EnableViewportScale" value="false" />
<preference name="FadeSplashScreen" value="true" />
<preference name="FadeSplashScreenDuration" value=".25" />
<preference name="KeyboardDisplayRequiresUserAction" value="true" />
<preference name="MediaPlaybackRequiresUserAction" value="false" />
<preference name="ShowSplashScreenSpinner" value="true" />
<preference name="SuppressesIncrementalRendering" value="false" />
<preference name="TopActivityIndicator" value="gray" />
<preference name="GapBetweenPages" value="0" />
<preference name="PageLength" value="0" />
<preference name="PaginationBreakingMode" value="page" />
<preference name="PaginationMode" value="unpaginated" />
<feature name="LocalStorage">
<param name="ios-package" value="CDVLocalStorage" />
</feature>
<feature name="Geolocation">
<param name="ios-package" value="CDVLocation" />
</feature>
<name>NavSustain</name>
<description>
A sample Apache Cordova application that responds to the deviceready event.
</description>
<gap:config-file platform="ios" parent="NSLocationAlwaysUsageDescription" overwrite="false"> <array> <string>Allow GPS</string> </array> </gap:config-file>
<author email="dev#cordova.apache.org" href="http://cordova.io">
Apache Cordova Team
</author>
<content src="index.html" />
<access origin="*" />
<feature name="NetworkStatus">
<param name="ios-package" value="CDVConnection" />
</feature>
<feature name="Notification">
<param name="ios-package" value="CDVNotification" />
</feature>
<feature name="SplashScreen">
<param name="ios-package" value="CDVSplashScreen" />
<param name="onload" value="true" />
</feature>
</widget>
Your help is much appreciated. Thank you
Finally found the issue. I have update Xcode to latest version Xcode 6. Now its working fine.
Hello guys I got an issue with navigator in my previous app it was working but now it is not working i tried in many way but couldn't figure out the issue.
phonegap -v is 3.3.0-0.19.6
cordova -v is 3.3.1-0.4.2
for installing plugins i tried below types
cordova plugin add org.apache.cordova.camera
cordova plugin add org.apache.cordova.dialogs
Below is my config.xml file
<?xml version='1.0' encoding='utf-8'?>
<widget id="com.company.multipleScreen" version="0.0.1" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0">
<name>Hello Cordova</name>
<preference name="AllowInlineMediaPlayback" value="false" />
<preference name="BackupWebStorage" value="cloud" />
<preference name="DisallowOverscroll" value="false" />
<preference name="EnableViewportScale" value="false" />
<preference name="KeyboardDisplayRequiresUserAction" value="true" />
<preference name="MediaPlaybackRequiresUserAction" value="false" />
<preference name="SuppressesIncrementalRendering" value="false" />
<preference name="TopActivityIndicator" value="gray" />
<preference name="GapBetweenPages" value="0" />
<preference name="PageLength" value="0" />
<preference name="PaginationBreakingMode" value="page" />
<preference name="PaginationMode" value="unpaginated" />
<feature name="LocalStorage">
<param name="ios-package" value="CDVLocalStorage" />
</feature>
<name>testing</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" />
<access origin="*" />
<feature name="Camera">
<param name="ios-package" value="CDVCamera" />
</feature>
<feature name="Media">
<param name="ios-package" value="CDVSound" />
</feature>
<feature name="File">
<param name="ios-package" value="CDVFile" />
<param name="onload" value="true" />
</feature>
<feature name="Capture">
<param name="ios-package" value="CDVCapture" />
</feature>
<feature name="Globalization">
<param name="ios-package" value="CDVGlobalization" />
</feature>
<feature name="Notification">
<param name="ios-package" value="CDVNotification" />
</feature>
The code i tried to implement for showing alert is
navigator.notification.alert("Unable to connect to server !");
and my other requirement is camera it is also not working
navigator.camera.getPicture(onSuccess, onFail, { quality: 50,
destinationType: Camera.DestinationType.FILE_URI });
function onSuccess(imageURI) {
var image = document.getElementById('myImage');
image.src = imageURI;
}
function onFail(message) {
alert('Failed because: ' + message);
}
In the current Cordova version 3.4.0 you have to manually install all plugins via cordova plugin add
So in your case, referring to https://github.com/apache/cordova-plugin-dialogs/blob/dev/doc/index.md, you need to do:
cordova plugin add org.apache.cordova.dialogs
I would recommend reading the documentation about plugins:
http://docs.phonegap.com/en/3.4.0/cordova_plugins_pluginapis.md.html#Plugin%20APIs
Issue is fixed by adding
cordova plugin add org.apache.cordova.device
cordova plugin add org.apache.cordova.console