How to access the internet in a cordova ios application? - ios

I'm using HTTP requests to active php files on a server to draw in information from a database. The project works perfectly on the x-code simulator however on the device there seems to be no internet access for the app. My information from the database appears blank. It's as if the http requests aren't running.
Below is my config.xml file.
<?xml version="1.0" encoding="UTF-8"?>
<widget xmlns="http://www.w3.org/ns/widgets" xmlns:tizen="http://tizen.org/ns/widgets" id="http://yourdomain/GearSwipeTutorial" version="1.0.0" viewmodes="maximized">
<tizen:application id="rMZJXG1BgI.GearSwipeTutorial" package="rMZJXG1BgI" required_version="2.2"/>
<content src="index.html"/>
<feature name="http://tizen.org/feature/screen.size.all"/>
<icon src="icon.png"/>
<access origin="http://127.0.0.1*"/> <!-- allow local pages -->
<access origin="http://cs1.ucc.ie" subdomains="true" />
<access origin="http://www.webqr.com" subdomains="true" />
<access origin="http://fonts.googleapis.com/css?family=Raleway" subdomains="true" />
<access origin="http://code.jquery.com" subdomains="true" />
<access origin="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" subdomains="true" />
<access origin="http://fonts.gstatic.com" subdomains="true" />
<access origin="http://maps.gstatic.com/maps-api-v3/api/js/18/4/main.js" subdomains="true" />
<gap:plugin name="org.apache.cordova.network-information" version="0.2.3" />
<gap:plugin name="org.apache.cordova.network-information" /> // Change square braces to arrow braces.
<feature name="NetworkStatus">
<param name="ios-package" value="CDVConnection" />
</feature>
<access origin="*" subdomains="true" />
<plugin name="Camera" value="CDVCamera" />
<plugin name="NetworkStatus" value="CDVConnection" />
It works perfectly in the simulator and browser but not on the device. The function breaks at xmlhttp.onreadystatechange.
function importJson(str) {
alert("1");
if (str=="") {
document.getElementById("top5").innerHTML="";
return;
alert("2");
}
if (window.XMLHttpRequest) {
alert("3");
// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else { // code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
alert("4");
}
xmlhttp.onreadystatechange=function() {
alert("15");
if (xmlhttp.readyState==4 && xmlhttp.status == 200){
alert(xmlhttp.response);
alert("5");
data = JSON.parse(xmlhttp.response);
receivedData(data);
alert("hello");
}
}

I dont thing there is anything specific in the phone gap which allow or disallow the internet access . The most important thing is <access origin="*" subdomains="true" /> and it is in the place for you .
I guess your device connection is too slow and your request in timing out this could be the reason . Try to take device in the same network in which you are trying to access for simulator .

Shouldn't you be using something like XMLHttpRequest
function reqListener () {
console.log(this.responseText);
}
var oReq = new XMLHttpRequest();
oReq.onload = reqListener;
oReq.open("get", "yourFile.txt", true);
oReq.send();
You probably need to use generic javascript functions because I don't think that ActiveX objects will work on all devices.
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");

Related

Unable to load audio files via XMLHttpRequest using WKWebView

I enjoy making old school arcade games using HTML5 Canvas and JS. I've been doing it for years and am probably a bit set in my ways. The games work great in Chrome / Safari on all modern devices.
I figured I should try wrapping a game up using PhoneGap to see how it might perform as an app on the iOS AppStore.
The game was pretty choppy although the audio played great.
I read about the performance boost of WKWebView over the default UIWebView so added that to my config.xml.
The game played beautifully and was just how I'd wanted it to play all along.
But the audio failed to play.
Digging around the internet I see the issue is likely to be how I load the audio files. Here's the basic code I use to load the audio files - an object is passed into the function containing specifics for the audio file.
My projects are laid out in this way:
--- www
|___ gfx (contains png files)
|___ sfx (contains mp3 files)
|___ script (contains js files)
|___ index.html
|___ config.xml
|___ style.css
Very basic!
function loadSound(o) {
try
{
var request = new XMLHttpRequest();
var url = "sfx/" + o.soundname + "." + AUDIOFORMAT;
request.open('GET', url, true);
request.responseType = 'arraybuffer';
// Decode asynchronously
request.onload = function ()
{
try
{
g.audioContext.decodeAudioData(request.response,
function(buffer)
{
o.buffer = buffer;
o.volume 0.6;
},
function()
{
write("Decode error: " + url + ", " + arguments[0]);
}
);
}
catch (e)
{
write("loadSound(onLoad): " + e.message);
}
}
request.send();
}
catch (e)
{
write("LoadSound: " + e.message);
}};
So if my understanding is correct WKWebView fails to read the file because it is not being served via a local http server.
I'd love to know how to get this working.
Is there something I can add to my config.xml (PhoneGap) to include a local http server within the package?
Would I then change the url to url = 'http://localhost/sfx/...'
Is there a specific port required, e.g. http://localhost:10000/sfx/
I don't use any frameworks it's just old fashioned hand-rolled JavaScript.
Here's the relevant section of my config.xml:
<feature name="CDVWKWebViewEngine">
<param name="ios-package" value="CDVWKWebViewEngine" />
</feature>
<preference name="CordovaWebViewEngine" value="CDVWKWebViewEngine" />
<name></name>
<description></description>
<content src="index.html" />
<gap:config-file platform="ios" parent="UISupportedInterfaceOrientations" overwrite="true">
<array>
<string>UIInterfaceOrientationLandscapeOmg</string>
</array>
</gap:config-file>
<gap:config-file platform="ios" parent="NSPhotoLibraryUsageDescription" overwrite="true">
<string>Does not use photo library</string>
</gap:config-file>
<preference name="DisallowOverscroll" value="true" />
<preference name="android-minSdkVersion" value="14" />
<preference name="orienation" value="portrait" />
<preference name="fullscreen" value="true" />
<preference name="exit-on-suspend" value="true" />
<plugin name="cordova-plugin-battery-status" source="npm" spec="~1.1.1" />
<plugin name="cordova-plugin-camera" source="npm" spec="~2.1.1" />
<plugin name="cordova-plugin-media-capture" source="npm" spec="~1.2.0" />
<plugin name="cordova-plugin-console" source="npm" spec="~1.0.2" />
<plugin name="cordova-plugin-contacts" source="npm" spec="~2.0.1" />
<plugin name="cordova-plugin-device" source="npm" spec="~1.1.1" />
<plugin name="cordova-plugin-device-motion" source="npm" spec="~1.2.0" />
<plugin name="cordova-plugin-device-orientation" source="npm" spec="~1.0.2" />
<plugin name="cordova-plugin-dialogs" source="npm" spec="~1.2.0" />
<plugin name="cordova-plugin-file" source="npm" spec="~4.1.1" />
<plugin name="cordova-plugin-file-transfer" source="npm" spec="~1.5.0" />
<plugin name="cordova-plugin-geolocation" source="npm" spec="~2.1.0" />
<plugin name="cordova-plugin-globalization" source="npm" spec="~1.0.3" />
<plugin name="cordova-plugin-inappbrowser" source="npm" spec="~1.3.0" />
<plugin name="cordova-plugin-media" source="npm" spec="~2.2.0" />
<plugin name="cordova-plugin-network-information" source="npm" spec="~1.2.0" />
<plugin name="cordova-plugin-splashscreen" source="npm" spec="~3.2.1" />
<plugin name="cordova-plugin-statusbar" source="npm" spec="~2.1.2" />
<plugin name="cordova-plugin-vibration" source="npm" spec="~2.1.0" />
<plugin name="cordova-plugin-whitelist" source="npm" spec="~1.2.1" />
<plugin name="cordova-plugin-wkwebview-engine" source="npm" version="1.1.2" />
Ok, so after much digging and a valuable heads up from Kerri, I finally figured out how to implement the changes that I required.
I added the following info to my config.xml:
<plugin name="cordova-plugin-wkwebview-engine-localhost" spec="https://github.com/apache/cordova-plugins.git#wkwebview-engine-localhost" />
also in config.xml I changed
<content src="index.html" />
to
<content src="http://localhost" />
Works a treat.

Can I use indexedDB in a cordova iOS application?

I'm getting an InvalidAccessError when I try to open a Indexed Database in my cordova iOS application.
Platform:
cordova: 5.4.1
cordova-ios: 4.0.1
iOS 9.2 (simulator and real device)
I already added the Plugin to use the WKWebview which made the the indexedDB object at least defined, but the error is thrown. The code works in chrome, safari and mobile safari if I run it via cordova's own web server.
config.xml looks like this
<content src="index.html" />
<plugin name="cordova-plugin-whitelist" spec="1" />
<access origin="*" />
<allow-intent href="http://*/*" />
<allow-intent href="https://*/*" />
<allow-intent href="tel:*" />
<allow-intent href="sms:*" />
<allow-intent href="mailto:*" />
<allow-intent href="geo:*" />
<platform name="android">
<allow-intent href="market:*" />
</platform>
<platform name="ios">
<allow-intent href="itms:*" />
<allow-intent href="itms-apps:*" />
</platform>
<feature name="CDVWKWebViewEngine">
<param name="ios-package" value="CDVWKWebViewEngine" />
</feature>
<preference name="CordovaWebViewEngine" value="CDVWKWebViewEngine" />
and I try to open the indexedDB with this:
openDb: function() {
var openRequest = window.indexedDB.open(DB_NAME, DB_VERSION);
openRequest.onupgradeneeded = function(event) {
console.log('upgrade needed');
console.log(event);
myIndexDb = event.target.result;
var options = {
autoIncrement: true,
keyPath: 'key'
};
var objectStore = myIndexDb.createObjectStore(DB_STORE_NAME, options);
};
openRequest.onerror = function(event) {
console.log(event);
console.log('indexDB open Error!');
};
openRequest.onsuccess = function(event) {
console.log('open success');
myIndexDb = this.result;
};
openRequest.onblocked = function(event) {
console.log('request is blocked');
console.log(event);
}
}
At the moment it works with the Telerik Plugin https://github.com/Telerik-Verified-Plugins/WKWebView (and cordova-ios 3.9.2)
EDIT:
Looks like IndexedDB problems were fixed on iOS 10, and also added it to UIWebView.
OLD ANSWER:
The way to workaround the problem with cordova-plugin-wkwebview-engine and IndexedDB is to use a local webserver.
You can use the wkwebview-engine-localhost plugin to workaround the bug adding the local webserver. To install the plugin use
cordova plugin add https://github.com/apache/cordova-plugins/tree/master/wkwebview-engine-localhost

Phonegap 3.3 iOS7 external links

I cant get any external links to show on iOS 7 with Phonegap 3.3, using Phonegap Build
I have this in my config.xml:
<feature name="InAppBrowser">
<param name="ios-package" value="CDVInAppBrowser" />
</feature>
<plugin name="InAppBrowser" value="CDVInAppBrowser" />
<access origin="*"/>
And in my code I have:
<script src="phonegap.js"></script>
And Im launching the link like this:
<a href="#" class="ui-btn ui-shadow ui-corner-all ui-btn-a ui-btn-inline" onclick="window.open('http://www.google.com', '_system', 'location=yes');"/>Visit Website</a>
I seem to have resolved this with by adding this to config.xml:
<gap:plugin name="org.apache.cordova.inappbrowser" />
And also made this change (not sure that this made any difference):
<access origin="*" browserOnly="true"/>
And also included cordova.js in the html file instead of phonegap.js

iOS7 and PhoneGap build - app height and touch response

I've just built an app using PhoneGap build, running on iOS7. The build went fine, and the install was fine, but there are some problems that I can't figure out.
Firstly, the app height isn't full size - looks to be c. iOS 6 size. If I use the PhoneGap Build debug tool to call alert(window.innerHeight);, the response I get back is 480.
Secondly, the app isn't responding to any touch events. Again, if I use the debug tool, I can pass click events to the app and it responds as expected, so I know the app is responsive, but if I try to perform the same event on the device, nothing happens.
I'm sure these are probably common issues, but I can't seem to figure them out! The same app works perfectly on Andoird, which makes me suspect it's a configuration issue. For reference, my config.xml looks like:
<?xml version="1.0" encoding="UTF-8" ?>
<widget xmlns = "http://www.w3.org/ns/widgets"
xmlns:gap = "http://phonegap.com/ns/1.0"
id = "com.xxxxxx.walkingguide"
versionCode="100"
version = "1.0.0">
<!-- versionCode is optional and Android only -->
<name>XXXXXXXXXXXX Walking Guide</name>
<description>
Find your way around our campuses, and find out more about our buildings.
</description>
<author href="http://www.axxxxxxxsign.co.uk" email="hello#xxxxxxxxx.co.uk">
XXXXX XXXXXX
</author>
<preference name="phonegap-version" value="3.3.0" />
<preference name="orientation" value="portrait" />
<preference name="fullscreen" value="true" />
<preference name="webviewbounce" value="false" />
<preference name="detect-data-types" value="false" />
<preference name="show-splash-screen-spinner" value="false" />
<preference name="android-installLocation" value="auto" />
<preference name="auto-hide-splash-screen" value="false" />
<preference name="splash-screen-duration" value="10000" />
<icon src="icon.png" />
<!-- iPhone and iPod touch -->
<gap:splash src="images/splash-ios" gap:platform="ios" width="320" height="480" />
<gap:splash src="images/splash-ios#2x.png" gap:platform="ios" width="640" height="960" />
<!-- iPhone 5 / iPod Touch (5th Generation) -->
<gap:splash src="images/splash-568h#2x.pnh" gap:platform="ios" width="640" height="1136" />
<gap:splash src="images/android-splash.9.png" gap:platform="android" />
<gap:plugin name="org.apache.cordova.geolocation" version="0.3.6" />
<gap:plugin name="org.apache.cordova.network-information" version="0.2.7" />
<gap:plugin name="org.apache.cordova.dialogs" />
<gap:plugin name="org.apache.cordova.media-capture" version="0.2.8" />
<gap:plugin name="org.apache.cordova.splashscreen" version="0.2.7" />
<access origin="*" />
</widget>
Having looked into this further, the problem is related to how iOS 7 treats the status bar.
By default, the status bar sits over the top of the WebView, and apparently means the app can't be interacted with (not sure if this happens on all apps, but I tried it with both my app and a simple demo app and had the same problems).
There is a PhoneGap Plugin (also available on PhoneGap Build) that allows you to hide the status bar - https://github.com/phonegap-build/StatusBarPlugin
Following that and setting up the configs
<gap:config-file platform="ios" parent="UIStatusBarHidden">
<true/>
</gap:config-file>
<gap:config-file platform="ios" parent="UIViewControllerBasedStatusBarAppearance">
<false/>
</gap:config-file>
The status bar is hidden, and everything appears to work as it should.
Try adding the below to your app. It will set the height and width to the ones supported by the device.
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1,
minimum-scale=1, width=device-width, height=device-height,
target-densitydpi=device-dpi" />

My BB app isn't retrieving data from google feed api

I develop an app using jQuery Mobile.
After compilation, i tested on BB simulators but non is able to display data of the feed.
How do i configure my config.xml file to achieve this.
Below is my current config.xml file.
<?xml version="1.0" encoding="utf-8"?>
<widget xmlns="http://www.w3.org/ns/widgets" xmlns:rim="http://www.blackberry.com/ns/widgets" version="1.0.0" rim:header="RIM-Widget: rim/widget">
<name>on the Go!</name>
<description>Get latest information on the Go!</description>
<content src="index.html" rim:allowInvokeParams="true"/>
<author href="" rim:copyright="Copyright 2013" email="josiahaccounts#gmail.com" xml:lang="en" its:dir="rtl" >Josiah Gerald</author>
<access uri="http://ajax.googleapis.com" subdomains="true" >
<feature id="blackberry.invoke.BrowserArguments" />
<feature id="blackberry.app" />
</access>
<rim:loadingScreen
backgroundColor="#FFFFFF"
backgroundImage="images/news.png"
foregroundImage="theme/images/ajax-loader.gif"
onRemotePageLoad="true"
onLocalPageLoad="true"
onFirstLaunch="true">
<rim:transitionEffect type="fadeIn" duration="300" />
</rim:loadingScreen>
<content src="index.html" />
<rim:cache disableAllCache="true" />
<rim:connection timeout="60000">
<id>TCP_WIFI</id>
<id>MDS</id>
<id>BIS-B</id>
<id>TCP_CELLULAR</id>
<id>WAP2</id>
<id>WAP</id>
</rim:connection>
<license>(c) 2013 www.mobilenizer.com</license>
<icon src="images/icon.png" />
</widget>
I finally got it to work.
Here is the solution:
<access uri="http://ajax.googleapis.com" subdomains="true" />
<feature id="blackberry.invoke" />
<feature id="blackberry.app" required="true" version="1.0.0">
<param name="websecurity" value="disable" />
</feature>
So rather than nesting the feature inside the access, i separated it.

Resources