{"__v":0,"_id":"5792cb2369c5120e00efe025","category":{"__v":0,"_id":"5792ca55366dd20e004736d7","project":"542b6018044e1e2200413772","version":"551ef4ef4986f62b00a7202e","sync":{"url":"","isSync":false},"reference":false,"createdAt":"2016-07-23T01:37:25.436Z","from_sync":false,"order":14,"slug":"overview","title":"Ionic"},"parentDoc":null,"project":"542b6018044e1e2200413772","user":"542b6010044e1e220041376f","version":{"__v":10,"_id":"551ef4ef4986f62b00a7202e","forked_from":"542b6018044e1e2200413775","project":"542b6018044e1e2200413772","createdAt":"2015-04-03T20:15:43.149Z","releaseDate":"2015-04-03T20:15:43.149Z","categories":["551ef4ef4986f62b00a7202f","551ef4ef4986f62b00a72030","551ef4ef4986f62b00a72031","551ef4ef4986f62b00a72032","551ef4ef4986f62b00a72033","551ef4ef4986f62b00a72034","551ef4ef4986f62b00a72035","551ef4ef4986f62b00a72036","551ef4ef4986f62b00a72037","551ef4ef4986f62b00a72038","551ef4ef4986f62b00a72039","551ef4ef4986f62b00a7203a","551ef4ef4986f62b00a7203b","551ef4ef4986f62b00a7203c","551ef4ef4986f62b00a7203d","551ef4ef4986f62b00a7203e","55d7f1879510f00d007ec727","56b94a5a9fc0de1700b60ae9","56bd0e48ac1c5c1900b2dbe4","56d74afc3eb4dd0b0020196a","5723ab8a1f41110e003081ed","576b4dd327d6252b00085422","5792ca4369c5120e00efe023","5792ca55366dd20e004736d7","5792d30b23106419009c431b"],"is_deprecated":false,"is_hidden":false,"is_beta":false,"is_stable":true,"codename":"","version_clean":"2.0.0","version":"2.0"},"updates":[],"createdAt":"2016-07-23T01:40:51.092Z","link_external":false,"link_url":"","githubsync":"","sync_unique":"","hidden":false,"api":{"results":{"codes":[]},"settings":"","auth":"never","params":[],"url":""},"isReference":false,"order":1,"body":"[block:api-header]\n{\n  \"type\": \"basic\",\n  \"title\": \"1. Import OneSignal Plugin\"\n}\n[/block]\n***From the Terminal*** - Run the following from your project directory.\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"ionic plugin add onesignal-cordova-plugin\",\n      \"language\": \"css\",\n      \"name\": \"Ionic\"\n    },\n    {\n      \"code\": \"Ionic Lab does not have a UI to add 3rd party plugins.\\nPlease run the following from your project directory from a terminal:\\n\\nionic plugin add onesignal-cordova-plugin\",\n      \"language\": \"text\",\n      \"name\": \"Ionic Lab\"\n    }\n  ]\n}\n[/block]\n<br>\n[block:api-header]\n{\n  \"type\": \"basic\",\n  \"title\": \"2. Add required code\"\n}\n[/block]\n**2.1.** Add the following to your `<project-dir>/www/js/app.js`. (app.ts for Ionic2)\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"// Add the following to your existing ready fuction.\\n\\n.run(function($ionicPlatform) {\\n  $ionicPlatform.ready(function() {\\n    // Enable to debug issues.\\n  // window.plugins.OneSignal.setLogLevel({logLevel: 4, visualLevel: 4});\\n  \\n  var notificationOpenedCallback = function(jsonData) {\\n    console.log('didReceiveRemoteNotificationCallBack: ' + JSON.stringify(jsonData));\\n  };\\n\\n  window.plugins.OneSignal.init(\\\"b2f7f966-d8cc-11e4-bed1-df8f05be55ba\\\",\\n                                 {googleProjectNumber: \\\"703322744261\\\"},\\n                                 notificationOpenedCallback);\\n  \\n  // Show an alert box if a notification comes in when the user is in your app.\\n  window.plugins.OneSignal.enableInAppAlertNotification(true);\\n  });\\n})\",\n      \"language\": \"javascript\",\n      \"name\": \"Ionic\"\n    },\n    {\n      \"code\": \"// Add the following to your existing ready fuction.\\n\\n.run(function($ionicPlatform) {\\n  $ionicPlatform.ready(function() {\\n    // Enable to debug issues.\\n  // window[\\\"plugins\\\"].OneSignal.setLogLevel({logLevel: 4, visualLevel: 4});\\n  \\n  var notificationOpenedCallback = function(jsonData) {\\n    console.log('didReceiveRemoteNotificationCallBack: ' + JSON.stringify(jsonData));\\n  };\\n\\n  window[\\\"plugins\\\"].OneSignal.init(\\\"b2f7f966-d8cc-11e4-bed1-df8f05be55ba\\\",\\n                                 {googleProjectNumber: \\\"703322744261\\\"},\\n                                 notificationOpenedCallback);\\n  \\n  // Show an alert box if a notification comes in when the user is in your app.\\n  window[\\\"plugins\\\"].OneSignal.enableInAppAlertNotification(true);\\n  });\\n})\",\n      \"language\": \"javascript\",\n      \"name\": \"Ionic2(TypeScript)\"\n    }\n  ]\n}\n[/block]\n**2.2 ** Update the 3 init parameters \n- Replace `b2f7f966-d8cc-11e4-bed1-df8f05be55ba` with your OneSignal AppId.\n- Replace `703322744261` with your Google Project Number.\n-  - *(If your app isn't for Android you can replace the number with a blank string).*\n- Change the code in the `notificationOpenedCallback` function to your liking.\n   - The function is called when you tap on a notification\n   - Callback is option if you only want the app to open when a notification is tapped on.\n<br>\n[block:api-header]\n{\n  \"type\": \"basic\",\n  \"title\": \"3. Android\"\n}\n[/block]\n**3.1 ** Open the Android SDK Manager.\n**3.2 ** Make sure to install and update the following under Extras:\n- Android Support **Repository**\n- Google **Repository**\n[block:image]\n{\n  \"images\": [\n    {\n      \"image\": [\n        \"https://files.readme.io/cfbZBwxSmeToNEbZJoz0_AndroidSDKGoogleRepository.png\",\n        \"AndroidSDKGoogleRepository.png\",\n        \"600\",\n        \"341\",\n        \"#c7413e\",\n        \"\"\n      ]\n    }\n  ]\n}\n[/block]\n**3.3 ** Follow the [Custom Notification Icons](#custom-notification-icons-click-to-expand) instructions below to create a small notification icon required for Android 5.0+ devices.\n<br>\n[block:api-header]\n{\n  \"type\": \"basic\",\n  \"title\": \"4. Amazon ADM\"\n}\n[/block]\nPlace your `api_key.txt` file into your `<project-dir>/platforms/android/assets/` folder.\n\n*To create an `api_key.txt` for your app follow our [Generating an ADM Client ID & Secret Guide](/v2.0/docs/generating-adm-client-id-and-secret)*\n<br>\n[block:api-header]\n{\n  \"type\": \"basic\",\n  \"title\": \"5. iOS\"\n}\n[/block]\n**5.1** No extra steps, you're all set if you already setup your provisioning profile and push certificate.\n<br>\n[block:api-header]\n{\n  \"type\": \"basic\",\n  \"title\": \"6. Windows Phone 8.1 (WP8.1)\"\n}\n[/block]\n*Your app does not have to be published however, you must have it created on the Windows Dev Center. Follow our [Windows Phone Project SID & Secret](http://documentation.onesignal.com/v2.0/docs/windows-phone-client-sid-secret) setup if you have not done this yet.*\n\n**6.1** Run `ionic build windows` and open the .sln in <project-root>/platforms/windows/\n**6.2** Under the Windows Phone 8.1 project double click on `Package.appxmanifest` then select the \"Application\" tab and scroll down to the \"Notifications:\" section. Change \"Toast capable:\" to Yes.\n[block:image]\n{\n  \"images\": [\n    {\n      \"image\": [\n        \"https://files.readme.io/0eX5aHISfWQhNWmLJGoJ_WindowPhone8.1_SDK_2.1.png\",\n        \"WindowPhone8.1_SDK_2.1.png\",\n        \"851\",\n        \"282\",\n        \"#384868\",\n        \"\"\n      ]\n    }\n  ]\n}\n[/block]\n<br>\n**6.3** Right click on your VS project and select Store>Associate App with the Store...\n[block:image]\n{\n  \"images\": [\n    {\n      \"image\": [\n        \"https://files.readme.io/tKhdtb2jQdSMnHskkysn_WindowPhone8.1__SDK_1.1.png\",\n        \"WindowPhone8.1__SDK_1.1.png\",\n        \"714\",\n        \"510\",\n        \"#2f4363\",\n        \"\"\n      ]\n    }\n  ]\n}\n[/block]\n**6.4** Click Next and sign into your Microsoft account.\n\n**6.5** Select your app and press Next.\n\n**6.6.** Lastly press Associate.\n[block:image]\n{\n  \"images\": [\n    {\n      \"image\": [\n        \"https://files.readme.io/mUHzdp7SlyXIpWn71Y6Q_WindowPhone8.1_SDK_4.3.png\",\n        \"WindowPhone8.1_SDK_4.3.png\",\n        \"786\",\n        \"643\",\n        \"#3489da\",\n        \"\"\n      ]\n    }\n  ]\n}\n[/block]\n<br>\n[block:api-header]\n{\n  \"type\": \"basic\",\n  \"title\": \"Custom Notification Sounds\"\n}\n[/block]\n**iOS**\n- **1.** Open the Xcode project from `<project-root>/platforms/ios/project-name.xcodeproj`.\n- **2.** Drag and drop your audio files into the Resource folder.\n[block:image]\n{\n  \"images\": [\n    {\n      \"image\": [\n        \"https://files.readme.io/Zn35Nuk8SAeADiXyRaTA_Cordova%20iOS%20custom%20notifiction%20sound.png\",\n        \"Cordova iOS custom notifiction sound.png\",\n        \"258\",\n        \"422\",\n        \"#2260af\",\n        \"\"\n      ]\n    }\n  ]\n}\n[/block]\n - **3.** When sending a notification use \"filename.extension\" in the custom iOS sound field.\n\nWhen sending a notification set the sound filename to `www/beep.wav`.*\n\n<br>\n**Android**\n- **1.** Copy your audio files to `<project-root>/platforms/android/res/raw/`. (Create the raw folder if you do not have one).\n- **2.** When sending a notification use \"filename\" (without the extension) in the custom Android sound field.\n\n<br>\n[block:api-header]\n{\n  \"type\": \"basic\",\n  \"title\": \"Custom Notification Icons\"\n}\n[/block]\n**Android and Amazon**\n\n**1.** See our small, large, and big picture sections in our [Android Notification Customizations](http://documentation.onesignal.com/docs/android-notification-customizations#small-notification-icon) guide.\n\n**2.** The files noted in the guide above need to go into your `<project-root>/platforms/android/res` folder.\nNote: For the small icon you will need a drawable folder for each screen density as noted in the link.\n[block:api-header]\n{\n  \"type\": \"basic\",\n  \"title\": \"SDK API\"\n}\n[/block]\nCheck out our [SDK API docs](/v2.0/docs/ionic-sdk-api-reference) for more OneSignal functions.\n[block:callout]\n{\n  \"type\": \"warning\",\n  \"title\": \"Push Notification Testing Requirements\",\n  \"body\": \"* *iOS* - Must test on a real device, Simulator does not support Apple push notifications.\\n* *Android*\\n   * You **MUST** build and install your app's APK. \\n   * You may use an emulator but it must have an updated version of Google Play services installed.\\n* Does **NOT** work with 'ionic server' or opening your html page in a browser.\"\n}\n[/block]\n\n[block:callout]\n{\n  \"type\": \"info\",\n  \"title\": \"Troubleshooting\",\n  \"body\": \"If you run into any errors see our [Cordova/PhoneGap/Ionic troubleshooting guide](/docs/ionic-troubleshooting).\\n\\nAlso see our [Common Problems](/docs/common-problems) section for additional troubleshooting.\"\n}\n[/block]","excerpt":"OneSignal SDK Installation for Ionic","slug":"ionic-sdk-installation","type":"basic","title":"SDK Installation"}

Introduction

iOS

Android

Website Push

Amazon

Windows Phone

Chrome Apps/Extensions

Mac OS X

Corona SDK

Unity SDK

Marmalade SDK

Adobe Air

PhoneGap

Cordova

Ionic

Intel XDK

Xamarin SDK

React Native

Cocos2d-x

Server REST API

Troubleshooting

Miscellaneous

SDK Installation

OneSignal SDK Installation for Ionic
[block:api-header] { "type": "basic", "title": "1. Import OneSignal Plugin" } [/block] ***From the Terminal*** - Run the following from your project directory. [block:code] { "codes": [ { "code": "ionic plugin add onesignal-cordova-plugin", "language": "css", "name": "Ionic" }, { "code": "Ionic Lab does not have a UI to add 3rd party plugins.\nPlease run the following from your project directory from a terminal:\n\nionic plugin add onesignal-cordova-plugin", "language": "text", "name": "Ionic Lab" } ] } [/block] <br> [block:api-header] { "type": "basic", "title": "2. Add required code" } [/block] **2.1.** Add the following to your `<project-dir>/www/js/app.js`. (app.ts for Ionic2) [block:code] { "codes": [ { "code": "// Add the following to your existing ready fuction.\n\n.run(function($ionicPlatform) {\n $ionicPlatform.ready(function() {\n // Enable to debug issues.\n // window.plugins.OneSignal.setLogLevel({logLevel: 4, visualLevel: 4});\n \n var notificationOpenedCallback = function(jsonData) {\n console.log('didReceiveRemoteNotificationCallBack: ' + JSON.stringify(jsonData));\n };\n\n window.plugins.OneSignal.init(\"b2f7f966-d8cc-11e4-bed1-df8f05be55ba\",\n {googleProjectNumber: \"703322744261\"},\n notificationOpenedCallback);\n \n // Show an alert box if a notification comes in when the user is in your app.\n window.plugins.OneSignal.enableInAppAlertNotification(true);\n });\n})", "language": "javascript", "name": "Ionic" }, { "code": "// Add the following to your existing ready fuction.\n\n.run(function($ionicPlatform) {\n $ionicPlatform.ready(function() {\n // Enable to debug issues.\n // window[\"plugins\"].OneSignal.setLogLevel({logLevel: 4, visualLevel: 4});\n \n var notificationOpenedCallback = function(jsonData) {\n console.log('didReceiveRemoteNotificationCallBack: ' + JSON.stringify(jsonData));\n };\n\n window[\"plugins\"].OneSignal.init(\"b2f7f966-d8cc-11e4-bed1-df8f05be55ba\",\n {googleProjectNumber: \"703322744261\"},\n notificationOpenedCallback);\n \n // Show an alert box if a notification comes in when the user is in your app.\n window[\"plugins\"].OneSignal.enableInAppAlertNotification(true);\n });\n})", "language": "javascript", "name": "Ionic2(TypeScript)" } ] } [/block] **2.2 ** Update the 3 init parameters - Replace `b2f7f966-d8cc-11e4-bed1-df8f05be55ba` with your OneSignal AppId. - Replace `703322744261` with your Google Project Number. - - *(If your app isn't for Android you can replace the number with a blank string).* - Change the code in the `notificationOpenedCallback` function to your liking. - The function is called when you tap on a notification - Callback is option if you only want the app to open when a notification is tapped on. <br> [block:api-header] { "type": "basic", "title": "3. Android" } [/block] **3.1 ** Open the Android SDK Manager. **3.2 ** Make sure to install and update the following under Extras: - Android Support **Repository** - Google **Repository** [block:image] { "images": [ { "image": [ "https://files.readme.io/cfbZBwxSmeToNEbZJoz0_AndroidSDKGoogleRepository.png", "AndroidSDKGoogleRepository.png", "600", "341", "#c7413e", "" ] } ] } [/block] **3.3 ** Follow the [Custom Notification Icons](#custom-notification-icons-click-to-expand) instructions below to create a small notification icon required for Android 5.0+ devices. <br> [block:api-header] { "type": "basic", "title": "4. Amazon ADM" } [/block] Place your `api_key.txt` file into your `<project-dir>/platforms/android/assets/` folder. *To create an `api_key.txt` for your app follow our [Generating an ADM Client ID & Secret Guide](/v2.0/docs/generating-adm-client-id-and-secret)* <br> [block:api-header] { "type": "basic", "title": "5. iOS" } [/block] **5.1** No extra steps, you're all set if you already setup your provisioning profile and push certificate. <br> [block:api-header] { "type": "basic", "title": "6. Windows Phone 8.1 (WP8.1)" } [/block] *Your app does not have to be published however, you must have it created on the Windows Dev Center. Follow our [Windows Phone Project SID & Secret](http://documentation.onesignal.com/v2.0/docs/windows-phone-client-sid-secret) setup if you have not done this yet.* **6.1** Run `ionic build windows` and open the .sln in <project-root>/platforms/windows/ **6.2** Under the Windows Phone 8.1 project double click on `Package.appxmanifest` then select the "Application" tab and scroll down to the "Notifications:" section. Change "Toast capable:" to Yes. [block:image] { "images": [ { "image": [ "https://files.readme.io/0eX5aHISfWQhNWmLJGoJ_WindowPhone8.1_SDK_2.1.png", "WindowPhone8.1_SDK_2.1.png", "851", "282", "#384868", "" ] } ] } [/block] <br> **6.3** Right click on your VS project and select Store>Associate App with the Store... [block:image] { "images": [ { "image": [ "https://files.readme.io/tKhdtb2jQdSMnHskkysn_WindowPhone8.1__SDK_1.1.png", "WindowPhone8.1__SDK_1.1.png", "714", "510", "#2f4363", "" ] } ] } [/block] **6.4** Click Next and sign into your Microsoft account. **6.5** Select your app and press Next. **6.6.** Lastly press Associate. [block:image] { "images": [ { "image": [ "https://files.readme.io/mUHzdp7SlyXIpWn71Y6Q_WindowPhone8.1_SDK_4.3.png", "WindowPhone8.1_SDK_4.3.png", "786", "643", "#3489da", "" ] } ] } [/block] <br> [block:api-header] { "type": "basic", "title": "Custom Notification Sounds" } [/block] **iOS** - **1.** Open the Xcode project from `<project-root>/platforms/ios/project-name.xcodeproj`. - **2.** Drag and drop your audio files into the Resource folder. [block:image] { "images": [ { "image": [ "https://files.readme.io/Zn35Nuk8SAeADiXyRaTA_Cordova%20iOS%20custom%20notifiction%20sound.png", "Cordova iOS custom notifiction sound.png", "258", "422", "#2260af", "" ] } ] } [/block] - **3.** When sending a notification use "filename.extension" in the custom iOS sound field. When sending a notification set the sound filename to `www/beep.wav`.* <br> **Android** - **1.** Copy your audio files to `<project-root>/platforms/android/res/raw/`. (Create the raw folder if you do not have one). - **2.** When sending a notification use "filename" (without the extension) in the custom Android sound field. <br> [block:api-header] { "type": "basic", "title": "Custom Notification Icons" } [/block] **Android and Amazon** **1.** See our small, large, and big picture sections in our [Android Notification Customizations](http://documentation.onesignal.com/docs/android-notification-customizations#small-notification-icon) guide. **2.** The files noted in the guide above need to go into your `<project-root>/platforms/android/res` folder. Note: For the small icon you will need a drawable folder for each screen density as noted in the link. [block:api-header] { "type": "basic", "title": "SDK API" } [/block] Check out our [SDK API docs](/v2.0/docs/ionic-sdk-api-reference) for more OneSignal functions. [block:callout] { "type": "warning", "title": "Push Notification Testing Requirements", "body": "* *iOS* - Must test on a real device, Simulator does not support Apple push notifications.\n* *Android*\n * You **MUST** build and install your app's APK. \n * You may use an emulator but it must have an updated version of Google Play services installed.\n* Does **NOT** work with 'ionic server' or opening your html page in a browser." } [/block] [block:callout] { "type": "info", "title": "Troubleshooting", "body": "If you run into any errors see our [Cordova/PhoneGap/Ionic troubleshooting guide](/docs/ionic-troubleshooting).\n\nAlso see our [Common Problems](/docs/common-problems) section for additional troubleshooting." } [/block]