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.
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’m building an app with Ionic v1.x (France), Angular 1.5.3, and Cordova 7.0.0
I want to use the geolocation plugin but it is not working.
https://www.npmjs.com/package/cordova-plugin-geolocation
When I run the app in the browser it works fine but when I try it on my Android device it does not work. It does not throw an error but it does not run the code either.
Service file:
(function () {
"use strict";
angular
.module('myApp')
.service('myService', [
'$cordovaGeolocation',
'$ionicPlatform',
function ($cordovaGeolocation, $ionicPlatform) {
var myService = {};
myService.getLocation = function () {
console.log($cordovaGeolocation);
$ionicPlatform.ready(function () {
console.log('ionic ready');
$cordovaGeolocation.getCurrentPosition()
.then(function (position) {
console.log('position ', position);
}).catch(function (error) {
console.log('error ', error);
}).finally(function () {
console.log('made it here ');
});
});
};
return myService;
}])
})();
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>Softworks Self Service</title>
<link href="css/style.css" rel="stylesheet">
<link href="css/bday.css" rel="stylesheet">
<link href="css/xmas.css" rel="stylesheet">
<link href="css/ionic.app.css" rel="stylesheet">
<link href="lib/ionic-content-banner/dist/ionic.content.banner.css" rel="stylesheet">
<link href="lib/ion-floating-menu/dist/ion-floating-menu.min.css" rel="stylesheet" type="text/css" />
<!-- ionic/angularjs js -->
<script src="lib/ionic/js/ionic.bundle.min.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>
<!-- Needed for Cordova/PhoneGap (will be a 404 during development) -->
<script src="cordova.js"></script>
<!-- your app's js -->
<script src="js/app.js"></script>
<script src="js/services.js"></script>
<script src="js/controllers.js"></script>
</head>
The controller just calls the service function.
I get to the point where it prints out ‘ionic ready’ but that’s it.
I do not get any errors. The code in the promises does not execute. The console statement before the $ionicReady prints out a function including getCurrentLocation.
I am hoping to use the error codes I get back to show a popup to the user to turn on permissions etc.
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 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.
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.