{"_id":"57b8836235beca0e0012d251","githubsync":"","parentDoc":null,"__v":1,"user":"56cecbb2e50c9c1b008303eb","category":{"_id":"57b4705ee9e4c60e00f6f4c3","project":"56cecbdb44c5700b0095c03a","__v":0,"version":"56cecbdc44c5700b0095c03d","sync":{"url":"","isSync":false},"reference":false,"createdAt":"2016-08-17T14:10:38.587Z","from_sync":false,"order":5,"slug":"web","title":"Website"},"project":"56cecbdb44c5700b0095c03a","version":{"_id":"56cecbdc44c5700b0095c03d","project":"56cecbdb44c5700b0095c03a","__v":10,"createdAt":"2016-02-25T09:39:40.121Z","releaseDate":"2016-02-25T09:39:40.121Z","categories":["56cecbdc44c5700b0095c03e","56d1d2c05ad7ad0b00b7e809","56d1d2fa5ad7ad0b00b7e80a","56d369331660770b00081159","56d3693d1660770b0008115a","56e5361e7990160e002e3fbc","56e5362775eb791700a9c4d2","57a9030947f2f419009188d4","57b4705ee9e4c60e00f6f4c3","5828f5b04774ab0f005179a2"],"is_deprecated":false,"is_hidden":false,"is_beta":false,"is_stable":true,"codename":"","version_clean":"1.0.0","version":"1.0"},"metadata":{"title":"","description":"","image":[]},"updates":[],"next":{"pages":[],"description":""},"createdAt":"2016-08-20T16:20:50.110Z","link_external":false,"link_url":"","sync_unique":"","hidden":false,"api":{"results":{"codes":[]},"settings":"","auth":"required","params":[],"url":""},"isReference":false,"order":2,"body":"[block:api-header]\n{\n  \"type\": \"basic\",\n  \"title\": \"1. Configure the Chrome Web Notifications in PushApps\"\n}\n[/block]\nUnder the selected app, go to the Settings tab and scroll down for the Chrome Web Notifications settings:\n[block:image]\n{\n  \"images\": [\n    {\n      \"image\": [\n        \"https://files.readme.io/bf4785d-Screen_Shot_2016-08-20_at_6.37.47_PM.png\",\n        \"Screen Shot 2016-08-20 at 6.37.47 PM.png\",\n        820,\n        253,\n        \"#eaeced\"\n      ]\n    }\n  ]\n}\n[/block]\n* If you don't know how to get your GCM API Key and Project Number, [please check our specific guide about it](doc:chrome-configuration).\n\n* Your full site url including `https://`.\n[block:api-header]\n{\n  \"type\": \"basic\",\n  \"title\": \"2. Get the required files\"\n}\n[/block]\n2.1 [Download and unzip those files](https://code.pushapps.mobi/pushapps-website-notifications.zip). You should have the following:\n* `pushapps-sw.js`\n* `manifest.json`\n\n2.2 Please edit the `manifest.json` file and fill your website name and GCM Project Number.\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"{\\n  \\\"name\\\": \\\"YOUR_SITE_NAME\\\",\\n  \\\"gcm_sender_id\\\": \\\"YOUR_GOOGLE_PROJECT_NUMBER\\\"\\n}\",\n      \"language\": \"json\"\n    }\n  ]\n}\n[/block]\n2.3 Upload both files to the top-level root of your website directory. Please notice that both files should be accessible in the following format:\n`https://yourdomain.com/pushapps-sw.js`\n`https://yourdomain.com/manifest.json`\n[block:api-header]\n{\n  \"type\": \"basic\",\n  \"title\": \"3. Install the SDK\"\n}\n[/block]\n3.1 Include the `manifest.json` file in your `<head>` before any other `<link>` element:\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"<link rel=\\\"manifest\\\" href=\\\"/manifest.json\\\">\",\n      \"language\": \"html\"\n    }\n  ]\n}\n[/block]\n3.2 Include the PushApps SDK from our CDN:\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"<script src=\\\"https://code.pushapps.mobi/pushapps-sdk.js\\\" async></script>\",\n      \"language\": \"html\"\n    }\n  ]\n}\n[/block]\n3.3 Initialize the SDK with the following code:\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"<script>\\n      var PushApps = window.PushApps || [];\\n      PushApps.push([\\\"init\\\", {\\n          sdkKey: \\\"Your_SDK_Key\\\",\\n          autoRegister: true, /* set to false if you don't want to automatically register users to push notifications */\\n        \\tinitCallback: function () {\\n              window.PushApps.GetPushSubscription(function (subscription) {\\n                  console.log(\\\"user id: \\\" + subscription.device_id);\\n  \\t\\t\\t\\t\\t\\t\\t\\tconsole.log(\\\"push status: \\\" + subscription.status);\\n  \\t\\t\\t\\t\\t\\t\\t\\tif (subscription.status === \\\"granted\\\") {\\n    \\t\\t\\t\\t\\t\\t\\t\\t\\tconsole.log(\\\"push token: \\\" + subscription.push_token);\\n  \\t\\t\\t\\t\\t\\t\\t\\t}\\n              });\\n          }\\n      }]);\\n</script>\",\n      \"language\": \"javascript\"\n    }\n  ]\n}\n[/block]\n\n[block:callout]\n{\n  \"type\": \"success\",\n  \"title\": \"That's it!\",\n  \"body\": \"You're ready to go live! Users will start register now to push notifications and you can start interact with them immediately!\"\n}\n[/block]","excerpt":"","slug":"sdk-installation","type":"basic","title":"SDK Installation (HTTPS)"}

SDK Installation (HTTPS)


[block:api-header] { "type": "basic", "title": "1. Configure the Chrome Web Notifications in PushApps" } [/block] Under the selected app, go to the Settings tab and scroll down for the Chrome Web Notifications settings: [block:image] { "images": [ { "image": [ "https://files.readme.io/bf4785d-Screen_Shot_2016-08-20_at_6.37.47_PM.png", "Screen Shot 2016-08-20 at 6.37.47 PM.png", 820, 253, "#eaeced" ] } ] } [/block] * If you don't know how to get your GCM API Key and Project Number, [please check our specific guide about it](doc:chrome-configuration). * Your full site url including `https://`. [block:api-header] { "type": "basic", "title": "2. Get the required files" } [/block] 2.1 [Download and unzip those files](https://code.pushapps.mobi/pushapps-website-notifications.zip). You should have the following: * `pushapps-sw.js` * `manifest.json` 2.2 Please edit the `manifest.json` file and fill your website name and GCM Project Number. [block:code] { "codes": [ { "code": "{\n \"name\": \"YOUR_SITE_NAME\",\n \"gcm_sender_id\": \"YOUR_GOOGLE_PROJECT_NUMBER\"\n}", "language": "json" } ] } [/block] 2.3 Upload both files to the top-level root of your website directory. Please notice that both files should be accessible in the following format: `https://yourdomain.com/pushapps-sw.js` `https://yourdomain.com/manifest.json` [block:api-header] { "type": "basic", "title": "3. Install the SDK" } [/block] 3.1 Include the `manifest.json` file in your `<head>` before any other `<link>` element: [block:code] { "codes": [ { "code": "<link rel=\"manifest\" href=\"/manifest.json\">", "language": "html" } ] } [/block] 3.2 Include the PushApps SDK from our CDN: [block:code] { "codes": [ { "code": "<script src=\"https://code.pushapps.mobi/pushapps-sdk.js\" async></script>", "language": "html" } ] } [/block] 3.3 Initialize the SDK with the following code: [block:code] { "codes": [ { "code": "<script>\n var PushApps = window.PushApps || [];\n PushApps.push([\"init\", {\n sdkKey: \"Your_SDK_Key\",\n autoRegister: true, /* set to false if you don't want to automatically register users to push notifications */\n \tinitCallback: function () {\n window.PushApps.GetPushSubscription(function (subscription) {\n console.log(\"user id: \" + subscription.device_id);\n \t\t\t\t\t\t\t\tconsole.log(\"push status: \" + subscription.status);\n \t\t\t\t\t\t\t\tif (subscription.status === \"granted\") {\n \t\t\t\t\t\t\t\t\tconsole.log(\"push token: \" + subscription.push_token);\n \t\t\t\t\t\t\t\t}\n });\n }\n }]);\n</script>", "language": "javascript" } ] } [/block] [block:callout] { "type": "success", "title": "That's it!", "body": "You're ready to go live! Users will start register now to push notifications and you can start interact with them immediately!" } [/block]