I am trying to generate an apk for a polymer app using cordova. But i am facing difficulty as the generated apk is not able to render properly in the mobile application (Android version 6.0 which is > 4.1 which is supported by Polymer). I referred this for building the app but it did not work. The polymer app is woking as expected in the web browser but when in apk form in a mobile it does not work.
Contents of Index.html
<html>
<head>
<title>myApp</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="mobile-web-app-capable" content="yes">
<link rel="manifest" href="/manifest.json">
<script src="/bower_components/webcomponentsjs/webcomponents-lite.js"></script>
<link rel="import" href="/src/main-app/main-app.html">
<link rel="import" href="/bower_components/paper-header-panel/paper-header-panel.html">
<link rel="import" href="/bower_components/paper-toolbar/paper-toolbar.html">
<link rel="import" href="/bower_components/paper-icon-button/paper-icon-button.html">
<link rel="import" href="/bower_components/paper-tabs/paper-tabs.html">
<link rel="import" href="/bower_components/iron-icons/iron-icons.html">
<link rel="import" href="/bower_components/iron-flex-layout/iron-flex-layout.html">
<link rel="import" href="/bower_components/gold-phone-input/gold-phone-input.html">
</head>
<body class="app">
<paper-header-panel class="flex">
<paper-toolbar class="medium-tall">
<paper-icon-button id="navicon" icon="menu"></paper-icon-button>
<!-- flex class forces span to fill space between icons -->
<span class="flex">Title</span>
<!-- icon displays at right because of span class above -->
<paper-icon-button id="morebutton" icon="more-vert"></paper-icon-button>
<paper-tabs class="bottom fit" selected="0">
<paper-tab>ONE</paper-tab>
<paper-tab>TWO</paper-tab>
</paper-tabs>
</paper-toolbar>
<div>Content</div>
</paper-header-panel>
<gold-phone-input country-code="91" phone-number-pattern="XX-XX-XXXXXX">
</gold-phone-input>
<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>
I have also tried adding Crosswalk to Cordova but it still does not work.
Please let me know if any more information is required.
Will Appreciate any help.
Related
I am working on HTML5 application with Trigger IO framework.I tested it on iPhone and it is working well there.But problem is with the Android. I am getting following error when I debug the application.
Failed to load resource: net::ERR_UNKNOWN_URL_SCHEME
this is for every resource file referenced from the html header. My header code is :
<script src="js/jquery-1.11.1.min.js"></script>
<script src="js/index.js"></script>
both files are present on the location and working well on iOS. But problem is with Android/Chrome. Any workaround ?
EDIT
Following is the header of the index.html :
<head>
<title>My App</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
'self'; img-src https://*; child-src 'none';">
<link rel="stylesheet" href="css/style.css" />
<link rel="stylesheet" href="css/slick.css" />
<link rel="stylesheet" type="text/css" href="js/slick-theme.css"/>
<link rel="stylesheet" href="themes/jquery.mobile.icons.min.css" />
<link rel="stylesheet" href="css/jquery.mobile.structure-1.4.5.min.css" />
<script type="text/javascript" src="js/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="js/jquery.mobile-1.4.5.min.js"></script>
<script type="text/javascript" src="js/jquery-migrate-1.2.1.min"></script>
<script type="text/javascript" src="js/index.js"></script>
<script type="text/javascript" src="js/network.js"></script>
<script type="text/javascript" src="js/jquery.validate.min.js"></script>
<script type="text/javascript" src="js/slick.min.js"></script>
</head>
Note : If I remove jquery.mobile-1.4.5.min.js file then it is taking reference of index.js
It could be a regression of:
https://github.com/jquery/jquery-mobile/issues/6746
You can use the httpd module as a workaround for this and similar bugs in other libraries:
https://trigger.io/modules/httpd/current/docs/index.html
I am newbie in hybrid app development using ionic 1 with angularJs.
I have deployed the app to my samsung device (android). I found out that when I touch any elements (eg: button) it doesn't have any sounds effect.
How to enable the touch sound like the native app?
I also visited this article http://gonehybrid.com/how-to-add-sound-effects-to-your-ionic-app-with-native-audio/ , but this is not I want to achieve. It teach on how to enable and load audio in the app. However, I want to have the native touch sound of the phone
I apologize if this similar question exist in somewhere else, I have searched through a lot of sites and I couldn't find an answer
I also tried https://github.com/MatiMenich/cordova-plugin-nativeClickSound and no luck.. Please find the code below for my index.html and controller.js
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title></title>
<link rel="manifest" href="manifest.json">
<link href="lib/ionic/css/ionic.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<!-- ionic/angularjs js -->
<script src="lib/ionic/js/ionic.bundle.js"></script>
<script src="lib/ionic/js/angular/angular-resource.min.js"></script>
<script src="lib/ngCordova/dist/ng-cordova.js"></script>
<!-- cordova script (this will be a 404 during development) -->
<script src="cordova.js"></script>
<!-- your app's js -->
<script src="js/app.js"></script>
<script src="js/controllers.js"></script>
<script src="js/services.js"></script>
</head>
<body ng-app="starter">
<ion-nav-bar class="bar-stable">
<ion-nav-back-button>
</ion-nav-back-button>
</ion-nav-bar>
<ion-nav-view></ion-nav-view>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title></title>
<link rel="manifest" href="manifest.json">
<link href="lib/ionic/css/ionic.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<!-- ionic/angularjs js -->
<script src="lib/ionic/js/ionic.bundle.js"></script>
<script src="lib/ionic/js/angular/angular-resource.min.js"></script>
<script src="lib/ngCordova/dist/ng-cordova.js"></script>
<!-- cordova script (this will be a 404 during development) -->
<script src="cordova.js"></script>
<!-- your app's js -->
<script src="js/app.js"></script>
<script src="js/controllers.js"></script>
<script src="js/services.js"></script>
</head>
<body ng-app="starter">
<ion-nav-bar class="bar-stable">
<ion-nav-back-button>
</ion-nav-back-button>
</ion-nav-bar>
<ion-nav-view></ion-nav-view>
</body>
</html>
controller.js
.controller('SoundController', function($ionicPlatform, $scope, $timeout){
var clickyClasses = ['sound-click', 'button'];
nativeclick.watch(clickyClasses);
$scope.click = function() {
nativeclick.trigger();
};
})
You can try https://github.com/MatiMenich/cordova-plugin-nativeClickSound. It's under MIT License. Hope it'll help you
This will applied native sound to all button and an "a" tag with href when clicking it.
var clickyClasses = ['button', 'a'];
nativeclick.watch(clickyClasses);
install plugin 'cordova plugin add cordova-plugin-nativeclicksound'
use this code in app.js
.controller('MyController',function($scope,
$cordovaNativeAudio) {
$scope.sound = function() {
nativeclick.trigger();
};
});
you can use sound() function where ever you want native sound, for example button
<button ng-click="sound()">native sound</button>
test it in device, web browser through error.
I've written an app in cordova 4.0 with jquery mobile & jquery, and when I try to run the app on Galaxy 2 with android 2.3.5 (gingerbread) all I get is white screen without any error or anything going on.
note: I capture any exceptions from javascript and alert them, so if there was an exception I should have seen a message. but there's nothing.
any idea why? does Cordova suppose to work properly on android 2.x? I found mix opinions on that subject...
thanks!
EDIT: adding the source code. note that I have js that wrap cordova so everything under utils.* is a wrapper layer for cordova. this is index.html, the first page that should be loaded. another thing I want to say is that I added a code to catch and alert any exceptions (window.onerror = function(message, url, lineNumber)...) and alert them, and it usually work but in this case I see no alert.
<!DOCTYPE html>
part of pages we load does not work.
-->
<meta charset="utf-8" />
<meta name="format-detection" content="telephone=no" />
<!-- WARNING: for iOS 7, remove the width=device-width and height=device-height attributes. See https://issues.apache.org/jira/browse/CB-4323 -->
<!-- <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" /> -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- My extensions to jquery-mobile css -->
<link rel="stylesheet" type="text/css" href="css/my-jquerymobile-extend.css" />
<!-- all basic css -->
<link rel="stylesheet" type="text/css" href="css/jquery.mobile-1.4.5.min.css" />
<link rel="stylesheet" type="text/css" href="css/msgbox.css" />
<link rel="stylesheet" type="text/css" href="css/intro.css" />
<link rel="stylesheet" type="text/css" href="css/splash.css" />
<link rel="stylesheet" type="text/css" href="css/main.css" />
<link rel="stylesheet" type="text/css" href="css/result_page.css" />
<link rel="stylesheet" type="text/css" href="css/intlTelInput.css" />
<title>SeekWhale</title>
<!-- include cordova and jquery -->
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" charset="utf-8" src="telephonenumber.js"></script>
<script type="text/javascript" src="js/jquery/jquery.2.1.1.min.js"></script>
<script type="text/javascript" src="js/jquery/custom_loading_gif.js"></script>
<script type="text/javascript" src="js/jquery/jquery.mobile-1.4.5.min.js"></script>
<script type="text/javascript" src="js/jquery/jquery-ui-draggable.min.js"></script>
<script type="text/javascript" src="js/jquery/jquery.ui.touch-punch.min.js"></script>
<!-- Include utils -->
<script type="text/javascript" src="js/utils/config.js"></script>
<script type="text/javascript" src="js/utils/flags.js"></script>
<script type="text/javascript" src="js/utils/ajax.js"></script>
<script type="text/javascript" src="js/utils/debug.js"></script>
<script type="text/javascript" src="js/utils/visuals.js"></script>
<script type="text/javascript" src="js/utils/device.js"></script>
<script type="text/javascript" src="js/utils/contacts.js"></script>
<script type="text/javascript" src="js/utils/events.js"></script>
<script type="text/javascript" src="js/utils/navigation.js"></script>
<script type="text/javascript" src="js/utils/phone_numbers.js"></script>
<script type="text/javascript" src="js/utils/prompt.js"></script>
<script type="text/javascript" src="js/utils/forms.js"></script>
<!-- Replace UI language with chosen language -->
<script type="text/javascript" src="js/languages/dictionary.js"></script>
<script type="text/javascript" src="js/languages/hebrew.js"></script>
<!-- function to init pages -->
<script type="text/javascript" src="js/init_page.js"></script>
</head>
<body data-role="page">
<img class="splash" src="img/bg-entry.png"></img>
<script type="text/javascript">
// set language
ui_dictionary.set_dictionary_words();
// called when cordova is ready to run page init script
function InitApp()
{
setTimeout(function()
{
utils.prompt.log("app started!");
var effect = utils.navigation.transition.slidedown;
// if should skip directly to main
if (utils.flags.skip_to_main)
{
utils.prompt.log("skip to main page");
utils.navigation.load_page(utils.config.get_last_page(), effect);
}
// if require first setup open the first setup page:
else if (utils.config.get_successfully_registered() == false)
{
utils.prompt.log("load register");
utils.navigation.load_page("register.html", effect);
}
// if registered but not confirmed, go to confirm page
else if (utils.config.get_is_device_confirmed() == false)
{
utils.prompt.log("load confirm page");
utils.navigation.load_page("confirm.html", effect);
}
// if all goes well, open the main page!
else
{
utils.prompt.log("load main page");
utils.navigation.load_page("main.html", effect);
}
}, 1);
}
utils.events.on_device_ready(InitApp);
</script>
</body>
<script type="text/javascript" src="cordova.js"></script>
this one should be the first js to be loaded. put all other js files after it.
I use Cordova.jar 2.9.0.
Here is the code:
<html>
<head>
<meta charset="utf-8" />
<meta name="format-detection" content="telephone=no" />
<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" />
<link rel="stylesheet" type="text/css" href="css/index.css" />
<title>Hello World</title>
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" src="js/index.js"></script>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script type="text/javascript">
$(function () {
$("#BtnNavigation").click(function () {
alert("dfgdfgh");
window.location.assign("guidance-drive://v2.0/navigate/destination/?latlon='25.245789','75.254789'&title=Hello World");
});
});
</script>
</head>
<body>
"http://example.com"
<button id="BtnNavigation" name="Map" style="padding: 50px 100px;">Map</button>
</body>
</html>
Button click shows error:
The Protocol Not Supported(guidance-drive://v2.0/navigate/destination/?latlon='25.245789','75.254789'&title=Hello World)
some text to get rid of "it looks like your post is mostly code; please add some more details"
The Url Scheme used with Windows Phone 8 devices is not implemented with Nokia X devices, and thus you can not use it with Nokia X devices. Also as far as I know, there is no public offering for HERE Drive usage implemented with Nokia X, thus I could not even suggest any alternative API to use.
Is it possible to use Google Maps API V3 for mobile app development when using PhoneGap/Cordova? My index page has a link to a map page that has the following in it:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="format-detection" content="telephone=no" />
<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" />
<link rel="stylesheet" type="text/css" href="css/index.css" />
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<title>Map Page</title>
</head>
<body>
<div class="app">
<div id="map-canvas"></div>
</div>
<script type="text/javascript" src="phonegap.js"></script>
<script type="text/javascript" src="js/index.js"></script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.ui.map.full.min.js"></script>
<script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
<script type="text/javascript">
app.initialize();
</script>
<script type="text/javascript">
$('#map-canvas').gmap({'center': '57.7973333,12.0502107', 'zoom': 10, 'disableDefaultUI':false, 'callback': function() {}});
</script>
</body>
</html>
I'm including the Google Maps jQuery plugin and the other necessary files. When I test the app in my desktop browser, Ripple, and (mysteriously) on my old Samsung Galaxy S the map loads up just fine. When I try it in the Android emulator or on an Galaxy S4 the map does not load and I am left with an empty white page. Is there a different/better way I could be using Google Maps on and Android app or is there something I need to change in my above code? Thanks.
Change your script tag to:
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=false" />
I believe the one you are using is for v2 as stated here
In my case the google apis couldn't be loaded because the app didn't had permission to access the internet.
So dont' forget to add internet access permission to your app in your AndroidManifest.xml
<uses-permission android:name="android.permission.INTERNET" />
And for other features (location, camera,...) make sure the corresponding permission has been set for this app and device