I'm trying to understand how to use Facebook Connect (login) with jQuery Mobile and Phonegap Build, but as more I search about this information, more I get confused.
I have already my app created on Facebook, and I have API number.
I don't know if the best way is to call a PHP page (via ajax) where validates EMAIL + PASS via Facebook PHP SDK or Facebook SDK Javascript. For SDK JS I don't understand how to integrate it in my code (and I don't know if it's possible to test it by localhost).
If someone could help me with this question...
Update
I tried #Dom suggestion, but when I click in the button, any action happens.
Below my HTML code:
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1.0, user-scalable=no, maximum-scale=1">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<title>Test</title>
<!-- CSS -->
<link rel="stylesheet" href="css/jquery.mobile-1.3.1.min.css">
<link rel="stylesheet" href="css/codiqa.ext.css">
<!-- jQuery and jQuery Mobile -->
<script type="text/javascript" src="phonegap.js"></script>
<script src="js/jquery-1.9.0.js"></script>
<script src="js/utf8.js"></script>
<script src="js/cdv-plugin-fb-connect.js"></script>
<script src="js/facebook-js-sdk.js"></script>
<script src="js/jquery.mobile-1.3.1.min.js"></script>
<script>
<!-- These are the notifications that are displayed to the user through pop-ups if the above JS files does not exist in the same directory-->
if ((typeof cordova == 'undefined') && (typeof Cordova == 'undefined')) alert('Cordova variable does not exist. Check that you have included cordova.js correctly');
if (typeof CDV == 'undefined') alert('CDV variable does not exist. Check that you have included cdv-plugin-fb-connect.js correctly');
if (typeof FB == 'undefined') alert('FB variable does not exist. Check that you have included the Facebook JS SDK file.');
FB.Event.subscribe('auth.login', function(response) {
alert('auth.login event');
});
FB.Event.subscribe('auth.logout', function(response) {
alert('auth.logout event');
});
FB.Event.subscribe('auth.sessionChange', function(response) {
alert('auth.sessionChange event');
});
FB.Event.subscribe('auth.statusChange', function(response) {
alert('auth.statusChange event');
});
/*function getSession() {
alert("session: " + JSON.stringify(FB.getSession()));
}
*/
function getLoginStatus() {
FB.getLoginStatus(function(response) {
if (response.status == 'connected') {
alert('logged in');
} else {
alert('not logged in');
}
});
}
var friendIDs = [];
var fdata;
function me() {
FB.api('/me/friends', { fields: 'id, name, picture' }, function(response) {
if (response.error) {
alert(JSON.stringify(response.error));
} else {
var data = document.getElementById('data');
fdata=response.data;
console.log("fdata: "+fdata);
response.data.forEach(function(item) {
var d = document.createElement('div');
d.innerHTML = "<img src="+item.picture+"/>"+item.name;
data.appendChild(d);
});
}
var friends = response.data;
console.log(friends.length);
for (var k = 0; k < friends.length && k < 200; k++) {
var friend = friends[k];
var index = 1;
friendIDs[k] = friend.id;
//friendsInfo[k] = friend;
}
console.log("friendId's: "+friendIDs);
});
}
function logout() {
FB.logout(function(response) {
alert('logged out');
});
}
function login() {
FB.login(
function(response) {
if (response.session) {
alert('logged in');
} else {
alert('not logged in');
}
},
{ scope: "email" }
);
}
function facebookWallPost() {
console.log('Debug 1');
var params = {
method: 'feed',
name: 'Facebook Dialogs',
link: 'https://developers.facebook.com/docs/reference/dialogs/',
picture: 'http://fbrell.com/f8.jpg',
caption: 'Reference Documentation',
description: 'Dialogs provide a simple, consistent interface for applications to interface with users.'
};
console.log(params);
FB.ui(params, function(obj) { console.log(obj);});
}
function publishStoryFriend() {
randNum = Math.floor ( Math.random() * friendIDs.length );
var friendID = friendIDs[randNum];
if (friendID == undefined){
alert('please click the me button to get a list of friends first');
}else{
console.log("friend id: " + friendID );
console.log('Opening a dialog for friendID: ', friendID);
var params = {
method: 'feed',
to: friendID.toString(),
name: 'Facebook Dialogs',
link: 'https://developers.facebook.com/docs/reference/dialogs/',
picture: 'http://fbrell.com/f8.jpg',
caption: 'Reference Documentation',
description: 'Dialogs provide a simple, consistent interface for applications to interface with users.'
};
FB.ui(params, function(obj) { console.log(obj);});
}
}
document.addEventListener('deviceready', function() {
try {
alert('Device is ready! Make sure you set your app_id below this alert.');
FB.init({ appId: "appid", nativeInterface: CDV.FB, useCachedDialogs: false });
document.getElementById('data').innerHTML = "";
} catch (e) {
alert(e);
}
}, false);
</script>
</head>
<body>
<div data-role="page" id="page_login">
<div data-role="content" id="content-login">
<div id="content">
Login Facebook
Me
Get Login Status
facebookWallPost
friendstory
</div>
</div>
</div>
</body>
</html>
XML code:
<?xml version="1.0" encoding="UTF-8"?>
<widget xmlns = "http://www.w3.org/ns/widgets"
xmlns:gap = "http://phonegap.com/ns/1.0"
id = "br.com.test"
version = "1.0.0">
<name>Test</name>
<!-- FB Connect Section -->
<gap:plugin name="com.phonegap.plugins.facebookconnect">
<param name="APP_ID" value="XXXXXXXXXX...." /> <!-- FB App ID-->
<param name="APP_NAME" value="test" /> <!-- FB App Namespace-->
</gap:plugin>
<description>
Test
</description>
<author href="http://test.com.br" email="atendimento#test.com.br">
Test
</author>
<gap:plugin name="com.phonegap.plugins.barcodescanner" />
<feature name="http://api.phonegap.com/1.0/device" />
<preference name="phonegap-version" value="2.9.0" />
<preference name="orientation" value="default" />
<preference name="target-device" value="universal" />
<preference name="fullscreen" value="false" />
<preference name="webviewbounce" value="true" />
<icon src="icon.png" />
<icon src="res/icon/android/icon-36-ldpi.png" gap:platform="android" gap:density="ldpi" />
<icon src="res/icon/android/icon-48-mdpi.png" gap:platform="android" gap:density="mdpi" />
<icon src="res/icon/android/icon-72-hdpi.png" gap:platform="android" gap:density="hdpi" />
<icon src="res/icon/android/icon-96-xhdpi.png" gap:platform="android" gap:density="xhdpi" />
<icon src="res/icon/blackberry/icon-80.png" gap:platform="blackberry" />
<icon src="res/icon/blackberry/icon-80.png" gap:platform="blackberry" gap:state="hover"/>
<icon src="res/icon/ios/icon-57.png" gap:platform="ios" width="57" height="57" />
<icon src="res/icon/ios/icon-72.png" gap:platform="ios" width="72" height="72" />
<icon src="res/icon/ios/icon-57-2x.png" gap:platform="ios" width="114" height="114" />
<icon src="res/icon/ios/icon-72-2x.png" gap:platform="ios" width="144" height="144" />
<icon src="res/icon/webos/icon-64.png" gap:platform="webos" />
<icon src="res/icon/windows-phone/icon-48.png" gap:platform="winphone" />
<icon src="res/icon/windows-phone/icon-173.png" gap:platform="winphone" gap:role="background" />
<gap:splash src="res/screen/android/screen-ldpi-portrait.png" gap:platform="android" gap:density="ldpi" />
<gap:splash src="res/screen/android/screen-mdpi-portrait.png" gap:platform="android" gap:density="mdpi" />
<gap:splash src="res/screen/android/screen-hdpi-portrait.png" gap:platform="android" gap:density="hdpi" />
<gap:splash src="res/screen/android/screen-xhdpi-portrait.png" gap:platform="android" gap:density="xhdpi" />
<gap:splash src="res/screen/blackberry/screen-225.png" gap:platform="blackberry" />
<gap:splash src="res/screen/ios/screen-iphone-portrait.png" gap:platform="ios" width="320" height="480" />
<gap:splash src="res/screen/ios/screen-iphone-portrait-2x.png" gap:platform="ios" width="640" height="960" />
<gap:splash src="res/screen/ios/screen-ipad-portrait.png" gap:platform="ios" width="768" height="1024" />
<gap:splash src="res/screen/ios/screen-ipad-landscape.png" gap:platform="ios" width="1024" height="768" />
<gap:splash src="res/screen/windows-phone/screen-portrait.jpg" gap:platform="winphone" />
</widget>
Take a look at the plugin documentation located here.
Ensure you have the below in the <head> of your index.html:
<script src="cdv-plugin-fb-connect.js"></script>
<script src="facebook-js-sdk.js"></script>
Ensure your config.xml contains the below:
<gap:plugin name="com.phonegap.plugins.facebookconnect">
<param name="APP_ID" value="..." />
<param name="APP_NAME" value="..." />
</gap:plugin>
Finally, review the "Simple Sample" on how to use the plugin located here
Hope this helps. If you are still having issues, post some code you are using for us to take a look at.
Related
I'm adding in-app-purchase functionality for a Framework7/Phonegap app.
Goal: Access the store object referenced in the docs for this plugin:
https://github.com/j3k0/cordova-plugin-purchase/blob/master/doc/api.md
What's currently happening: When I run the xcode build on my local device, I get the following error: Uncaught reference error: store is undefined
What I've tried: I built this test app with success. So, I'm quite sure that my protocol for setting up the store is correct. (It's a great tutorial btw, especially if you're working in swift).
https://www.raywenderlich.com/154737/app-purchases-auto-renewable-subscriptions-tutorial
What I expect to happen: When I build the project from Xcode and deploy on my device for debugging, I would like to open the remote debugging console through safari to isolate the plugin to see that it works.
Here is the relevant code from my project. I believe as soon as I can get access to the store object, I will be fine. I have read several SO questions, and no explanation is presented as to why this configuration doesn't work.
config.xml:
<?xml version='1.0' encoding='utf-8'?>
<widget id="*bundle id*" version="1.0.0" xmlns="http://www.w3.org/ns/widgets" xmlns:gap="http://phonegap.com/ns/1.0">
<name>*appname*</name>
<description>
Hello World sample application that responds to the deviceready event.
</description>
<author email="support#phonegap.com" href="http://phonegap.com">
PhoneGap Team
</author>
<content src="index.html" />
<preference name="DisallowOverscroll" value="true" />
<preference name="android-minSdkVersion" value="14" />
<platform name="android">
<icon density="ldpi" src="www/res/icon/android/drawable-ldpi-icon.png" />
<icon density="mdpi" src="www/res/icon/android/drawable-mdpi-icon.png" />
<icon density="hdpi" src="www/res/icon/android/drawable-hdpi-icon.png" />
<icon density="xhdpi" src="www/res/icon/android/drawable-xhdpi-icon.png" />
<icon density="xxhdpi" src="www/res/icon/android/drawable-xxhdpi-icon.png" />
<icon density="xxxhdpi" src="www/res/icon/android/drawable-xxxhdpi-icon.png" />
<splash density="land-ldpi" src="www/res/screen/android/drawable-land-ldpi-screen.png" />
<splash density="land-mdpi" src="www/res/screen/android/drawable-land-mdpi-screen.png" />
<splash density="land-hdpi" src="www/res/screen/android/drawable-land-hdpi-screen.png" />
<splash density="land-xhdpi" src="www/res/screen/android/drawable-land-xhdpi-screen.png" />
<splash density="land-xxhdpi" src="www/res/screen/android/drawable-land-xxhdpi-screen.png" />
<splash density="land-xxxhdpi" src="www/res/screen/android/drawable-land-xxxhdpi-screen.png" />
<splash density="port-ldpi" src="www/res/screen/android/drawable-port-ldpi-screen.png" />
<splash density="port-mdpi" src="www/res/screen/android/drawable-port-mdpi-screen.png" />
<splash density="port-hdpi" src="www/res/screen/android/drawable-port-hdpi-screen.png" />
<splash density="port-xhdpi" src="www/res/screen/android/drawable-port-xhdpi-screen.png" />
<splash density="port-xxhdpi" src="www/res/screen/android/drawable-port-xxhdpi-screen.png" />
<splash density="port-xxxhdpi" src="www/res/screen/android/drawable-port-xxxhdpi-screen.png" />
</platform>
<platform name="ios">
<splash height="480" src="www/res/screen/ios/Default~iphone.png" width="320" />
<splash height="960" src="www/res/screen/ios/Default#2x~iphone.png" width="640" />
<splash height="1024" src="www/res/screen/ios/Default-Portrait~ipad.png" width="768" />
<splash height="2048" src="www/res/screen/ios/Default-Portrait#2x~ipad.png" width="1536" />
<splash height="768" src="www/res/screen/ios/Default-Landscape~ipad.png" width="1024" />
<splash height="1536" src="www/res/screen/ios/Default-Landscape#2x~ipad.png" width="2048" />
<splash height="1136" src="www/res/screen/ios/Default-568h#2x~iphone.png" width="640" />
<splash height="1334" src="www/res/screen/ios/Default-667h.png" width="750" />
<splash height="2208" src="www/res/screen/ios/Default-736h.png" width="1242" />
<splash height="1242" src="www/res/screen/ios/Default-Landscape-736h.png" width="2208" />
<icon height="57" platform="ios" src="www/res/icon/ios/icon.png" width="57" />
<icon height="114" platform="ios" src="www/res/icon/ios/icon#2x.png" width="114" />
<icon height="40" platform="ios" src="www/res/icon/ios/icon-40.png" width="40" />
<icon height="80" platform="ios" src="www/res/icon/ios/icon-40#2x.png" width="80" />
<icon height="50" platform="ios" src="www/res/icon/ios/icon-50.png" width="50" />
<icon height="100" platform="ios" src="www/res/icon/ios/icon-50#2x.png" width="100" />
<icon height="60" platform="ios" src="www/res/icon/ios/icon-60.png" width="60" />
<icon height="120" platform="ios" src="www/res/icon/ios/icon-60#2x.png" width="120" />
<icon height="180" platform="ios" src="www/res/icon/ios/icon-60#3x.png" width="180" />
<icon height="72" platform="ios" src="www/res/icon/ios/icon-72.png" width="72" />
<icon height="144" platform="ios" src="www/res/icon/ios/icon-72#2x.png" width="144" />
<icon height="76" platform="ios" src="www/res/icon/ios/icon-76.png" width="76" />
<icon height="152" platform="ios" src="www/res/icon/ios/icon-76#2x.png" width="152" />
<icon height="29" platform="ios" src="www/res/icon/ios/icon-small.png" width="29" />
<icon height="58" platform="ios" src="www/res/icon/ios/icon-small#2x.png" width="58" />
<icon height="87" platform="ios" src="www/res/icon/ios/icon-small#3x.png" width="87" />
<splash height="1136" platform="ios" src="www/res/screen/ios/Default-568h#2x~iphone.png" width="640" />
<splash height="1334" platform="ios" src="www/res/screen/ios/Default-667h.png" width="750" />
<splash height="2208" platform="ios" src="www/res/screen/ios/Default-736h.png" width="1242" />
<splash height="1242" platform="ios" src="www/res/screen/ios/Default-Landscape-736h.png" width="2208" />
<splash height="1536" platform="ios" src="www/res/screen/ios/Default-Landscape#2x~ipad.png" width="2048" />
<splash height="768" platform="ios" src="www/res/screen/ios/Default-Landscape~ipad.png" width="1024" />
<splash height="2048" platform="ios" src="www/res/screen/ios/Default-Portrait#2x~ipad.png" width="1536" />
<splash height="1024" platform="ios" src="www/res/screen/ios/Default-Portrait~ipad.png" width="768" />
<splash height="960" platform="ios" src="www/res/screen/ios/Default#2x~iphone.png" width="640" />
<splash height="480" platform="ios" src="www/res/screen/ios/Default~iphone.png" width="320" />
</platform>
<platform name="wp8">
<icon height="99" platform="wp8" src="www/res/icon/wp8/ApplicationIcon.png" width="99" />
<icon height="159" platform="wp8" src="www/res/icon/wp8/Background.png" width="159" />
<splash height="1280" platform="wp8" src="www/res/screen/wp8/screen-portrait.jpg" width="768" />
</platform>
<platform name="windows">
<splash src="res/screen/windows/splashscreen.png" target="SplashScreen" />
<splash src="res/screen/windows/splashscreenphone.png" target="SplashScreenPhone" />
<icon height="150" platform="windows" src="www/res/icon/windows/Square150x150Logo.scale-100.png" width="150" />
<icon height="30" platform="windows" src="www/res/icon/windows/Square30x30Logo.scale-100.png" width="30" />
<icon height="50" platform="windows" src="www/res/icon/windows/StoreLogo.scale-100.png" width="50" />
<splash height="300" platform="windows" src="www/res/screen/windows/SplashScreen.scale-100.png" width="620" />
<icon height="120" platform="windows" src="www/res/icon/windows/StoreLogo.scale-240.png" width="120" />
<icon height="44" platform="windows" src="www/res/icon/windows/Square44x44Logo.scale-100.png" width="44" />
<icon height="106" platform="windows" src="www/res/icon/windows/Square44x44Logo.scale-240.png" width="106" />
<icon height="70" platform="windows" src="www/res/icon/windows/Square70x70Logo.scale-100.png" width="70" />
<icon height="71" platform="windows" src="www/res/icon/windows/Square71x71Logo.scale-100.png" width="71" />
<icon height="170" platform="windows" src="www/res/icon/windows/Square71x71Logo.scale-240.png" width="170" />
<icon height="360" platform="windows" src="www/res/icon/windows/Square150x150Logo.scale-240.png" width="360" />
<icon height="310" platform="windows" src="www/res/icon/windows/Square310x310Logo.scale-100.png" width="310" />
<icon height="150" platform="windows" src="www/res/icon/windows/Wide310x150Logo.scale-100.png" width="310" />
<icon height="360" platform="windows" src="www/res/icon/windows/Wide310x150Logo.scale-240.png" width="744" />
<splash height="1920" platform="windows" src="www/res/screen/windows/SplashScreenPhone.scale-240.png" width="1152" />
</platform>
<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:*" />
<preference name="SplashScreenDelay" value="10000" />
<platform name="android">
<allow-intent href="market:*" />
</platform>
<platform name="ios">
<preference name="SplashScreenDelay" value="10000" />
<allow-intent href="itms:*" />
<allow-intent href="itms-apps:*" />
</platform>
<plugin name="cordova-plugin-battery-status" spec="~1.2.4" />
<plugin name="cordova-plugin-camera" spec="~2.4.1" />
<plugin name="cordova-plugin-media-capture" spec="~1.4.3" />
<plugin name="cordova-plugin-device" spec="~1.1.6" />
<plugin name="cordova-plugin-dialogs" spec="~1.3.3" />
<plugin name="cordova-plugin-file" spec="~4.3.3" />
<plugin name="cordova-plugin-geolocation" spec="~2.4.3" />
<plugin name="cordova-plugin-globalization" spec="~1.0.7" />
<plugin name="cordova-plugin-inappbrowser" spec="~1.7.1" />
<plugin name="cordova-plugin-network-information" spec="~1.3.3" />
<plugin name="cordova-plugin-vibration" spec="~2.1.5" />
<plugin name="cordova-plugin-splashscreen" spec="https://github.com/apache/cordova-plugin-splashscreen.git" />
<gap:plugin name="cc.fovea.cordova.purchase" source="npm" />
<engine name="ios" spec="^4.5.4" />
</widget>
app.js:
document.addEventListener('deviceready', initializeStore, false);
function initializeStore() {
// Let's set a pretty high verbosity level, so that we see a lot of stuff
// in the console (reassuring us that something is happening).
store.verbosity = store.INFO;
// We register a dummy product. It's ok, it shouldn't
// prevent the store "ready" event from firing.
store.register({
id: "*myproductid*",
alias: "100 coins",
type: store.CONSUMABLE
});
// When every goes as expected, it's time to celebrate!
// The "ready" event should be welcomed with music and fireworks,
// go ask your boss about it! (just in case)
store.ready(function () {
console.log("\\o/ STORE READY \\o/");
});
// After we've done our setup, we tell the store to do
// it's first refresh. Nothing will happen if we do not call store.refresh()
store.refresh();
}
var $$ = Dom7;
function somethingelse() {
console.log('another test');
}
// Theme
var theme = 'auto';
if (document.location.search.indexOf('theme=') >= 0) {
theme = document.location.search.split('theme=')[1].split('&')[0];
}
var app = new Framework7({
id: '*mybundleid*',
root: '#app',
theme: theme,
photoBrowser: {
type: 'standalone',
theme: 'light',
navbar: true,
swiper: {
initialSlide: 0,
spaceBetween: 20,
speed: 300,
loop: false,
preloadImages: true,
navigation: {
nextEl: '.photo-browser-next',
prevEl: '.photo-browser-prev',
},
zoom: {
enabled: true,
maxRatio: 3,
minRatio: 1,
},
lazy: {
enabled: true,
},
},
},
data: function () {
return {
user: {
firstName: 'John',
lastName: 'Doe',
},
};
},
methods: {
helloWorld: function () {
app.dialog.alert('Hello World!');
}
},
routes: routes,
vi: {
placementId: 'pltd4o7ibb9rc653x14',
},
});
var toastBottomError = app.toast.create({
text: 'There was an error-please check your connection and try again',
closeTimeout: 2000,
cssClass: 'toastError'
});
var toastBottomSuccess = app.toast.create({
text: 'Success!',
closeTimeout: 2000,
cssClass: 'toastSuccess'
});
var items = [];
for (var i = 1; i <= 10000; i++) {
items.push({
title: 'Item ' + i,
subtitle: 'Subtitle ' + i
});
}
var dynamicPopup = app.popup.create({
content: `<div class="popup">
<div class="navbar">
<div class="navbar-inner sliding">
<div class="left">
<a href="#" class="link popup-close">
<i class="icon icon-back"></i>
<span class="ios-only">Back</span>
</a><!--link back-->
</div><!--left-->
<div class="title">Preview</div>
</div><!--navbar-inner sliding-->
</div><!--navbar-->
<div class="block">
<p>Popup created dynamically.</p>
<p>Close me</p>
<img id='preview-image' src=''/>
</div>
</div>`,
on: {
open: function(popup){
console.log('Popup open');
console.log(popup);
},
opened: function(popup) {
console.log('Popup opened');
console.log(popup);
},
}
});
var sheet = app.sheet.create({
content: `
<div id='forced-sign-up-sheet-modal' class="sheet-modal">
<!-- Sheet Modal Toolbar, optional -->
<div class="toolbar">
<div class="toolbar-inner">
<div class="left"></div>
<div class="right">
Done
</div>
</div>
</div>
<!-- Sheet Modal Inner -->
<div class="sheet-modal-inner">
<!-- Sheet Modal content -->
<div class="block">
<p>Integer mollis nulla id nibh elementum finibus...</p>
<button id='clickMe' class='button button-fill color-red'>Click me</button>
</div>
</div>
</div>`,
on: {
open:function(){
console.log('open running...');
},
opened: function(){
console.log(app);
console.log('sup cuh');
app.dialog.confirm('text','title');
}
}
});
Uncaught reference error: store is undefined means one thing only: The plugin is NOT installed properly.
A few things to check here:
Have you installed the plugin using cordova plugin add
cc.fovea.cordova.purchase?
Did the plugin install without warnings or errors?
Have you run cordova build ios after adding the plugin and this worked without errors?
Have you closed Xcode before using the previous cordova commands?
Sadly, the answer was to simply update the plugins that came with the template. There were NO error messages that pointed to this being the cause for the deviceready event not firing. Eventually I safari-ed through enough SO articles to find this answer. For a newbie like me, I would be expecting some sort of flag that the outdated plugins were causing the issue.
My ( cordova ) app shall download an image from remote, store it persistent on local filesystem and display it. Downloading and storing is no problem. The images are created an the source attributes are set. But what type of URL I ever will use, the image is not displayed. I try to get this work for IOS in a native device.
index.html:
<!DOCTYPE html>
<!--[if lt IE 7]> <html class="lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html class="lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html class="lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html> <!--<![endif]-->
<head>
<title>The App</title>
<meta charset="utf-8">
<meta http-equiv="Content-Security-Policy" content="default-src 'self' data: gap: cdvfile: https://ssl.gstatic.com 'unsafe-eval' https://www.adomain.de; style-src 'self' 'unsafe-inline' https://www.adomain.de; media-src *; script-src 'self' 'unsafe-eval' https://adomain.de; connect-src 'self' https://www.adomain.de; font-src 'self' data: https://www.adomain.de; img-src * filesystem: data: cdvfile:">
</head>
<body>
<div id="links"></div>
<script type="text/javascript" src="public/js/test/test.js"></script>
<script type="text/javascript" src="cordova.js"></script>
</body>
</html>
test.js:
var oRessources = {
ressourcesDir:false,
init:function(){
function initFS(success){
window.requestFileSystem = window.requestFileSystem || window.webkitRequestFileSystem;
window.requestFileSystem(window.PERSISTENT, 0, function (fs) {
success();
});
}
initFS(oRessources.createRessourcesDir);
},
createRessourcesDir:function(){
resolveLocalFileSystemURL(cordova.file.dataDirectory, function(dirEntry){
console.log('datadirectory');
console.log(dirEntry);
dirEntry.getDirectory(
'ressources/',
{create:true},
function(dirEntry){
oRessources.ressourcesDir = dirEntry;
oRessources.download();
},
function(error){
console.log('error');
console.log(error)
}
);
},
function(dirEntry){
console.log('error');
}
);
},
download:function(){
var target = "e44498f0b0964152632bd0c82342914b859c543e.jpeg"
oRessources.ressourcesDir.getFile(
target,
{ create: true, exclusive: false },
function (fileEntry) {
console.log('file created');
console.log(fileEntry);
var oReq = new XMLHttpRequest();
oReq.open("GET", "https://www.adomain.de/api/public/content_images/"+target, true);
oReq.responseType = "blob";
oReq.onload = function (oEvent) {
var blob = oReq.response;
if (blob) {
fileEntry.createWriter(function (fileWriter) {
fileWriter.onwriteend = function (e) {
fileEntry.getMetadata(function(meta){
console.log(meta);
}, function(error){
});
var link = document.createElement("A");
link.appendChild(document.createTextNode(fileEntry.toInternalURL()));
link.href = fileEntry.toInternalURL();
document.getElementById('links').appendChild(link);
var image = document.createElement("IMG");
image.src = fileEntry.toInternalURL();
document.getElementById('links').appendChild(image);
var link2 = document.createElement("A");
link2.appendChild(document.createTextNode(fileEntry.toURL()));
link2.href = fileEntry.toURL();
document.getElementById('links').appendChild(link2);
var image2 = document.createElement("IMG");
image2.src = fileEntry.toURL();
document.getElementById('links').appendChild(image2);
var link3 = document.createElement("a");
link3.appendChild(document.createTextNode(fileEntry.toURL().replace("///", "//") ));
link3.href = fileEntry.toURL().replace("///", "//");
document.getElementById('links').appendChild(link3);
var image3 = document.createElement("IMG");
image3.src = fileEntry.toURL().replace("///", "//");
document.getElementById('links').appendChild(image3);
link4 = document.createElement("A");
link4.appendChild(document.createTextNode(fileEntry.fullPath ));
link4.href = fileEntry.fullPath;
document.getElementById('links').appendChild(link4);
var image4 = document.createElement("IMG");
image4.src = fileEntry.fullPath;
document.getElementById('links').appendChild(image4);
console.log(blob);
link5 = document.createElement("A");
link5.appendChild(document.createTextNode(window.URL.createObjectURL(blob) ));
link5.href = window.URL.createObjectURL(blob);
document.getElementById('links').appendChild(link5);
var image5 = document.createElement("IMG");
image5.src = window.URL.createObjectURL(blob);
document.getElementById('links').appendChild(image5);
var readerBlob = new FileReader();
readerBlob.onload = function(event){
console.log('dataURL2');
//console.log(readerBlob.result);
var image6 = document.createElement("IMG");
image6.src = readerBlob.result;
document.getElementById('links').appendChild(image6);
};
console.log('dataURL1');
readerBlob.readAsDataURL(blob);
};
fileWriter.onerror = function (e) {
// you could hook this up with our global error handler, or pass in an error callback
console.log('Write failed: ' + e.toString());
};
fileWriter.write(blob);
});
} else console.error('we didnt get an XHR response!');
};
oReq.onerror = function (oEvent) {
if(oRessources.loadingStack.length > 0){
//oRessources.download();
}else{
oRessources.loading = false;
}
}
oReq.send(null);
},
function (error) {
console.log('error creating file');
console.log(error);
}
);
}
};
document.addEventListener("deviceready", function(){
console.log('DEVICE READY');
oRessources.init();
}, false);
window.onerror = function(message, url, lineNumber){
console.log('Error: '+message+' in '+ url + ' at line '+lineNumber);
}
config.xml:
<?xml version='1.0' encoding='utf-8'?>
<widget id="de.app.app" version="0.0.1" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0">
<name>App</name>
<description>
App
</description>
<author email="mail#nils-fett.de" href="http://www.adomain.de">
Nils Fett
</author>
<content src="index.html" />
<access origin="*" />
<access origin="cdvfile://*" />
<access origin="file://*/*" />
<access origin="file:///*/*" />
<allow-intent href="http://*/*" />
<allow-intent href="https://*/*" />
<allow-intent href="tel:*" />
<allow-intent href="sms:*" />
<allow-intent href="mailto:*" />
<allow-intent href="geo:*" />
<allow-intent href="file://*/*" />
<allow-intent href="file:///*/*" />
<allow-intent href="cdvfile:*" />
<allow-navigation href="*" />
<allow-navigation href="file://*/*" />
<allow-navigation href="file:///*/*" />
<allow-navigation href="cdvfile:*" />
<allow-origin href="file://*/*" />
<allow-origin href="file:///*/*" />
<allow-origin href="cdvfile:*" />
<platform name="android">
<allow-intent href="market:*" />
</platform>
<platform name="ios">
<access origin="*" />
<access origin="cdvfile://*" />
<access origin="file://*/*" />
<access origin="file:///*/*" />
<allow-intent href="itms:*" />
<allow-intent href="itms-apps:*" />
<allow-intent href="file://*/*" />
<allow-intent href="file:///*/*" />
<allow-intent href="cdvfile:*" />
<allow-navigation href="file://*/*" />
<allow-navigation href="file:///*/*" />
<allow-navigation href="cdvfile:*" />
<allow-origin href="file://*/*" />
<allow-origin href="file:///*/*" />
<allow-origin href="cdvfile:*" />
<splash height="1024" src="lobbe-logo-768x1024.png" width="768" />
<splash height="2048" src="lobbe-logo-1536x2048.png" width="1536" />
<splash height="1536" src="lobbe-logo-2048x1536.png" width="2048" />
</platform>
<preference name="DisallowOverscroll" value="true" />
<preference name="Orientation" value="default" />
<preference name="BackupWebStorage" value="local" />
<preference name="iosPersistentFileLocation" value="library" />
<preference name="AutoHideSplashScreen" value="true" />
<feature name="File">
<param name="ios-package" value="CDVFile" />
</feature>
<feature name="FileTransfer">
<param name="ios-package" value="CDVFileTransfer" />
</feature>
<icon src="lobbe.png" />
<plugin name="cordova-plugin-console" spec="~1.1.0" />
<plugin name="cordova-plugin-device" spec="~2.0.1" />
<plugin name="cordova-plugin-email-composer" spec="~0.8.11" />
<plugin name="cordova-plugin-file" spec="~6.0.1" />
<plugin name="cordova-plugin-inappbrowser" spec="~2.0.1" />
<plugin name="cordova-plugin-network-information" spec="~2.0.1" />
<plugin name="cordova-plugin-splashscreen" spec="~5.0.1" />
<plugin name="cordova-plugin-webserver" spec="~1.0.3" />
<plugin name="cordova-plugin-whitelist" spec="~1.3.3" />
<engine name="ios" spec="~4.2.1" />
</widget>
I think its a kind of restriction added in a newer IOS Version. I heard of a issue of the WKWebView, but threads read that this problem should be solved. Any ideas?
UPDATE:
So sorry, there was no problem with cordova or iOS or filesystem. The problem was, that the image URL were redirected to a html page. So I downloaded HTML and tried to dispay it as image. The code works. toInternalURL, toURL, createObjectURL and readAsDataURL work perfect.
So sorry, there was no problem with cordova or iOS or filesystem. The problem was, that the image URL were redirected to a html page. So I downloaded HTML and tried to dispay it as image. The code works. toInternalURL, toURL, createObjectURL and readAsDataURL work perfect.
I create a "Play Youtube" App with PhoneGap(version 6.3.0) , Cordova (version 6.3.1) , simple load a youtube video by ID.
use Cordova YoutubeVideoPlayer plugin, using build.phonegap.com to build project, but not working with error:
An error occurred during the retrieval of the video. This could be due to network issue of YouTube protocols. Please try again later.
I test on android OS version 6.0.
Thanks in advance.
add to config.xml:
<plugin name="com.bunkerpalace.cordova.youtubevideoplayer" spec="1.0.1" source="pgb" />
Load youtube video when device ready in index.js
YoutubeVideoPlayer.openVideo('1s96mq8kfzY');
index.js
var app = {
initialize: function() {
this.bindEvents();
}, bindEvents: function() {
document.addEventListener('deviceready', this.onDeviceReady, false);
}, onDeviceReady: function() {
app.receivedEvent('deviceready');
},
receivedEvent: function(id) {
var parentElement = document.getElementById(id);
var listeningElement = parentElement.querySelector('.listening');
var receivedElement = parentElement.querySelector('.received');
listeningElement.setAttribute('style', 'display:none;');
receivedElement.setAttribute('style', 'display:block;');
console.log('Received Event: ' + id);
YoutubeVideoPlayer.openVideo('1s96mq8kfzY');
}
};
index.html
<html>
<head>
<meta charset="utf-8" />
<meta name="format-detection" content="telephone=no" />
<meta name="msapplication-tap-highlight" content="no" />
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width" />
<link rel="stylesheet" type="text/css" href="css/index.css" />
<title>Hello World</title>
</head>
<body>
<div class="app">
<h1>PhoneGap</h1>
<div id="deviceready" class="blink">
<p class="event listening">Connecting to Device</p>
<p class="event received">Device is Ready</p>
</div>
</div>
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" src="js/index.js"></script>
<script type="text/javascript">
app.initialize();
</script>
</body>
</html>
config.xml
<?xml version='1.0' encoding='utf-8'?>
<widget id="com.hd.yu" version="1.0.0" xmlns="http://www.w3.org/ns/widgets" xmlns:gap="http://phonegap.com/ns/1.0">
<name>YTube2</name>
<description>
Hello World sample application that responds to the deviceready event.
</description>
<author email="support#phonegap.com" href="http://phonegap.com">
PhoneGap Team
</author>
<content src="index.html" />
<preference name="DisallowOverscroll" value="true" />
<preference name="android-minSdkVersion" value="14" />
<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="com.bunkerpalace.cordova.youtubevideoplayer" spec="1.0.1" source="pgb" />
<icon src="icon.png" />
<platform name="android">
<icon density="ldpi" src="www/res/icon/android/drawable-ldpi-icon.png" />
<icon density="mdpi" src="www/res/icon/android/drawable-mdpi-icon.png" />
<icon density="hdpi" src="www/res/icon/android/drawable-hdpi-icon.png" />
<icon density="xhdpi" src="www/res/icon/android/drawable-xhdpi-icon.png" />
<icon density="xxhdpi" src="www/res/icon/android/drawable-xxhdpi-icon.png" />
<icon density="xxxhdpi" src="www/res/icon/android/drawable-xxxhdpi-icon.png" />
<splash density="land-ldpi" src="www/res/screen/android/drawable-land-ldpi-screen.png" />
<splash density="land-mdpi" src="www/res/screen/android/drawable-land-mdpi-screen.png" />
<splash density="land-hdpi" src="www/res/screen/android/drawable-land-hdpi-screen.png" />
<splash density="land-xhdpi" src="www/res/screen/android/drawable-land-xhdpi-screen.png" />
<splash density="land-xxhdpi" src="www/res/screen/android/drawable-land-xxhdpi-screen.png" />
<splash density="land-xxxhdpi" src="www/res/screen/android/drawable-land-xxxhdpi-screen.png" />
<splash density="port-ldpi" src="www/res/screen/android/drawable-port-ldpi-screen.png" />
<splash density="port-mdpi" src="www/res/screen/android/drawable-port-mdpi-screen.png" />
<splash density="port-hdpi" src="www/res/screen/android/drawable-port-hdpi-screen.png" />
<splash density="port-xhdpi" src="www/res/screen/android/drawable-port-xhdpi-screen.png" />
<splash density="port-xxhdpi" src="www/res/screen/android/drawable-port-xxhdpi-screen.png" />
<splash density="port-xxxhdpi" src="www/res/screen/android/drawable-port-xxxhdpi-screen.png" />
</platform>
<platform name="ios">
<icon height="57" platform="ios" src="www/res/icon/ios/icon.png" width="57" />
<icon height="114" platform="ios" src="www/res/icon/ios/icon#2x.png" width="114" />
<icon height="40" platform="ios" src="www/res/icon/ios/icon-40.png" width="40" />
<icon height="80" platform="ios" src="www/res/icon/ios/icon-40#2x.png" width="80" />
<icon height="50" platform="ios" src="www/res/icon/ios/icon-50.png" width="50" />
<icon height="100" platform="ios" src="www/res/icon/ios/icon-50#2x.png" width="100" />
<icon height="60" platform="ios" src="www/res/icon/ios/icon-60.png" width="60" />
<icon height="120" platform="ios" src="www/res/icon/ios/icon-60#2x.png" width="120" />
<icon height="180" platform="ios" src="www/res/icon/ios/icon-60#3x.png" width="180" />
<icon height="72" platform="ios" src="www/res/icon/ios/icon-72.png" width="72" />
<icon height="144" platform="ios" src="www/res/icon/ios/icon-72#2x.png" width="144" />
<icon height="76" platform="ios" src="www/res/icon/ios/icon-76.png" width="76" />
<icon height="152" platform="ios" src="www/res/icon/ios/icon-76#2x.png" width="152" />
<icon height="29" platform="ios" src="www/res/icon/ios/icon-small.png" width="29" />
<icon height="58" platform="ios" src="www/res/icon/ios/icon-small#2x.png" width="58" />
<icon height="87" platform="ios" src="www/res/icon/ios/icon-small#3x.png" width="87" />
<splash height="1136" platform="ios" src="www/res/screen/ios/Default-568h#2x~iphone.png" width="640" />
<splash height="1334" platform="ios" src="www/res/screen/ios/Default-667h.png" width="750" />
<splash height="2208" platform="ios" src="www/res/screen/ios/Default-736h.png" width="1242" />
<splash height="1242" platform="ios" src="www/res/screen/ios/Default-Landscape-736h.png" width="2208" />
<splash height="1536" platform="ios" src="www/res/screen/ios/Default-Landscape#2x~ipad.png" width="2048" />
<splash height="768" platform="ios" src="www/res/screen/ios/Default-Landscape~ipad.png" width="1024" />
<splash height="2048" platform="ios" src="www/res/screen/ios/Default-Portrait#2x~ipad.png" width="1536" />
<splash height="1024" platform="ios" src="www/res/screen/ios/Default-Portrait~ipad.png" width="768" />
<splash height="960" platform="ios" src="www/res/screen/ios/Default#2x~iphone.png" width="640" />
<splash height="480" platform="ios" src="www/res/screen/ios/Default~iphone.png" width="320" />
</platform>
<platform name="wp8">
<icon height="99" platform="wp8" src="www/res/icon/wp8/ApplicationIcon.png" width="99" />
<icon height="159" platform="wp8" src="www/res/icon/wp8/Background.png" width="159" />
<splash height="1280" platform="wp8" src="www/res/screen/wp8/screen-portrait.jpg" width="768" />
</platform>
<platform name="windows">
<icon height="150" platform="windows" src="www/res/icon/windows/Square150x150Logo.scale-100.png" width="150" />
<icon height="30" platform="windows" src="www/res/icon/windows/Square30x30Logo.scale-100.png" width="30" />
<icon height="50" platform="windows" src="www/res/icon/windows/StoreLogo.scale-100.png" width="50" />
<splash height="300" platform="windows" src="www/res/screen/windows/SplashScreen.scale-100.png" width="620" />
<icon height="120" platform="windows" src="www/res/icon/windows/StoreLogo.scale-240.png" width="120" />
<icon height="44" platform="windows" src="www/res/icon/windows/Square44x44Logo.scale-100.png" width="44" />
<icon height="106" platform="windows" src="www/res/icon/windows/Square44x44Logo.scale-240.png" width="106" />
<icon height="70" platform="windows" src="www/res/icon/windows/Square70x70Logo.scale-100.png" width="70" />
<icon height="71" platform="windows" src="www/res/icon/windows/Square71x71Logo.scale-100.png" width="71" />
<icon height="170" platform="windows" src="www/res/icon/windows/Square71x71Logo.scale-240.png" width="170" />
<icon height="360" platform="windows" src="www/res/icon/windows/Square150x150Logo.scale-240.png" width="360" />
<icon height="310" platform="windows" src="www/res/icon/windows/Square310x310Logo.scale-100.png" width="310" />
<icon height="150" platform="windows" src="www/res/icon/windows/Wide310x150Logo.scale-100.png" width="310" />
<icon height="360" platform="windows" src="www/res/icon/windows/Wide310x150Logo.scale-240.png" width="744" />
<splash height="1920" platform="windows" src="www/res/screen/windows/SplashScreenPhone.scale-240.png" width="1152" />
</platform>
<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>
<engine name="android" spec="~5.2.2" />
</widget>
I have developed the wifi application using wifiwizard and cordova for android devices and it works fine. I can choose the network and I can put the password and I can validate it and connect into it. But the problem is my company got some extra validations like identity number, employee type, and some other details. So how am I suppose to do these stuffs or how to add these for particular networks. I have uploaded my entire wifi application which works exactly I expected. Please have a look and help me to do it still better.
index.html
<!DOCTYPE html>
<head>
<meta name="format-detection" content="telephone=no">
<meta name="msapplication-tap-highlight" content="no">
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width">
<link rel="stylesheet" type="text/css" href="css/style.css">
<title>Wifi Wizard</title>
</head>
<body>
<div class = "content">
<table id = "displayNetworks" class = "table-responsive">
</table>
</div>
<script type="text/javascript" src="js/jquery-1.12.4.js"></script>
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" src="js/app.js"></script>
</body>
</html>
app.js
var unique_array = [];
$(document).ready(function(){
if(navigator.userAgent.match(/(iPhone|iPad|iPod|Android|BlackBerry)/)){
document.addEventListener("deviceready", onDeviceReady, false);
}else{
onDeviceReady();
}
});
function onDeviceReady(){
alert("I'm into the browser for debug");
window.setTimeout(function(){
WifiWizard.setWifiEnabled(true, win_enable, fail_enable);
}, 200);
}
function win_enable(){
alert("Wifi Enabled successfully");
}
function fail_enable(e){
alert(e.message);
}
window.setTimeout(function(){ alert("I'm in here");
WifiWizard.startScan(success_scan, fail_scan);
}, 1000);
function success_scan(){ alert("Trying to connect scan function");
window.setTimeout(function(){
getScanResult();
}, 2000);
}
function fail_scan(e){
alert(e.message);
}
function getScanResult(){alert("Im here too getting the scan result");
WifiWizard.getScanResults(listHandler, fail_network);
}
function listHandler(a){
alert(JSON.stringify(a));
var network_array = [];
for(var i = 0; i < a.length; i++){
network_array.push(a[i].SSID);
}
unique_array = network_array.filter(function(elem, pos){
return network_array.indexOf(elem) == pos;
});
alert(network_array);
var content = "<table>"
for(var j = 0; j < network_array.length; j++){
content += '<tr class="dynamicTable"><td>' + network_array[j] + '</td></tr>';
}
content += "</table>"
document.getElementById('displayNetworks').innerHTML = content;
}
function fail_network(e){
alert(e.message);
}
function clickWifi(netssid){ alert("Hello Im inside click function");
var id = netssid;
alert(id);
var promptWindow = prompt("Please enter the password for the network: " + id);
alert(promptWindow);
var connectWifi = WifiWizard.formatWPAConfig(id, promptWindow);
WifiWizard.addNetwork(connectWifi, function(){
WifiWizard.connectNetwork(id, connectSuccess, connectFailed);
});
}
function connectSuccess(e){
alert("Connected Successfully");
window.open("http://www.google.com", "_self");
}
function connectFailed(e){
alert(e.message);
}
And too I'm having problem with window.open in the function connectSuccess, the window.open is not working inside my application and if I come out of my application I can reach Google.
config.xml
<?xml version="1.0" encoding="UTF-8" standalone="yes"?>
<widget id="com.ionicframework.wifiexpandables353717" version="0.0.1" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0">
<name>WifiExpandables</name>
<description>
An Ionic Framework and Cordova project.
</description>
<author email="you#example.com" href="http://example.com.com/">
Your Name Here
</author>
<content src="index.html"/>
<access origin="*"/>
<preference name="webviewbounce" value="false"/>
<preference name="UIWebViewBounce" value="false"/>
<preference name="DisallowOverscroll" value="true"/>
<preference name="SplashScreenDelay" value="2000"/>
<preference name="FadeSplashScreenDuration" value="2000"/>
<preference name="android-minSdkVersion" value="16"/>
<preference name="BackupWebStorage" value="none"/>
<preference name="SplashScreen" value="screen"/>
<feature name="StatusBar">
<param name="ios-package" value="CDVStatusBar" onload="true"/>
</feature>
<platform name="android">
<icon src="resources/android/icon/drawable-ldpi-icon.png" density="ldpi"/>
<icon src="resources/android/icon/drawable-mdpi-icon.png" density="mdpi"/>
<icon src="resources/android/icon/drawable-hdpi-icon.png" density="hdpi"/>
<icon src="resources/android/icon/drawable-xhdpi-icon.png" density="xhdpi"/>
<icon src="resources/android/icon/drawable-xxhdpi-icon.png" density="xxhdpi"/>
<icon src="resources/android/icon/drawable-xxxhdpi-icon.png" density="xxxhdpi"/>
<splash src="resources/android/splash/drawable-land-ldpi-screen.png" density="land-ldpi"/>
<splash src="resources/android/splash/drawable-land-mdpi-screen.png" density="land-mdpi"/>
<splash src="resources/android/splash/drawable-land-hdpi-screen.png" density="land-hdpi"/>
<splash src="resources/android/splash/drawable-land-xhdpi-screen.png" density="land-xhdpi"/>
<splash src="resources/android/splash/drawable-land-xxhdpi-screen.png" density="land-xxhdpi"/>
<splash src="resources/android/splash/drawable-land-xxxhdpi-screen.png" density="land-xxxhdpi"/>
<splash src="resources/android/splash/drawable-port-ldpi-screen.png" density="port-ldpi"/>
<splash src="resources/android/splash/drawable-port-mdpi-screen.png" density="port-mdpi"/>
<splash src="resources/android/splash/drawable-port-hdpi-screen.png" density="port-hdpi"/>
<splash src="resources/android/splash/drawable-port-xhdpi-screen.png" density="port-xhdpi"/>
<splash src="resources/android/splash/drawable-port-xxhdpi-screen.png" density="port-xxhdpi"/>
<splash src="resources/android/splash/drawable-port-xxxhdpi-screen.png" density="port-xxxhdpi"/>
</platform>
</widget>
Add the following lines in config.xml. It should work fine.
<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>
I am having issues with my phoneGap build, I am trying to build a recording app, I have all the plugin and codes in place, when I use the phoneGap iOS emulator and load the app, it allows me to record. When I go to build.phonegap and use their tool to build the apk package and then I installed the app on my iPhone and click the button to launch the recorder nothing happens, the recording interface does not launch as it did with the emulator. Any help would be greatl
*****Index.html
<!DOCTYPE html>
<html>
<head>
<title>M title</title>
<link rel="stylesheet" type="text/css" href="style.css">
<script type="text/javascript" charset="utf-8" src="phonegap.js"></script>
<script type="text/javascript" charset="utf-8" src="cordova.js"></script>
<script type="text/javascript" charset="utf-8" src="custom.js"></script>
<script type="text/javascript" charset="utf-8">
// Called when capture operation is finished
//
function captureSuccess(mediaFiles) {
var i, len;
for (i = 0, len = mediaFiles.length; i < len; i += 1) {
uploadFile(mediaFiles[i]);
}
}
// Called if something bad happens.
//
function captureError(error) {
var msg = 'An error occurred during capture: ' + error.code;
navigator.notification.alert(msg, null, 'Uh oh!');
}
// A button will call this function
//
function captureAudio() {
// Launch device audio recording application,
// allowing user to capture up to 2 audio clips
navigator.device.capture.captureAudio(captureSuccess, captureError, {limit: 2});
}
// Upload files to server
function uploadFile(mediaFile) {
var ft = new FileTransfer(),
path = mediaFile.fullPath,
name = mediaFile.name;
ft.upload(path,
"http://my.domain.com/upload.php",
function(result) {
console.log('Upload success: ' + result.responseCode);
console.log(result.bytesSent + ' bytes sent');
},
function(error) {
console.log('Error uploading file ' + path + ': ' + error.code);
},
{ fileName: name });
}
</script>
</head>
<body onload="getTitle();">
<ul id="nav">
<li>← Back</li>
<li></li>
</ul>
<button onclick="captureAudio();">Capture Audio</button> <br>
</body>
</html>
*****Config.xml
<widget xmlns="http://www.w3.org/ns/widgets" xmlns:gap="http://phonegap.com/ns/1.0" id="com.phonegap.iriejam" version="1.0.0">
<name>irieJam</name>
<description>Hello World sample application that responds to the deviceready event.</description>
<author href="http://phonegap.com" email="support#phonegap.com">PhoneGap Team</author>
<content src="index.html"/>
<preference name="permissions" value="none"/>
<preference name="orientation" value="default"/>
<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="ios-statusbarstyle" value="black-opaque"/>
<preference name="detect-data-types" value="true"/>
<preference name="exit-on-suspend" value="false"/>
<preference name="show-splash-screen-spinner" value="true"/>
<preference name="auto-hide-splash-screen" value="true"/>
<preference name="disable-cursor" value="false"/>
<preference name="android-minSdkVersion" value="7"/>
<preference name="android-installLocation" value="auto"/>
<gap:plugin name="org.apache.cordova.battery-status"/>
<gap:plugin name="org.apache.cordova.camera"/>
<gap:plugin name="org.apache.cordova.media-capture"/>
<gap:plugin name="org.apache.cordova.console"/>
<gap:plugin name="org.apache.cordova.contacts"/>
<gap:plugin name="org.apache.cordova.device"/>
<gap:plugin name="org.apache.cordova.device-motion"/>
<gap:plugin name="org.apache.cordova.device-orientation"/>
<gap:plugin name="org.apache.cordova.dialogs"/>
<gap:plugin name="org.apache.cordova.file"/>
<gap:plugin name="org.apache.cordova.file-transfer"/>
<gap:plugin name="org.apache.cordova.geolocation"/>
<gap:plugin name="org.apache.cordova.globalization"/>
<gap:plugin name="org.apache.cordova.inappbrowser"/>
<gap:plugin name="org.apache.cordova.media"/>
<gap:plugin name="org.apache.cordova.network-information"/>
<gap:plugin name="org.apache.cordova.splashscreen"/>
<gap:plugin name="org.apache.cordova.vibration"/>
<gap:plugin name="org.apache.cordova.inappbrowser" />
<icon src="icon.png"/>
<icon src="www/res/icon/android/icon-36-ldpi.png" gap:platform="android" gap:qualifier="ldpi"/>
<icon src="www/res/icon/android/icon-48-mdpi.png" gap:platform="android" gap:qualifier="mdpi"/>
<icon src="www/res/icon/android/icon-72-hdpi.png" gap:platform="android" gap:qualifier="hdpi"/>
<icon src="www/res/icon/android/icon-96-xhdpi.png" gap:platform="android" gap:qualifier="xhdpi"/>
<icon src="www/res/icon/blackberry/icon-80.png" gap:platform="blackberry"/>
<icon src="www/res/icon/blackberry/icon-80.png" gap:platform="blackberry" gap:state="hover"/>
<icon src="www/res/icon/ios/icon-57.png" gap:platform="ios" width="57" height="57"/>
<icon src="www/res/icon/ios/icon-72.png" gap:platform="ios" width="72" height="72"/>
<icon src="www/res/icon/ios/icon-57-2x.png" gap:platform="ios" width="114" height="114"/>
<icon src="www/res/icon/ios/icon-72-2x.png" gap:platform="ios" width="144" height="144"/>
<icon src="www/res/icon/webos/icon-64.png" gap:platform="webos"/>
<icon src="www/res/icon/windows-phone/icon-48.png" gap:platform="winphone"/>
<icon src="www/res/icon/windows-phone/icon-173-tile.png" gap:platform="winphone" gap:role="background"/>
<gap:splash src="www/res/screen/android/screen-ldpi-portrait.png" gap:platform="android" gap:qualifier="port-ldpi"/>
<gap:splash src="www/res/screen/android/screen-mdpi-portrait.png" gap:platform="android" gap:qualifier="port-mdpi"/>
<gap:splash src="www/res/screen/android/screen-hdpi-portrait.png" gap:platform="android" gap:qualifier="port-hdpi"/>
<gap:splash src="www/res/screen/android/screen-xhdpi-portrait.png" gap:platform="android" gap:qualifier="port-xhdpi"/>
<gap:splash src="www/res/screen/blackberry/screen-225.png" gap:platform="blackberry"/>
<gap:splash src="www/res/screen/ios/screen-iphone-portrait.png" gap:platform="ios" width="320" height="480"/>
<gap:splash src="www/res/screen/ios/screen-iphone-portrait-2x.png" gap:platform="ios" width="640" height="960"/>
<gap:splash src="www/res/screen/ios/screen-iphone-portrait-568h-2x.png" gap:platform="ios" width="640" height="1136"/>
<gap:splash src="www/res/screen/ios/screen-ipad-portrait.png" gap:platform="ios" width="768" height="1024"/>
<gap:splash src="www/res/screen/ios/screen-ipad-landscape.png" gap:platform="ios" width="1024" height="768"/>
<gap:splash src="www/res/screen/windows-phone/screen-portrait.jpg" gap:platform="winphone"/>
<access origin="*"/>
<plugin name="cordova-plugin-whitelist" version="1"/>
<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>
</widget>
I was experiencing that issue because when you upload the www zipped folder to build.phonegap, you must include the config.xml in order for phonegap to generate the apps with the appropriate plugin libraries.