I'm trying to create an app that can run on Android, iOS and Windows Phone using PhoneGap. Currently, I have only phones with Android so I can't know if the problem I'm having exists on iOS and WP.
I tried the notification (alert, beep and vibration) and the camera APIs.
I took the code lines from the Apache Cordova Documentation. I built the app on PhoneGap Built site, scanned the barcode etc. The app is installed and launched perfectly on the phones but nothing is working (for example, when I clicked on the "Vibrate" link, it doesn't vibrate).
The install and all were done by my tutors (I'm in intership), so I guess it's okay for that part.
I checked for the uses-permissions in the AndroidManifest.xml and it's okay.
I've been looking for answers by searching on google, forums etc. but so far, I've found nothing that matches or fixes my issue. That's why I'm posting this message (please don't pay to much attention for language mistake, I'm not an english native speaker).
Thank you in advance for your help.
Edit : 1st phone : Samsung Galaxy Grand Plus (GT-I9060I), Android : 4.4.4. 2nd phone : Samsung Galaxy S5 Prime (SM-G901F), Android : 5.0.2
Using Cordova version 5.0.0. Necessary plugin features have already been added.
Code from the Apache Cordova Documentation for the notifications :
<!DOCTYPE html>
<html>
<head>
<title>Notification Example</title>
<script type="text/javascript" charset="utf-8" src="cordova-1.5.0.js"></script>
<script type="text/javascript" charset="utf-8">
// Wait for PhoneGap to load
//
document.addEventListener("deviceready", onDeviceReady, false);
// PhoneGap is ready
//
function onDeviceReady() {
// Empty
}
// Show a custom alert
//
function showAlert() {
navigator.notification.alert(
'You are the winner!', // message
'Game Over', // title
'Done' // buttonName
);
}
// Beep three times
//
function playBeep() {
navigator.notification.beep(3);
}
// Vibrate for 2 seconds
//
function vibrate() {
navigator.notification.vibrate(2000);
}
</script>
</head>
<body>
<p>Show Alert</p>
<p>Play Beep</p>
<p>Vibrate</p>
</body>
If you are having cordova version prior to 3.0.0 then you must include plugins manually in config.xml which resides in resources folder.
If cordova version is >= 3.0.0 then you must include these native features via command line.
You need to provide the events such as click, touchend, pagebeforeshow etc. in OnDeviceReady() method. i.e. you have to register listeners to the HTML elements so that they listen to the events.
It seems that I was not using the correct version of the Apache Cordova Documention (5.0.0) but an older version. The following code is taken from the doc and is working only for vibrate(), and once again, nothing is happening for playBeep() and showAlert(). It doesn't make sense.
I also tried the Camera API (from the correct version of the doc) and it's not working either. I really don't understand why it's okay for vibration and not for the other API.
<!DOCTYPE html>
<html>
<head>
<title>Notification Example</title>
<script type="text/javascript" charset="utf-8" src="cordova.js"></script>
<script type="text/javascript" charset="utf-8">
document.addEventListener("deviceready", onDeviceReady, false);
function onDeviceReady() {
console.log(navigator.notification);
console.log(navigator.vibrate);
}
function alertDismissed() {
alert('Dismissed');
}
function showAlert() {
navigator.notification.alert(
'You are the winner!', // message
alertDismissed, // callback
'Game Over', // title
'Done' // buttonName
);
}
function playBeep() {
navigator.notification.beep(2);
}
function vibrate() {
navigator.vibrate(3000);
}
</script>
</head>
<body>
<p><a href="#" onclick="showAlert();
return false;">Show Alert</a></p>
<p><a href="#" onclick="playBeep();
return false;">Play Beep</a></p>
<p><a href="#" onclick="vibrate();
return false;">Vibrate</a></p>
</body>
</html>
Related
I have the next test code:
html:
<html>
<head>
<script src="js/app.js"></script>
<script src="cordova.js"></script>
</head>
<body>
<p><button>Show keyboard</button></p>
<p><input></input></p>
<p><span>?</span></p>
</body>
</html>
and js:
document.addEventListener("deviceready", handler, false);
function handler() {
window.addEventListener('native.keyboardshow', function() {
document.getElementsByTagName("span")[0].innerHTML = "showed";
});
document.getElementsByTagName("button")[0].addEventListener("click", function() {
document.getElementsByTagName("input")[0].focus();
cordova.plugins.Keyboard.show();
});
}
The show() function works, and I understand that the plugin is available from my app. But when the keyboard is showed nothing occurs: my span tag doesn't get the "showed" text.
What is an issue?
If you are targeting Android, add <preference name="android-windowSoftInputMode" value="adjustResize" /> to config.xml as noted in this answer: https://stackoverflow.com/a/31683935/5356747
With this preference set keyboard events started to fire in my app.
You probably have added cordova-plugin-keyboard (its events doesn't fire on android. Plus, the name of events are also different).
You need to add ionic-plugin-keyboard:
cordova plugin add ionic-plugin-keyboard --save
Now I am developing a time reminder application where I need to display an alert message every hour. The alert must also be displayed when the application is running in background and in offline mode as well.
It should work for both Android and iOS platforms.
Please help me out this. Thanks in Advance.
Try using this Local Notification Plugin. Your code needs to look something like this:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" charset="utf-8" src="cordova.js"></script>
<script type="text/javascript" charset="utf-8">
// Wait for device API libraries to load
function onLoad() {
document.addEventListener("deviceready", onDeviceReady, false);
}
// device APIs are available
function onDeviceReady() {
// Now safe to use device Plugins
cordova.plugins.notification.local.schedule({
id: 1,
text: 'My first notification',
every: 'hour',
firstAt: next_monday,
data: { key:'value' }
});
}
</script>
</head>
<body onload="onLoad()">
</body>
</html>
i am trying to insert background audio on my first page on a phonegap app. Currently i am testing this on Android 2.2 (on actual phone) but final app is intended for iOS as well
I have used various methods, the only one that had some success is through javascript. I get a very weird behavior (for me at least). Audio plays only if i click on the button and not on page load even though both(button and ready function) call the same function (playAudio) and when the page loads i do get the alert which means that the playAudio function has been successfully called.
1) Do i do something wrong? How can i fix this please? any ideas?
2) why does the < embed > not work on Android (it works just fine as it should on the desktop browser btw). (i have used 2 embeds for testing purposes with different paths, none works on Android) This should be the easiest way to do background audio..
My intention is of course to get rid of the button and have the music to play automatically on page load.
thank you
Here is my code:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" charset="utf-8" src="cordova.js"></script>
<script src="js/jquery.js"></script>
<script type="text/javascript" src="phonegap.js"></script>
<script>
$(document).ready(function(){
alert('ready');
playAudio('intro.mp3')
});
function playAudio(src) {
alert('func::playAudio(src)');
if (device.platform == 'Android') {
src = '/android_asset/www/' + src;
}
var media = new Media(src, success, error_error);
media.play();
}
function success() {
// ignore
}
function error_error(e) {
alert('great error');
alert(e.message);
}
</script>
</head>
<body>
<div class="container-fluid">
<button id="button" onclick="playAudio('intro.mp3')"></button>
<embed name="introAudio" src="intro.mp3" loop="false" hidden="true" autostart="true">
<embed name="introAudio2" src="/android_asset/www/intro.mp3" loop="false" hidden="true" autostart="true">
</div>
<script type="text/javascript" src="js/index.js"></script>
<script type="text/javascript">
app.initialize();
</script>
</body>
</html>
I was able to use your code and get the audio to play when the page loads without clicking a button. I tested on Android 4.2 and on Android 2.2 and did not have any problems, beside having to remove the alert call in your playAudio function, since the alert() blocks JS execution and stops the call to play media until the dialog is dismissed.
document.addEventListener('deviceready', onDeviceReady, false);
function onDeviceReady(){
console.log("Device is ready.");
playAudio('intro.mp3');
}
function playAudio(src) {
if (device.platform == 'Android') {
src = '/android_asset/www/' + src;
}
var media = new Media(src, success, error_error);
media.play();
}
function success() { console.log("working");} // in your question above,
// you have a comment that causes a missing '}'
function error_error(e) {
alert('great error');
alert(e.message);
}
This code works fine on both devices. As I pointed out above, in the code that you have in the question, your success method is invalid, because the comment hides the closing brace:
function success() { // ignore }
If you were to do
function success() { } then it will work.
Edit: also, the <embed> seemed to work fine for me on both..at least, I guess it did, since the audio was there. What do you mean "it doesn't work?" Do you expect some sort of UI controls or something?
<!DOCTYPE html>
<html>
<head>
<title>PhoneGap Back Button Example</title>
<script type="text/javascript" charset="utf-8" src="cordova-2.2.0.js"></script>
<script type="text/javascript" charset="utf-8">
// Call onDeviceReady when PhoneGap is loaded.
//
// At this point, the document has loaded but phonegap-1.2.0.js has not.
// When PhoneGap is loaded and talking with the native device,
// it will call the event `deviceready`.
//
function onLoad() {
document.addEventListener("deviceready", onDeviceReady, false);
}
// PhoneGap is loaded and it is now safe to call PhoneGap methods
//
function onDeviceReady() {
// Register the event listener
document.addEventListener("backbutton", onBackKeyDown, false);
}
// Handle the back button
//
function onBackKeyDown() {alert("back button pressed");
}
</script>
</head>
<body onload="onLoad()">
</body>
</html>
I want to ask if user want to exit from my app, when it click on back button.
I read this example from http://docs.phonegap.com/en/1.2.0/phonegap_events_events.md.html#backbutton
but it is not working...
How can I do to do it?
I SET SOME ALERT IN ONDEVICEREADY FUNCTION, AND I HAVE SEEN THAT IS NEVER FIRED THIS METHOD....SO THE EVENTLISTENERE DEVICEREADY IS NEVER FIRED...WHY?????
Thanks a lot.
It looks like you should definitely see the alert based on your code and your link. However the tutorial is for version 1.2 and you're using version 2.2. You may want to check that for tutorials using the same version. If one doesn't exist then the functionality may have been removed or you'll need to discuss with the Cordova developers about this problem.
If onDeviceReady() is not fired means that PhoneGap is not yet loaded.
Please make sure that your cordova-2.2.0.js file is in the correct location. As per your sample ".html" and "cordova-2.2.0.js" file should be in the same folder
I created notification icon using system notification plugin in android phonegap.But Now I want to call the built-in notification system in the OS(Android,iphone) using android phonegap. please guide me
thanks in advance.
If you're talking about local notification like alerts, confirms... in PhoneGap you need to take a look at PhoneGap API : Notification
If you're talking about notification that are sent from a server to the device you need to take a look a Push Notification tutorials for Android
Which one are you trying to implement ?
You need to use
navigator.notification.alert("")
or
alert("")
to show the notifications.
Using these commands phonegap will will inoke native notifications(Like for Android it will invoke alert dialog).
I tried putting the following code into a html and ran it and I uploaded it in my server and opened the link in my Safari browser in my iPhone and the clicked on Show Confirm and no window popups up!
<!DOCTYPE html>
<html>
<head>
<title>Notification Example</title>
<script type="text/javascript" charset="utf-8" src="http://mobile-web-development-with-phonegap.eclipselabs.org.codespot.com/svn-history/r99/trunk/com.mds.apg/resources/phonegap/js/phonegap-1.0.0.js"></script>
<script type="text/javascript" charset="utf-8">
// Wait for PhoneGap to load
document.addEventListener("deviceready", onDeviceReady, false);
// PhoneGap is ready
function onDeviceReady() {
// Empty
}
// process the confirmation dialog result
function onConfirm(button) {
alert('You selected button ' + button);
}
// Show a custom confirmation dialog
function showConfirm() {
navigator.notification.confirm(
'You are the winner!', // message
onConfirm, // callback to invoke with index of button pressed
'Game Over', // title
'Restart,Exit' // buttonLabels
);
}
</script>
</head>
<body>
<p>Show Confirm</p>
</body>
</html>