{"_id":"56d1f33a00a2a70b00b365ac","project":"5526c95cf69851170038b48f","parentDoc":null,"__v":28,"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"},"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"},"user":"5526d4bb4a7ac121004c605c","updates":["560c2678b3e65b2300a120d9","560e5e5acac9dc0d007af7e7","560e673dfb97be0d0042bed6","564f9190d23a6a37005870bd","56ca5f41693b5b0d0017ff68","56fef8ab123b3e0e000af2f9","570e16b7b5e70e3200b7bd23","574ae37b98945517005157be","57984433c8c9cb0e00988665","57a836bf3ec56d0e001ee377"],"next":{"pages":[],"description":""},"createdAt":"2015-09-24T19:24:49.940Z","link_external":false,"link_url":"","githubsync":"","sync_unique":"","hidden":false,"api":{"results":{"codes":[]},"settings":"","auth":"required","params":[],"url":""},"isReference":false,"order":2,"body":"New to the Ionic Platform and want to get started with push notifications?  This is the best place to start.  \n\nWe're going to take you through building a push-enabled app from scratch, let's get started!\n[block:api-header]\n{\n  \"type\": \"basic\"\n}\n[/block]\n## 1. Create an Ionic app\n[block:callout]\n{\n  \"type\": \"warning\",\n  \"title\": \"Note\",\n  \"body\": \"We're assuming you've already installed and have the latest versions of the Ionic CLI, along with pre-requisites like Cordova, Bower, and npm.  If not, check out the docs [here](http://ionicframework.com/getting-started/)\"\n}\n[/block]\nWe're going to use Ionic's tabs starter for this tutorial, but you can use an existing Ionic app if you wish.\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"ionic start myApp tabs\\ncd myApp\",\n      \"language\": \"shell\"\n    }\n  ]\n}\n[/block]\n\n[block:api-header]\n{\n  \"type\": \"basic\"\n}\n[/block]\n## 2. Install the required components\n\nWe need some code to let your app talk to the Ionic Platform, as well as a Cordova plugin to implement native push notifications within your app.\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"ionic add ionic-platform-web-client\\nionic plugin add phonegap-plugin-push\",\n      \"language\": \"shell\"\n    }\n  ]\n}\n[/block]\n\n[block:api-header]\n{\n  \"type\": \"basic\"\n}\n[/block]\n## 3. Hook up the Ionic Platform\n\nRunning the following command to identify your app with Ionic.  \n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"ionic io init\",\n      \"language\": \"shell\"\n    }\n  ]\n}\n[/block]\n\n[block:api-header]\n{\n  \"type\": \"basic\"\n}\n[/block]\n## 4. Push Mode\n\nAs you may already know from the push overview, we default your app to use limited push functionality using the `dev_push` [config](doc:io-config) property. Just to make sure that setting hasn't been changed on accident, and to give you a glimpse at how to change it in the future, let's set the config value manually:\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"ionic config set dev_push true\",\n      \"language\": \"shell\"\n    }\n  ]\n}\n[/block]\nEventually you'll make your way to the [full setup](doc:push-full-setup) where we will set the value to `false`. We'll explain more about that later, but for now let's move on to some code.\n[block:api-header]\n{\n  \"type\": \"basic\"\n}\n[/block]\n## 5. Write some push code\n\nOk, we're all configured and ready to write some push code!  All you need to do to get your app receiving notifications is add the following snippet somewhere.  To ensure that it's always registered, we're going to put in inside the `$ionicPlatform.ready()` section within our `app.js` file.  This will create an instance of the push service and register your app for notifications each time it is opened.\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \".run(function($ionicPlatform) {\\n  $ionicPlatform.ready(function() {\\n    var push = new Ionic.Push({\\n      \\\"debug\\\": true\\n    });\\n\\n    push.register(function(token) {\\n      console.log(\\\"Device token:\\\",token.token);\\n    });\\n  });\\n})\",\n      \"language\": \"javascript\"\n    }\n  ]\n}\n[/block]\n\n[block:callout]\n{\n  \"type\": \"danger\",\n  \"body\": \"If you pass { \\\"debug\\\": true } to the Push config and have dev_push enabled and have not passed your own onNotification handler, we will automatically register a callback that will call alert(pushMessage).\",\n  \"title\": \"Javascript alert()\"\n}\n[/block]\n## 6. Send a push!\n\nIn order to send a push via the API, you'll need to create an API token to use authorize with the API (follow [this guide](doc:api-getting-started#section-creating-a-token) to get a token for your app), and you'll need a device token that you registered in the previous step. \n\nOnce you have both details, make sure your application is **OPEN** and then use the following cURL request to send a push. Replace the highlighted text with your own values. \n[block:html]\n{\n  \"html\": \"<div class=\\\"curl-example\\\">\\n<pre>\\ncurl -X POST -H \\\"Authorization: Bearer <span class=\\\"hlite\\\">API_TOKEN</span>\\\" -H \\\"Content-Type: application/json\\\" -d '{\\n    \\\"tokens\\\": [\\\"<span class=\\\"hlite\\\">DEV_DEVICE_TOKEN</span>\\\"],\\n    \\\"profile\\\": \\\"fake_push_profile\\\",\\n    \\\"notification\\\": {\\n        \\\"message\\\": \\\"Hello World!\\\"\\n    }\\n}' \\\"https://api.ionic.io/push/notifications\\\"\\n</pre>\\n</div>\\n\\n<style>\\n  \\nspan.hlite {\\n  font-weight: bold;\\n  color: #0000FF;\\n}\\n  \\n.curl-example pre {\\n  padding: 16px;\\n  border: 0px solid #fff;\\n  font-size: 11px !important;\\n  color: #444;\\n}\\n</style>\"\n}\n[/block]\n\n[block:callout]\n{\n  \"type\": \"danger\",\n  \"title\": \"Limited Push + Security Profiles\",\n  \"body\": \"We haven't discussed security profiles for push yet, but it is a requirement to specify the tag of a profile you wish to use in the api. For limited push, this isn't really necessary since we do not utilize the profile at all. For now, just make sure when you are making requests to the API with limited pushes, that you should send a fake profile tag such as `fake_push_profile` (which is exactly what we use in the example below).\"\n}\n[/block]\nThere are many more options for sending a push notification, but we will not cover them here since you are using Limited Push functionality. The full featured push section will direct you to the full set of push options available. \n[block:callout]\n{\n  \"type\": \"success\",\n  \"title\": \"Congratulations!\",\n  \"body\": \"Nice work, you now have an Ionic app configured to receive limited push notifications. If everything went according to plan, you should be ready to move on to full-featured pushes using the [full setup](doc:push-full-setup) guide.\"\n}\n[/block]\n\n[block:api-header]\n{\n  \"type\": \"basic\",\n  \"title\": \"Caveats of Limited Push\"\n}\n[/block]\n* Your app must be open and in the foreground to receive push notifications.\n* Your app will register a new `DEV-###########` style token each time you run the application. If you close the app it will no longer receive pushes sent with the previously registered token.\n* Limited pushes only support a basic \"message\" property to be sent with the notification. Payloads, media, etc will not work in this mode.\n* Security Profiles are not utilized with limited pushes, but you are still required to send a profile tag to the API (you can send a normal profile if you have one, but otherwise a tag of `fake_push_profile` will work just fine.\n* `DEV-#########` style tokens that are used in Limited Push mode will not be stored long-term and cannot be associated with users.","excerpt":"Learn about the basics of push and how verify you can get basic notifications.","slug":"push-limited-setup","type":"basic","title":"Limited Setup"}

