We are building a android application using Ionic (+Cordova).
It all works in my browser, but when I build it and run the .apk this happens:
External images won't appear, and embeded google maps remain empty. The following code at our 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 href="lib/ionic/css/ionic.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<!-- IF using Sass (run gulp sass first), then uncomment below and remove the CSS includes above
<link href="css/ionic.app.css" rel="stylesheet">
-->
<!-- ionic/angularjs js -->
<script src="lib/ionic/js/ionic.bundle.js"></script>
<script src="js/ng-cordova.min.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>
</head>
<body ng-app="starter">
<ion-pane>
<ion-header-bar class="bar-stable">
</ion-header-bar>
<ion-content>
<div class="main" role="main">
<p id="geolocation">Finding geolocation...</p>
<img src="http://placehold.it/350x150.png" alt="no image" />
<iframe src="https://www.google.com/maps/embed?pb=!1m14!1m12!1m3!1d635472.0298105411!2d5.1189025!3d51.525825749999996!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!5e0!3m2!1snl!2snl!4v1432033961557" width="600" height="450" frameborder="0" style="border:0"></iframe>
</div>
</ion-content>
</ion-pane>
</body>
</html>
In the config.xml we've created the following lines just after the closing tag of :
<allow-navigation href="*" />
<allow-intent href="*" />
Check your manifest to allow your app to use internet.
<uses-permission android:name="android.permission.INTERNET" />
If you are using cordova 5 (Android platform version 4.0.0) then you should include the whitelist plugin and also the new content security policy meta tag to allow google maps api to load like this (on the top of your html file along with the rest meta tags):
<meta http-equiv="Content-Security-Policy" content="default-src *;
style-src 'self' 'unsafe-inline' http://fonts.googleapis.com/;
script-src 'self' 'unsafe-inline' 'unsafe-eval' http://*.googleapis.com
http://maps.gstatic.com;">
EDIT:
Check also your config.xml what access you give:
<access origin="*" />
for instance to allow all connections
If it doesn't work please check your logs and post any errors.
No forget add
android:usesCleartextTraffic="true"
into application tag on AndroidManifest.xml
After test into real device.
Related
This issue has been driving me crazy for one week:
Google Maps works on a browser but not on the device, I have already removed all the plugins and the Android platform, then reinstalled platform and plugins but the map does not work on the device. The code :
index.html
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="UTF-8">
<title>Ionic App</title>
<meta name="viewport" content="width=device-width,height=device-height, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<meta http-equiv="Content-Security-Policy" content="default-src *; script- src 'self' 'unsafe-inline' 'unsafe-eval' *; style-src 'self' 'unsafe-inline' *">
<meta name="format-detection" content="telephone=no">
<meta name="msapplication-tap-highlight" content="no">
<link rel="icon" type="image/x-icon" href="assets/icon/favicon.ico">
<link rel="manifest" href="manifest.json">
<meta name="theme-color" content="#4e8ef7">
<!-- un-comment this code to enable service worker
<script>
if ('serviceWorker' in navigator) {
navigator.serviceWorker.register('service-worker.js')
.then(() => console.log('service worker installed'))
.catch(err => console.error('Error', err));
}
</script>-->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link href="build/main.css" rel="stylesheet">
<!-- Ionic's root component and where the app will load -->
<ion-app></ion-app>
<!-- The polyfills js is generated during the build process -->
<script src="build/polyfills.js"></script>
<!-- The vendor js is generated during the build process
and contains all code in `node_modules` -->
<script src="build/vendor.js"></script>
<script src="http://maps.googleapis.com/maps/api/js?key=AIzaSyAa1urkW-Vbj-K 82Ry9jw8rPHOrXVZ_9SU"></script>
<!-- The bundle js is generated during the build process -->
<script src="build/main.js"></script>
<!-- cordova.js required for cordova apps -->
<script src="cordova.js"></script>
</body>
</html>
Any help, please !
EDIT
As you can see on the image bolow, the mpa load, but does not display !
EDIT 2 :
I have found where the issue comes from, this portion of the code works and log correctlly :
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(this.showMap, this.showError, { enableHightAccuracy: true })
console.log(google);
}
But the "this.showMap" function does not execute.
Any suggestion ?
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'm developing and ionic app for android.
I've implemented Ionic Push Notifications following ionic documentation and this tutorial
When the app is running I receive an alert message which is fine. However, when the app is closed and I push a notification using ionic.io "One Time notification" I only get sound.
The push notification triggers my phone's default ringtone, but it does not display title or message.
Here's my code:
.run(function($ionicPlatform,$httpBackend, baseURL, $rootScope, $cordovaNetwork) {
$ionicPlatform.ready(function() {
var io = Ionic.io();
var push = new Ionic.Push({
"onNotification": function(notification) {
alert('Received push notification!');
console.log(notification);
},
"pluginConfig": {
"android": {
"iconColor": "#0000FF"
}
}
});
var user = Ionic.User.current();
if (!user.id) {
user.id = Ionic.User.anonymousId();
}
var callback = function(data) {
push.addTokenToUser(user);
user.save();
};
push.register(callback);
//More code...
No console errors and the app is working fine.
Here's a list of my plugins:
com.ionic.keyboard 1.0.4 "Keyboard"
cordova-plugin-console 1.0.2 "Console"
cordova-plugin-device 1.1.1 "Device"
cordova-plugin-geolocation 2.1.0 "Geolocation"
cordova-plugin-network-information 1.2.0 "Network Information"
cordova-plugin-splashscreen 3.2.0 "Splashscreen"
cordova-plugin-whitelist 1.2.1 "Whitelist"
ionic-plugin-keyboard 1.0.8 "Keyboard"
phonegap-plugin-push 1.5.3 "PushPlugin"
And modules:
angular-websocket
ionic
ionic-platform-web-client
ionic-service-core
ionic-service-push
ngCordova
platform
Here's my 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">
<meta name="format-detection" content="telephone=no">
<meta http-equiv="Content-Security-Policy" content="default-src * data: gap: https://ssl.gstatic.com; script-src 'self' 'unsafe-inline' 'unsafe-eval' *; style-src 'self' 'unsafe-inline' *;
media-src *; img-src 'self' data: *">
<!-- Good default declaration:
* gap: is required only on iOS (when using UIWebView) and is needed for JS->native communication
* https://ssl.gstatic.com is required only on Android and is needed for TalkBack to function properly
* Disables use of eval() and inline scripts in order to mitigate risk of XSS vulnerabilities. To change this:
* Enable inline JS: add 'unsafe-inline' to default-src
* Enable eval(): add 'unsafe-eval' to default-src
-->
<title></title>
<!-- Ionic styles -->
<link href="lib/ionic/css/ionic.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<!-- Bootstrap styles -->
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css/bootstrap-theme.min.css">
<link rel="stylesheet" type="text/css" href="css/style.css">
<link rel="stylesheet" type="text/css" href="css/fonts/armyrust.ttf">
<!-- FontAwesome Icons -->
<link rel="stylesheet" href="css/font-awesome.css">
<!-- IF using Sass (run gulp sass first), then uncomment below and remove the CSS includes above
<link href="css/ionic.app.css" rel="stylesheet">
-->
<!-- Bootstrap js -->
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<!-- ionic/angularjs js -->
<script src="lib/ionic/js/ionic.bundle.js"></script>
<script src="lib/ionic-platform-web-client/dist/ionic.io.bundle.min.js"></script>
<script src="lib/ngCordova/dist/ng-cordova.min.js"></script>
<script src="lib/ionic-service-core/ionic-core.js"></script>
<script src="lib/ionic-service-push/ionic-push.js"></script>
<script src="lib/angular-resource/angular-resource.min.js"></script>
<script src="js/qrcode.min.js"></script>
<script src="js/angular-qr.js"></script>
<!-- cordova script (this will be a 404 during development)
<script src="cordova.js"></script> -->
<!-- your app's js
<script type="text/javascript" src="../www/app/app.js"></script>
-->
<script src="js/app.js"></script>
<script src="js/controller.js"></script>
<script src="js/rankingController.js"></script>
<script src="js/services.js"></script>
<script src="js/constants.js"></script>
<script src="lib/angular-mocks/angular-mocks.js"></script>
<!-- Google Maps Library -->
<script src="http://maps.googleapis.com/maps/api/js?sensor=true"></script>
<!-- Needed for Cordova/PhoneGap (will be a 404 during development) -->
</head>
<body ng-app="MaPlay" ng-controller="AppCtrl">
<ion-nav-view>
</ion-nav-view>
</body>
<!-- Cordova is bootstrapped by ionic-platform-web-client, uncomment this if you remove ionic-platform-web-client... -->
<!-- <script src="cordova.js"></script> -->
</html>
I ended up using PushWoosh, however I found out that my problem came from not having cordova-plugin-statusbar 2.1.1 "StatusBar" plugin installed. Also I had to initialize it in my app.js using:
if (window.StatusBar) {
StatusBar.styleLightContent();
}
Unfortunately, this is never mentioned in ionicPush documentation.
I'm trying to send an HTTP GET request and everything works great while I'm testing. But when I build the application and try to send request, I'm getting 404 error.
Here is my index.html
<html>
<head>
<meta charset="utf-8" />
<meta name="format-detection" content="telephone=no" />
<meta name="msapplication-tap-highlight" content="no" />
<access origin="*" />
<!-- 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 http-equiv="Content-Security-Policy" content="default-src 'self' data: gap: https://ssl.gstatic.com 'unsafe-eval'; style-src 'self' 'unsafe-inline'; media-src *; connect-src http://google.com">
<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();
var start = Date.now();
var xmlhttp;
if (window.XMLHttpRequest) {
// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp = new XMLHttpRequest();
} else {
// code for IE6, IE5
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState == XMLHttpRequest.DONE ) {
if(xmlhttp.status == 200){
//alert(Date.now() - start);
alert("yeah");
}
else if(xmlhttp.status == 400) {
alert('There was an error 400');
}
else {
alert("else: " + xmlhttp.status);
}
}
}
xmlhttp.open("GET", "http://google.com", true);
xmlhttp.send();
</script>
</body>
I'm new to PhoneGap and I'm sure this is as simple as it gets, but I can't find anything on google.
Thanks in advance
It is likely that you need to set a Content Security Policy meta tag in your index.html as Cordova / PhoneGap 5 or higher will require this.
An example would look like this (in the head section of index.html):
<meta http-equiv="Content-Security-Policy" content="default-src 'self' data: gap: https://ssl.gstatic.com 'unsafe-eval'; style-src 'self' 'unsafe-inline'; media-src *; connect-src http://myserver">
Swapping http://myserver for the server you're trying to access. You may actually be getting error messages such as this in the JS Console if this is your problem:
Refused to connect to ‘http://myserver/ping' because it violates the following Content Security Policy directive: “default-src ‘self’ data: gap: https://ssl.gstatic.com ‘unsafe-eval’”. Note that ‘connect-src’ was not explicitly set, so ‘default-src’ is used as a fallback.
SecurityError: DOM Exception 18: An attempt was made to break through the security policy of the user agent.
This post may help with understanding Content Security Policy.
Here I have assumed that you are using Phonegap version "cli-5.2.0" and facing issue on Android. To fix 404 issue, add following lines in your config.xml file
<gap:plugin name="cordova-plugin-whitelist" source="npm" />
<access origin="*" />
<allow-intent href="*" />
<allow-navigation href="*" />
Whitelist plugin is required to use with Phonegap "cli-5.2.0" to successfully make request to any server.
Link for whitelist plugin https://github.com/apache/cordova-plugin-whitelist
Hi I have made a hello world type of application in PhoneGap. I have index.html in www directory but it is displaying something default home page of phonegap. Please see attached screenshot that it is displaying always.
index.html
<html>
<head>
<meta charset="utf-8" />
<meta name="format-detection" content="telephone=no" />
<meta name="msapplication-tap-highlight" content="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" />
<link rel="stylesheet" type="text/css" href="css/index.css" />
<title>Hello World</title>
</head>
<body>
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" src="js/index.js"></script>
<script type="text/javascript">
app.initialize();
</script>
<form>
Select your favourite color: <input type="color" name="favcolor">
<br/>
<input type="button" value="SUBMIT" />
</form>
</body>
</html>
But when I run the app in android phone it always display this. I have done 3-4 rebuild complete project but still same.
I am not sure what is going wrong or missing.
Thanks in advance.
I think you are making changes to www folder present inside the platforms added.
Try to make changes in the www folder which is present in the root folder of your project and then take a build and it will definitely work.
Check This: