{"_id":"56d1f33a00a2a70b00b365ad","project":"5526c95cf69851170038b48f","user":"5526d4bb4a7ac121004c605c","version":{"_id":"56d1f33700a2a70b00b3658e","project":"5526c95cf69851170038b48f","__v":2,"createdAt":"2016-02-27T19:04:23.946Z","releaseDate":"2016-02-27T19:04:23.946Z","categories":["56d1f33900a2a70b00b3658f","56d1f33900a2a70b00b36590","56d1f33900a2a70b00b36591","56d1f33900a2a70b00b36592","56d1f33900a2a70b00b36593","56d1f33900a2a70b00b36594","56d1f33900a2a70b00b36595","56d1f33900a2a70b00b36596","56d1f33900a2a70b00b36597","56d1f33900a2a70b00b36598","56d1f33900a2a70b00b36599","56d1f33900a2a70b00b3659a","571f9497ada30c34003b7cee"],"is_deprecated":false,"is_hidden":false,"is_beta":true,"is_stable":true,"codename":"beta","version_clean":"2.0.0-beta","version":"2.0.0-beta"},"__v":8,"category":{"_id":"56d1f33900a2a70b00b36593","__v":2,"project":"5526c95cf69851170038b48f","version":"56d1f33700a2a70b00b3658e","pages":["56d1f33a00a2a70b00b365aa","56d1f33a00a2a70b00b365ab","56d1f33a00a2a70b00b365ac","56d1f33a00a2a70b00b365ad","56d1f33a00a2a70b00b365ae","56d1f33a00a2a70b00b365af","56d1f33a00a2a70b00b365b0","56d1f33a00a2a70b00b365b1","56d1f33a00a2a70b00b365b2","56d1f33a00a2a70b00b365b3","56d1f33a00a2a70b00b365b4","56d1f33a00a2a70b00b365b5","56d1f33a00a2a70b00b365b6","56d1f33a00a2a70b00b365b7","56d1f33a00a2a70b00b365b8","56d1f33a00a2a70b00b365b9","56d1f33a00a2a70b00b365ba","56d1f33a00a2a70b00b365bb","56d1f33a00a2a70b00b365bc","56d1f33a00a2a70b00b365bd","56d1f33a00a2a70b00b365be","56d1f33a00a2a70b00b365bf","56d1f33a00a2a70b00b365c0","56d31b848161a00b00dc458a"],"sync":{"url":"","isSync":false},"reference":false,"createdAt":"2015-04-10T15:00:49.659Z","from_sync":false,"order":3,"slug":"ionic-push","title":"Ionic Push"},"parentDoc":null,"updates":["56144eab0ab2550d00166d99","561511d0beee6f0d009df1c5","561ac6b1825ef30d008fb3b1","561dc88e373f101700d079af","5622d0aaa2c6ff0d00f6b263","563249b2c3b04b0d00ba9c93","5637931daa96490d00a64ef6","563869afaaddb90d00c75f1a","56386df668b11f0d0048c84d","5639bba35ef5c80d002aee89","56e6be9f80ee4e220000ad5a"],"next":{"pages":[],"description":""},"createdAt":"2015-09-24T22:19:05.840Z","link_external":false,"link_url":"","githubsync":"","sync_unique":"","hidden":false,"api":{"results":{"codes":[]},"settings":"","auth":"required","params":[],"url":""},"isReference":false,"order":6,"body":"The following docs demonstrate the different capabilities of the `Ionic.Push` service that you get with the Ionic platform web client.\n[block:callout]\n{\n  \"type\": \"danger\",\n  \"title\": \"Note\",\n  \"body\": \"This guide assumes you are **not** using limited push. If you are currently using limited push, please follow the [full setup](doc:push-full-setup) guide before reviewing this page.\"\n}\n[/block]\n\n[block:api-header]\n{\n  \"type\": \"basic\"\n}\n[/block]\n## Initialization\n\nIn order to use push notifications, the service must be initialized from the [Ionic Platform Web Client](https://github.com/driftyco/ionic-platform-web-client).  This is accomplished with the following code, which can live anywhere in your app, but is probably best implemented on startup.\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"var push = new Ionic.Push({\\n  \\\"debug\\\": true,\\n  \\\"onNotification\\\": function(notification) {\\n    var payload = notification.payload;\\n    console.log(notification, payload);\\n  },\\n  \\\"onRegister\\\": function(data) {\\n    console.log(data.token);\\n  }\\n});\",\n      \"language\": \"javascript\"\n    }\n  ]\n}\n[/block]\nLet's look more closely at that...\n\n* `push = new Ionic.Push()`: This is instantiating the push service.  You can provide this function with several configuration values in an object, for example:\n  * `\"debug\"`: Should the service operate in debug mode?\n  * `\"onNotification\"`: This function will be called when your device receives a notification, and provided with the notification object received.\n  * `\"onRegister\"`: This function will be called upon successful registration of your device, and provided with a `data` argument that contains a `token` string with your device token.\n\n## Plugin Options\n\nThe excellent [PhoneGap Push Plugin](https://github.com/phonegap/phonegap-plugin-push) provides quite a few iOS and Android specific options that you may want/need to implement in your use case. \n\nThese options should be specified in the `pluginConfig` property of your config like so:\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"var push = new Ionic.Push({\\n  \\\"debug\\\": true,\\n  \\\"onNotification\\\": function(notification) {\\n    var payload = notification.payload;\\n    console.log(notification, payload);\\n  },\\n  \\\"onRegister\\\": function(data) {\\n    console.log(data.token);\\n  },\\n  \\\"pluginConfig\\\": {\\n    \\\"ios\\\": {\\n      \\\"badge\\\": true,\\n      \\\"sound\\\": true\\n     },\\n     \\\"android\\\": {\\n       \\\"iconColor\\\": \\\"#343434\\\"\\n     }\\n  } \\n});\",\n      \"language\": \"javascript\"\n    }\n  ]\n}\n[/block]\nYou can see the full list of plugin options supported [here](https://github.com/phonegap/phonegap-plugin-push#pushnotificationinitoptions).\n\n\n\n\n[block:api-header]\n{\n  \"type\": \"basic\"\n}\n[/block]\n## Registration\n[block:callout]\n{\n  \"type\": \"info\",\n  \"title\": \"Note\",\n  \"body\": \"You will most likely want to implement the registration as shown in the [Integrating with Ionic User](doc:push-usage#section-integrating-with-ionic-user) section, unless you do not plan to save device tokens.\"\n}\n[/block]\nBefore a device can generate a token and be able to receive push notifications, the `push` class you instantiated needs to call `register()` like so.  This code can be placed anywhere in your application, but the best practice is either on startup or when a user logs in.\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"var callback = function(pushToken) {\\n  console.log(pushToken.token);\\n}\\n\\npush.register(callback);\",\n      \"language\": \"javascript\"\n    }\n  ]\n}\n[/block]\nLet's look more closely at that...\n \n* `callback`: This is a function you may define which will be called upon successful registration of the device.\n  * `pushToken`: Passed to your callback function.  This argument will contain your `token`, which is used to send push notifications to a given device.\n* `push.register`: This function will generate your device's token and register with GCM or APNS to receive push notifications.\n[block:api-header]\n{\n  \"type\": \"basic\"\n}\n[/block]\n## Unregistration\n\nTo unregister a device for notifications, just call the following:\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"push.unregister();\",\n      \"language\": \"javascript\"\n    }\n  ]\n}\n[/block]\n\n[block:api-header]\n{\n  \"type\": \"basic\"\n}\n[/block]\n## Integrating with Ionic User\n[block:callout]\n{\n  \"type\": \"danger\",\n  \"title\": \"Note\",\n  \"body\": \"The following is only applicable when using full featured pushes. Limited Push will not associate device tokens with users.\"\n}\n[/block]\nWhen saving device tokens, we automatically associate the token with any authenticated & current Ionic.User. If you do not use the Ionic User service, this will still save the device token as normal, but will not be associated with any particular user:\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"var push = new Ionic.Push();\\n\\nvar callback = function(token) {\\n  console.log('Registered token:', token.token);\\n  push.saveToken(token);\\n}\\n\\npush.register(callback);\",\n      \"language\": \"javascript\"\n    }\n  ]\n}\n[/block]\nYour generated device token will now be stored with your user. If you do **NOT** want the token associated with the current user, you can pass the `ignore_user` option:\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"var push = new Ionic.Push();\\n\\nvar callback = function(token) {\\n  console.log('Registered token:', token.token);\\n  push.saveToken(token, {'ignore_user': true});\\n}\\n\\npush.register(callback);\",\n      \"language\": \"javascript\"\n    }\n  ]\n}\n[/block]\n\n[block:api-header]\n{\n  \"type\": \"basic\"\n}\n[/block]\n## Using with AngularJS\n\nThe Push service plays nice with Ionic even if you don't use AngularJS, but we provide angular components as well if you wish.\n\nIf you want to use the Angular components for Push, just include the library in your App module...\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"angular.module('starter', ['ionic','ionic.service.core', 'ionic.service.push'])\",\n      \"language\": \"javascript\"\n    }\n  ]\n}\n[/block]\nThen inject `$ionicPush` into any controller in which you wish to use it.\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \".controller('DashCtrl', function($scope, $ionicPush, $ionicPlatform)\",\n      \"language\": \"javascript\"\n    }\n  ]\n}\n[/block]\nFrom there, you can initialize the service and register your devices with:\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"$ionicPlatform.ready(function() {\\n  $ionicPush.init({\\n  \\t\\\"debug\\\": true,\\n\\t  \\\"onNotification\\\": function(notification) {\\n  \\t  var payload = notification.payload;\\n    \\tconsole.log(notification, payload);\\n\\t  },\\n  \\t\\\"onRegister\\\": function(data) {\\n    \\tconsole.log(data.token);\\n\\t  }\\n\\t});\\n\\n\\t$ionicPush.register();\\n});\",\n      \"language\": \"javascript\"\n    }\n  ]\n}\n[/block]","excerpt":"","slug":"push-usage","type":"basic","title":"Usage"}
The following docs demonstrate the different capabilities of the `Ionic.Push` service that you get with the Ionic platform web client. [block:callout] { "type": "danger", "title": "Note", "body": "This guide assumes you are **not** using limited push. If you are currently using limited push, please follow the [full setup](doc:push-full-setup) guide before reviewing this page." } [/block] [block:api-header] { "type": "basic" } [/block] ## Initialization In order to use push notifications, the service must be initialized from the [Ionic Platform Web Client](https://github.com/driftyco/ionic-platform-web-client). This is accomplished with the following code, which can live anywhere in your app, but is probably best implemented on startup. [block:code] { "codes": [ { "code": "var push = new Ionic.Push({\n \"debug\": true,\n \"onNotification\": function(notification) {\n var payload = notification.payload;\n console.log(notification, payload);\n },\n \"onRegister\": function(data) {\n console.log(data.token);\n }\n});", "language": "javascript" } ] } [/block] Let's look more closely at that... * `push = new Ionic.Push()`: This is instantiating the push service. You can provide this function with several configuration values in an object, for example: * `"debug"`: Should the service operate in debug mode? * `"onNotification"`: This function will be called when your device receives a notification, and provided with the notification object received. * `"onRegister"`: This function will be called upon successful registration of your device, and provided with a `data` argument that contains a `token` string with your device token. ## Plugin Options The excellent [PhoneGap Push Plugin](https://github.com/phonegap/phonegap-plugin-push) provides quite a few iOS and Android specific options that you may want/need to implement in your use case. These options should be specified in the `pluginConfig` property of your config like so: [block:code] { "codes": [ { "code": "var push = new Ionic.Push({\n \"debug\": true,\n \"onNotification\": function(notification) {\n var payload = notification.payload;\n console.log(notification, payload);\n },\n \"onRegister\": function(data) {\n console.log(data.token);\n },\n \"pluginConfig\": {\n \"ios\": {\n \"badge\": true,\n \"sound\": true\n },\n \"android\": {\n \"iconColor\": \"#343434\"\n }\n } \n});", "language": "javascript" } ] } [/block] You can see the full list of plugin options supported [here](https://github.com/phonegap/phonegap-plugin-push#pushnotificationinitoptions). [block:api-header] { "type": "basic" } [/block] ## Registration [block:callout] { "type": "info", "title": "Note", "body": "You will most likely want to implement the registration as shown in the [Integrating with Ionic User](doc:push-usage#section-integrating-with-ionic-user) section, unless you do not plan to save device tokens." } [/block] Before a device can generate a token and be able to receive push notifications, the `push` class you instantiated needs to call `register()` like so. This code can be placed anywhere in your application, but the best practice is either on startup or when a user logs in. [block:code] { "codes": [ { "code": "var callback = function(pushToken) {\n console.log(pushToken.token);\n}\n\npush.register(callback);", "language": "javascript" } ] } [/block] Let's look more closely at that... * `callback`: This is a function you may define which will be called upon successful registration of the device. * `pushToken`: Passed to your callback function. This argument will contain your `token`, which is used to send push notifications to a given device. * `push.register`: This function will generate your device's token and register with GCM or APNS to receive push notifications. [block:api-header] { "type": "basic" } [/block] ## Unregistration To unregister a device for notifications, just call the following: [block:code] { "codes": [ { "code": "push.unregister();", "language": "javascript" } ] } [/block] [block:api-header] { "type": "basic" } [/block] ## Integrating with Ionic User [block:callout] { "type": "danger", "title": "Note", "body": "The following is only applicable when using full featured pushes. Limited Push will not associate device tokens with users." } [/block] When saving device tokens, we automatically associate the token with any authenticated & current Ionic.User. If you do not use the Ionic User service, this will still save the device token as normal, but will not be associated with any particular user: [block:code] { "codes": [ { "code": "var push = new Ionic.Push();\n\nvar callback = function(token) {\n console.log('Registered token:', token.token);\n push.saveToken(token);\n}\n\npush.register(callback);", "language": "javascript" } ] } [/block] Your generated device token will now be stored with your user. If you do **NOT** want the token associated with the current user, you can pass the `ignore_user` option: [block:code] { "codes": [ { "code": "var push = new Ionic.Push();\n\nvar callback = function(token) {\n console.log('Registered token:', token.token);\n push.saveToken(token, {'ignore_user': true});\n}\n\npush.register(callback);", "language": "javascript" } ] } [/block] [block:api-header] { "type": "basic" } [/block] ## Using with AngularJS The Push service plays nice with Ionic even if you don't use AngularJS, but we provide angular components as well if you wish. If you want to use the Angular components for Push, just include the library in your App module... [block:code] { "codes": [ { "code": "angular.module('starter', ['ionic','ionic.service.core', 'ionic.service.push'])", "language": "javascript" } ] } [/block] Then inject `$ionicPush` into any controller in which you wish to use it. [block:code] { "codes": [ { "code": ".controller('DashCtrl', function($scope, $ionicPush, $ionicPlatform)", "language": "javascript" } ] } [/block] From there, you can initialize the service and register your devices with: [block:code] { "codes": [ { "code": "$ionicPlatform.ready(function() {\n $ionicPush.init({\n \t\"debug\": true,\n\t \"onNotification\": function(notification) {\n \t var payload = notification.payload;\n \tconsole.log(notification, payload);\n\t },\n \t\"onRegister\": function(data) {\n \tconsole.log(data.token);\n\t }\n\t});\n\n\t$ionicPush.register();\n});", "language": "javascript" } ] } [/block]