Limited Setup

Learn about the basics of push and how verify you can get basic notifications.

New to the Ionic Platform and want to get started with push notifications? This is the best place to start. We're going to take you through building a push-enabled app from scratch, let's get started! [block:api-header] { "type": "basic" } [/block] ## 1. Create an Ionic app [block:callout] { "type": "warning", "title": "Note", "body": "We're assuming you've already installed and have the latest versions of the Ionic CLI, along with pre-requisites like Cordova, Bower, and npm. If not, check out the docs [here](http://ionicframework.com/getting-started/)" } [/block] We're going to use Ionic's tabs starter for this tutorial, but you can use an existing Ionic app if you wish. [block:code] { "codes": [ { "code": "ionic start myApp tabs\ncd myApp", "language": "shell" } ] } [/block] [block:api-header] { "type": "basic" } [/block] ## 2. Install the required components We need some code to let your app talk to the Ionic Platform, as well as a Cordova plugin to implement native push notifications within your app. [block:code] { "codes": [ { "code": "ionic add ionic-platform-web-client\nionic plugin add phonegap-plugin-push", "language": "shell" } ] } [/block] [block:api-header] { "type": "basic" } [/block] ## 3. Hook up the Ionic Platform Running the following command to identify your app with Ionic. [block:code] { "codes": [ { "code": "ionic io init", "language": "shell" } ] } [/block] [block:api-header] { "type": "basic" } [/block] ## 4. Push Mode As you may already know from the push overview, we default your app to use limited push functionality using the `dev_push` [config](doc:io-config) property. Just to make sure that setting hasn't been changed on accident, and to give you a glimpse at how to change it in the future, let's set the config value manually: [block:code] { "codes": [ { "code": "ionic config set dev_push true", "language": "shell" } ] } [/block] Eventually you'll make your way to the [full setup](doc:push-full-setup) where we will set the value to `false`. We'll explain more about that later, but for now let's move on to some code. [block:api-header] { "type": "basic" } [/block] ## 5. Write some push code Ok, we're all configured and ready to write some push code! All you need to do to get your app receiving notifications is add the following snippet somewhere. To ensure that it's always registered, we're going to put in inside the `$ionicPlatform.ready()` section within our `app.js` file. This will create an instance of the push service and register your app for notifications each time it is opened. [block:code] { "codes": [ { "code": ".run(function($ionicPlatform) {\n $ionicPlatform.ready(function() {\n var push = new Ionic.Push({\n \"debug\": true\n });\n\n push.register(function(token) {\n console.log(\"Device token:\",token.token);\n });\n });\n})", "language": "javascript" } ] } [/block] [block:callout] { "type": "danger", "body": "If you pass { \"debug\": true } to the Push config and have dev_push enabled and have not passed your own onNotification handler, we will automatically register a callback that will call alert(pushMessage).", "title": "Javascript alert()" } [/block] ## 6. Send a push! In order to send a push via the API, you'll need to create an API token to use authorize with the API (follow [this guide](doc:api-getting-started#section-creating-a-token) to get a token for your app), and you'll need a device token that you registered in the previous step. Once you have both details, make sure your application is **OPEN** and then use the following cURL request to send a push. Replace the highlighted text with your own values. [block:html] { "html": "<div class=\"curl-example\">\n<pre>\ncurl -X POST -H \"Authorization: Bearer <span class=\"hlite\">API_TOKEN</span>\" -H \"Content-Type: application/json\" -d '{\n \"tokens\": [\"<span class=\"hlite\">DEV_DEVICE_TOKEN</span>\"],\n \"profile\": \"fake_push_profile\",\n \"notification\": {\n \"message\": \"Hello World!\"\n }\n}' \"https://api.ionic.io/push/notifications\"\n</pre>\n</div>\n\n<style>\n \nspan.hlite {\n font-weight: bold;\n color: #0000FF;\n}\n \n.curl-example pre {\n padding: 16px;\n border: 0px solid #fff;\n font-size: 11px !important;\n color: #444;\n}\n</style>" } [/block] [block:callout] { "type": "danger", "title": "Limited Push + Security Profiles", "body": "We haven't discussed security profiles for push yet, but it is a requirement to specify the tag of a profile you wish to use in the api. For limited push, this isn't really necessary since we do not utilize the profile at all. For now, just make sure when you are making requests to the API with limited pushes, that you should send a fake profile tag such as `fake_push_profile` (which is exactly what we use in the example below)." } [/block] There are many more options for sending a push notification, but we will not cover them here since you are using Limited Push functionality. The full featured push section will direct you to the full set of push options available. [block:callout] { "type": "success", "title": "Congratulations!", "body": "Nice work, you now have an Ionic app configured to receive limited push notifications. If everything went according to plan, you should be ready to move on to full-featured pushes using the [full setup](doc:push-full-setup) guide." } [/block] [block:api-header] { "type": "basic", "title": "Caveats of Limited Push" } [/block] * Your app must be open and in the foreground to receive push notifications. * Your app will register a new `DEV-###########` style token each time you run the application. If you close the app it will no longer receive pushes sent with the previously registered token. * Limited pushes only support a basic "message" property to be sent with the notification. Payloads, media, etc will not work in this mode. * Security Profiles are not utilized with limited pushes, but you are still required to send a profile tag to the API (you can send a normal profile if you have one, but otherwise a tag of `fake_push_profile` will work just fine. * `DEV-#########` style tokens that are used in Limited Push mode will not be stored long-term and cannot be associated with users.