{"_id":"56d1f33a00a2a70b00b365ab","parentDoc":null,"user":"5526d4bb4a7ac121004c605c","__v":11,"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"},"project":"5526c95cf69851170038b48f","updates":["5657f42da795770d00a2afe6","568428cc7af9120d007ac401","56c8eef93ecc230d00401523"],"next":{"pages":[],"description":""},"createdAt":"2015-09-24T18:35:41.182Z","link_external":false,"link_url":"","githubsync":"","sync_unique":"","hidden":false,"api":{"settings":"","results":{"codes":[]},"auth":"required","params":[],"url":""},"isReference":false,"order":1,"body":"[block:callout]\n{\n  \"type\": \"info\",\n  \"title\": \"Note\",\n  \"body\": \"This is a quick-start guide for Push. If you find anything confusing, or want to explore the installation in more depth, check out the [getting started](doc:push-overview#getting-started) section!\"\n}\n[/block]\n\n[block:api-header]\n{\n  \"type\": \"basic\"\n}\n[/block]\n## 1. Add the Necessary Components\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"ionic add ionic-platform-web-client\\nionic plugin add phonegap-plugin-push --variable SENDER_ID=\\\"GCM_PROJECT_NUMBER\\\"\",\n      \"language\": \"shell\"\n    }\n  ]\n}\n[/block]\n\n[block:callout]\n{\n  \"type\": \"danger\",\n  \"title\": \"Plugin Updates\",\n  \"body\": \"The latest plugin update requires that a `SENDER_ID` variable be set for Android. That is actually your GCM Project Number. If you're not using Android, you'll just need to pass a random string (you could even use the above command as-is).\"\n}\n[/block]\n\n[block:api-header]\n{\n  \"type\": \"basic\"\n}\n[/block]\n## 2. Hook up the Ionic Platform\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## 3. Tell your app to use Limited Pushes\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"ionic config set dev_push true\",\n      \"language\": \"shell\"\n    }\n  ]\n}\n[/block]\n\n[block:callout]\n{\n  \"type\": \"warning\",\n  \"title\": \"Note\",\n  \"body\": \"Limited pushes aren't native push notifications, and are meant for testing against our API.  They'll work in a browser or emulator, but won't arrive when your app is minimized, and the tokens won't last more than 2 hours.\\n\\nTo configure your app to use full featured push notifications, follow the [Full Setup](doc:push-full-setup) guide.\"\n}\n[/block]\n\n[block:api-header]\n{\n  \"type\": \"basic\"\n}\n[/block]\n## 3. Add some Push Code\n\nThis code can go anywhere you want to register for Push, but some good areas are on app start (once your device is ready) or when a user logs in.\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"var push = new Ionic.Push({});\\n\\npush.register(function(token) {\\n  // Log out your device token (Save this!)\\n  console.log(\\\"Got Token:\\\",token.token);\\n});\",\n      \"language\": \"javascript\"\n    }\n  ]\n}\n[/block]\n\n[block:api-header]\n{\n  \"type\": \"basic\"\n}\n[/block]\n## 4. Send a push\n\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>\\\" -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\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\n[block:callout]\n{\n  \"type\": \"success\",\n  \"title\": \"Congratulations!\",\n  \"body\": \"You're sending push notifications with Ionic! Want to learn more? Check out the [full setup](doc:push-full-setup) guides to start sending native push notifications, or look at the [Usage](doc:push-usage) or [Sending Push](doc:push-sending-push) guides to learn more about the service!\"\n}\n[/block]","excerpt":"","slug":"push-quick-start","type":"basic","title":"Quick Start"}
[block:callout] { "type": "info", "title": "Note", "body": "This is a quick-start guide for Push. If you find anything confusing, or want to explore the installation in more depth, check out the [getting started](doc:push-overview#getting-started) section!" } [/block] [block:api-header] { "type": "basic" } [/block] ## 1. Add the Necessary Components [block:code] { "codes": [ { "code": "ionic add ionic-platform-web-client\nionic plugin add phonegap-plugin-push --variable SENDER_ID=\"GCM_PROJECT_NUMBER\"", "language": "shell" } ] } [/block] [block:callout] { "type": "danger", "title": "Plugin Updates", "body": "The latest plugin update requires that a `SENDER_ID` variable be set for Android. That is actually your GCM Project Number. If you're not using Android, you'll just need to pass a random string (you could even use the above command as-is)." } [/block] [block:api-header] { "type": "basic" } [/block] ## 2. Hook up the Ionic Platform [block:code] { "codes": [ { "code": "ionic io init", "language": "shell" } ] } [/block] [block:api-header] { "type": "basic" } [/block] ## 3. Tell your app to use Limited Pushes [block:code] { "codes": [ { "code": "ionic config set dev_push true", "language": "shell" } ] } [/block] [block:callout] { "type": "warning", "title": "Note", "body": "Limited pushes aren't native push notifications, and are meant for testing against our API. They'll work in a browser or emulator, but won't arrive when your app is minimized, and the tokens won't last more than 2 hours.\n\nTo configure your app to use full featured push notifications, follow the [Full Setup](doc:push-full-setup) guide." } [/block] [block:api-header] { "type": "basic" } [/block] ## 3. Add some Push Code This code can go anywhere you want to register for Push, but some good areas are on app start (once your device is ready) or when a user logs in. [block:code] { "codes": [ { "code": "var push = new Ionic.Push({});\n\npush.register(function(token) {\n // Log out your device token (Save this!)\n console.log(\"Got Token:\",token.token);\n});", "language": "javascript" } ] } [/block] [block:api-header] { "type": "basic" } [/block] ## 4. 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>\" -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] 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": "You're sending push notifications with Ionic! Want to learn more? Check out the [full setup](doc:push-full-setup) guides to start sending native push notifications, or look at the [Usage](doc:push-usage) or [Sending Push](doc:push-sending-push) guides to learn more about the service!" } [/block]