{"__v":25,"_id":"5698de7503721e0d0043a365","category":{"__v":3,"_id":"5540e63e5cf9682100d61afc","pages":["55af4832555b900d0036d263","55c4d11e8b45eb0d004cfbd6","5698de7503721e0d0043a365"],"project":"5540ce1b31827a0d007ab1cc","version":"5540ce1c31827a0d007ab1cf","sync":{"url":"","isSync":false},"reference":false,"createdAt":"2015-04-29T14:10:06.818Z","from_sync":false,"order":11,"slug":"chrome","title":"Chrome"},"parentDoc":null,"project":"5540ce1b31827a0d007ab1cc","user":"567bb6833241c20d00b730db","version":{"__v":31,"_id":"5540ce1c31827a0d007ab1cf","project":"5540ce1b31827a0d007ab1cc","createdAt":"2015-04-29T12:27:08.390Z","releaseDate":"2015-04-29T12:27:08.390Z","categories":["5540ce1c31827a0d007ab1d0","5540d91bbb9e762d00f594ad","5540e5f131827a0d007ab212","5540e5febb9e762d00f594d3","5540e61331827a0d007ab213","5540e6195cf9682100d61afa","5540e62631827a0d007ab214","5540e63031827a0d007ab215","5540e63531827a0d007ab216","5540e63e5cf9682100d61afc","5540e6445cf9682100d61afd","5540e64a5cf9682100d61afe","55a4ff5b2e70c0250038050f","55acb28318eefd0d0071d504","55ae1abe8576b92300291c80","55ae453ef302af23000ac109","55af586d555b900d0036d296","55af91dac8a85321007a53c3","55b9fee204775a2f00628071","55b9ff0e04775a2f00628072","55b9ff4604775a2f00628073","55b9ff5fd72d1e1900276a38","55b9ff7f04775a2f00628074","55b9ff90eb08801900f833e5","55b9ffa5d72d1e1900276a39","55b9ffca04775a2f00628075","55b9fffdd72d1e1900276a3a","56bc2f033ee9e70d008b46af","56c2f6efbbf9ec2d00e0fe4f","57595bbb18760817001e8bbe","57d8d9793916800e003dde53"],"is_deprecated":false,"is_hidden":false,"is_beta":false,"is_stable":true,"codename":"","version_clean":"1.0.0","version":"1.0"},"updates":[],"next":{"pages":[],"description":""},"createdAt":"2016-01-15T11:56:37.696Z","link_external":false,"link_url":"","githubsync":"","sync_unique":"","hidden":false,"api":{"results":{"codes":[]},"settings":"","auth":"required","params":[],"url":""},"isReference":false,"order":1,"body":"[block:callout]\n{\n  \"type\": \"warning\",\n  \"title\": \"ATTENTION\",\n  \"body\": \"The following instructions are **unified** for Chrome and Firefox configuration **EXCEPT** for the first article, which is unique for each platform.\"\n}\n[/block]\n\n[block:api-header]\n{\n  \"type\": \"basic\",\n  \"title\": \"Integration\"\n}\n[/block]\n**1. (Chrome)** Go to Chrome platform settings in your Pushwoosh control panel and input the following:\n \n  * GCM server API key\n  * GCM Project Number\n  * Website Name (Set the default URL here. It will be opened when the user clicks on the notification unless different URL is preset)\n\n[block:image]\n{\n  \"images\": [\n    {\n      \"image\": [\n        \"https://files.readme.io/hp4jjQJBRYuc4PwToqVT_chrome-http.png\",\n        \"chrome-http.png\",\n        \"592\",\n        \"469\",\n        \"#347034\",\n        \"\"\n      ]\n    }\n  ]\n}\n[/block]\n**1. (Firefox)** Go to Firefox platform settings in your Pushwoosh control panel, click **Configure** and then mark the specific checkbox.\n\n[block:image]\n{\n  \"images\": [\n    {\n      \"image\": [\n        \"https://files.readme.io/a8a6af5-ff_config_2.png\",\n        \"ff_config_2.png\",\n        596,\n        214,\n        \"#0ca4eb\"\n      ]\n    }\n  ]\n}\n[/block]\n**2.** Create **pushwoosh-web-pushes-http-sdk.js** file in the root directory of your website with the following content:\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"var pushwoosh = {\\n\\tPUSHWOOSH_APPLICATION_CODE: 'XXXX-XXXX',\\n\\tPUSHWOOSH_APPLICATION_CODE_GET_PARAMETER: 'pw_application_code',\\n\\tinit: function (applicationCode) {\\n\\t\\tthis.PUSHWOOSH_APPLICATION_CODE = applicationCode;\\n\\t\\twindow.addEventListener('message', this.pwReceiveMessage, false);\\n\\t},\\n\\ttryInitUsingGetParameter: function () {\\n\\t\\tvar applicationCode = this.getQueryVariable(this.PUSHWOOSH_APPLICATION_CODE_GET_PARAMETER);\\n\\t\\tconsole.log(applicationCode);\\n\\t\\tif (applicationCode) {\\n\\t\\t\\tthis.init(applicationCode);\\n\\t\\t}\\n\\t},\\n\\tpwReceiveMessage: function (event) {\\n\\t\\tif (event.data == 'allowPushNotifications') {\\n\\t\\t\\tlocalStorage.setItem('pwAllowPushNotifications', true);\\n\\t\\t}\\n\\t},\\n\\tisBrowserChrome: function () {\\n\\t\\treturn navigator.userAgent.toLowerCase().indexOf('chrome') > -1;\\n\\t},\\n\\tisBrowserFirefox: function () {\\n\\t\\treturn navigator.userAgent.toLowerCase().indexOf('firefox') > -1;\\n\\t},\\n\\tisBrowserSafari: function () {\\n\\t\\treturn navigator.userAgent.toLowerCase().indexOf('safari') > -1 && !this.isBrowserChrome();\\n\\t},\\n\\tisBrowserSupported: function () {\\n\\t\\treturn this.isBrowserChrome() || this.isBrowserFirefox();\\n\\t},\\n\\tsubscribeAtStart: function () {\\n\\t\\tif (this.isBrowserSupported()) {\\n\\t\\t\\tif (null === localStorage.getItem('pwAllowPushNotifications')) {\\n\\t\\t\\t\\tthis.showSubscriptionWindow();\\n\\t\\t\\t}\\n\\t\\t}\\n\\t},\\n\\tisSubscribedForPushNotifications: function () {\\n\\t\\treturn true == localStorage.getItem('pwAllowPushNotifications');\\n\\t},\\n\\tshowSubscriptionWindow: function () {\\n\\t\\tif (this.isBrowserSupported()) {\\n\\t\\t\\tvar windowWidth = screen.width / 2;\\n\\t\\t\\tvar windowHeight = screen.height / 2;\\n\\n\\t\\t\\tvar windowLeft = screen.width / 2 - windowWidth / 2;\\n\\t\\t\\tvar windowRight = screen.height / 2 - windowHeight / 2;\\n\\n\\t\\t\\tvar URL = 'https://' + this.PUSHWOOSH_APPLICATION_CODE + '.chrome.pushwoosh.com/';\\n\\t\\t\\tvar pwSubscribeWindow = window.open(URL, '_blank', 'width=' + windowWidth + ',height=' + windowHeight + ',resizable=yes,scrollbars=yes,status=yes,left=' + windowLeft + ',top=' + windowRight);\\n\\t\\t}\\n\\t},\\n\\tgetQueryVariable: function (variable) {\\n\\t\\t// document.currentScript won't work if this code is called from function in event lister\\n\\t\\tif (document.currentScript) {\\n\\t\\t\\tvar urlParts = document.currentScript.src.split('?');\\n\\t\\t\\tif (typeof urlParts[1] !== 'undefined') {\\n\\t\\t\\t\\tvar vars = urlParts[1].split('&');\\n\\t\\t\\t\\tfor (var i = 0; i < vars.length; i++) {\\n\\t\\t\\t\\t\\tvar pair = vars[i].split('=');\\n\\t\\t\\t\\t\\tif (pair[0] == variable) {\\n\\t\\t\\t\\t\\t\\treturn pair[1];\\n\\t\\t\\t\\t\\t}\\n\\t\\t\\t\\t}\\n\\t\\t\\t}\\n\\t\\t}\\n\\t\\telse {\\n\\t\\t\\tconsole.error('Cannot get current script address');\\n\\t\\t}\\n\\t\\treturn null;\\n\\t}\\n};\\npushwoosh.tryInitUsingGetParameter();\",\n      \"language\": \"javascript\"\n    }\n  ]\n}\n[/block]\n**3.** Include the previous file to your website and initialize it using the **application code** instead of XXXXX-XXXXX\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"<!--[if !IE]><!-->\\n    <script src=\\\"/pushwoosh-web-pushes-http-sdk.js?pw_application_code=XXXXX-XXXXX\\\"></script>\\n<!--<![endif]-->\",\n      \"language\": \"javascript\"\n    }\n  ]\n}\n[/block]\n**4.** In order to create a Push Subscription button use the following:\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"<button onclick=\\\"pushwoosh.showSubscriptionWindow()\\\">Subscribe to push notifications</button>\",\n      \"language\": \"html\"\n    }\n  ]\n}\n[/block]\n**5.** Alternatively, if you want Notification Subscriptions to pop up automatically (opposed to #4 above), use the following:\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"<script>pushwoosh.subscribeAtStart();</script>\",\n      \"language\": \"javascript\"\n    }\n  ]\n}\n[/block]\n\n[block:callout]\n{\n  \"type\": \"info\",\n  \"title\": \"IMPORTANT\",\n  \"body\": \"A pop-up window is only allowed with the user's permission due to the browser's security policy: pop-up blockers engage automatically without direct user action. .\\nThe browser will block pop-ups automatically until you explicitly allow them with a button click.\\nThe above-mentioned Push Subscription button will work flawlessly without additional user permissions.\"\n}\n[/block]\n\n[block:image]\n{\n  \"images\": [\n    {\n      \"image\": [\n        \"https://files.readme.io/Cr7bMp4Qs2M1ioP4VhGg_img4.png\",\n        \"img4.png\",\n        \"603\",\n        \"235\",\n        \"#729dbd\",\n        \"\"\n      ]\n    }\n  ]\n}\n[/block]\n\n[block:image]\n{\n  \"images\": [\n    {\n      \"image\": [\n        \"https://files.readme.io/XIJ2AQsTTQmYcjeFhykX_img5.png\",\n        \"img5.png\",\n        \"486\",\n        \"243\",\n        \"#7d4c45\",\n        \"\"\n      ]\n    }\n  ]\n}\n[/block]\nAs a result, the user will be prompted to subscribe for push notifications from the website:\n[block:image]\n{\n  \"images\": [\n    {\n      \"image\": [\n        \"https://files.readme.io/u8CZCKoSQ9W1Bv2y2oQx_img3.png\",\n        \"img3.png\",\n        \"963\",\n        \"596\",\n        \"#4894d0\",\n        \"\"\n      ]\n    }\n  ]\n}\n[/block]\n\n[block:html]\n{\n  \"html\": \"<div align=\\\"center\\\">\\n\\t<button id=\\\"subscribeToHTTPChrome\\\" class=\\\"btnChrome\\\">Try now!</button>\\n</div>\"\n}\n[/block]","excerpt":"Follow the instructions to enable push notifications for Chrome and Firefox http websites","slug":"chrome-web-push-for-http-websites","type":"basic","title":"Chrome/Firefox Web Push for HTTP websites"}

Chrome/Firefox Web Push for HTTP websites

Follow the instructions to enable push notifications for Chrome and Firefox http websites

[block:callout] { "type": "warning", "title": "ATTENTION", "body": "The following instructions are **unified** for Chrome and Firefox configuration **EXCEPT** for the first article, which is unique for each platform." } [/block] [block:api-header] { "type": "basic", "title": "Integration" } [/block] **1. (Chrome)** Go to Chrome platform settings in your Pushwoosh control panel and input the following: * GCM server API key * GCM Project Number * Website Name (Set the default URL here. It will be opened when the user clicks on the notification unless different URL is preset) [block:image] { "images": [ { "image": [ "https://files.readme.io/hp4jjQJBRYuc4PwToqVT_chrome-http.png", "chrome-http.png", "592", "469", "#347034", "" ] } ] } [/block] **1. (Firefox)** Go to Firefox platform settings in your Pushwoosh control panel, click **Configure** and then mark the specific checkbox. [block:image] { "images": [ { "image": [ "https://files.readme.io/a8a6af5-ff_config_2.png", "ff_config_2.png", 596, 214, "#0ca4eb" ] } ] } [/block] **2.** Create **pushwoosh-web-pushes-http-sdk.js** file in the root directory of your website with the following content: [block:code] { "codes": [ { "code": "var pushwoosh = {\n\tPUSHWOOSH_APPLICATION_CODE: 'XXXX-XXXX',\n\tPUSHWOOSH_APPLICATION_CODE_GET_PARAMETER: 'pw_application_code',\n\tinit: function (applicationCode) {\n\t\tthis.PUSHWOOSH_APPLICATION_CODE = applicationCode;\n\t\twindow.addEventListener('message', this.pwReceiveMessage, false);\n\t},\n\ttryInitUsingGetParameter: function () {\n\t\tvar applicationCode = this.getQueryVariable(this.PUSHWOOSH_APPLICATION_CODE_GET_PARAMETER);\n\t\tconsole.log(applicationCode);\n\t\tif (applicationCode) {\n\t\t\tthis.init(applicationCode);\n\t\t}\n\t},\n\tpwReceiveMessage: function (event) {\n\t\tif (event.data == 'allowPushNotifications') {\n\t\t\tlocalStorage.setItem('pwAllowPushNotifications', true);\n\t\t}\n\t},\n\tisBrowserChrome: function () {\n\t\treturn navigator.userAgent.toLowerCase().indexOf('chrome') > -1;\n\t},\n\tisBrowserFirefox: function () {\n\t\treturn navigator.userAgent.toLowerCase().indexOf('firefox') > -1;\n\t},\n\tisBrowserSafari: function () {\n\t\treturn navigator.userAgent.toLowerCase().indexOf('safari') > -1 && !this.isBrowserChrome();\n\t},\n\tisBrowserSupported: function () {\n\t\treturn this.isBrowserChrome() || this.isBrowserFirefox();\n\t},\n\tsubscribeAtStart: function () {\n\t\tif (this.isBrowserSupported()) {\n\t\t\tif (null === localStorage.getItem('pwAllowPushNotifications')) {\n\t\t\t\tthis.showSubscriptionWindow();\n\t\t\t}\n\t\t}\n\t},\n\tisSubscribedForPushNotifications: function () {\n\t\treturn true == localStorage.getItem('pwAllowPushNotifications');\n\t},\n\tshowSubscriptionWindow: function () {\n\t\tif (this.isBrowserSupported()) {\n\t\t\tvar windowWidth = screen.width / 2;\n\t\t\tvar windowHeight = screen.height / 2;\n\n\t\t\tvar windowLeft = screen.width / 2 - windowWidth / 2;\n\t\t\tvar windowRight = screen.height / 2 - windowHeight / 2;\n\n\t\t\tvar URL = 'https://' + this.PUSHWOOSH_APPLICATION_CODE + '.chrome.pushwoosh.com/';\n\t\t\tvar pwSubscribeWindow = window.open(URL, '_blank', 'width=' + windowWidth + ',height=' + windowHeight + ',resizable=yes,scrollbars=yes,status=yes,left=' + windowLeft + ',top=' + windowRight);\n\t\t}\n\t},\n\tgetQueryVariable: function (variable) {\n\t\t// document.currentScript won't work if this code is called from function in event lister\n\t\tif (document.currentScript) {\n\t\t\tvar urlParts = document.currentScript.src.split('?');\n\t\t\tif (typeof urlParts[1] !== 'undefined') {\n\t\t\t\tvar vars = urlParts[1].split('&');\n\t\t\t\tfor (var i = 0; i < vars.length; i++) {\n\t\t\t\t\tvar pair = vars[i].split('=');\n\t\t\t\t\tif (pair[0] == variable) {\n\t\t\t\t\t\treturn pair[1];\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t\telse {\n\t\t\tconsole.error('Cannot get current script address');\n\t\t}\n\t\treturn null;\n\t}\n};\npushwoosh.tryInitUsingGetParameter();", "language": "javascript" } ] } [/block] **3.** Include the previous file to your website and initialize it using the **application code** instead of XXXXX-XXXXX [block:code] { "codes": [ { "code": "<!--[if !IE]><!-->\n <script src=\"/pushwoosh-web-pushes-http-sdk.js?pw_application_code=XXXXX-XXXXX\"></script>\n<!--<![endif]-->", "language": "javascript" } ] } [/block] **4.** In order to create a Push Subscription button use the following: [block:code] { "codes": [ { "code": "<button onclick=\"pushwoosh.showSubscriptionWindow()\">Subscribe to push notifications</button>", "language": "html" } ] } [/block] **5.** Alternatively, if you want Notification Subscriptions to pop up automatically (opposed to #4 above), use the following: [block:code] { "codes": [ { "code": "<script>pushwoosh.subscribeAtStart();</script>", "language": "javascript" } ] } [/block] [block:callout] { "type": "info", "title": "IMPORTANT", "body": "A pop-up window is only allowed with the user's permission due to the browser's security policy: pop-up blockers engage automatically without direct user action. .\nThe browser will block pop-ups automatically until you explicitly allow them with a button click.\nThe above-mentioned Push Subscription button will work flawlessly without additional user permissions." } [/block] [block:image] { "images": [ { "image": [ "https://files.readme.io/Cr7bMp4Qs2M1ioP4VhGg_img4.png", "img4.png", "603", "235", "#729dbd", "" ] } ] } [/block] [block:image] { "images": [ { "image": [ "https://files.readme.io/XIJ2AQsTTQmYcjeFhykX_img5.png", "img5.png", "486", "243", "#7d4c45", "" ] } ] } [/block] As a result, the user will be prompted to subscribe for push notifications from the website: [block:image] { "images": [ { "image": [ "https://files.readme.io/u8CZCKoSQ9W1Bv2y2oQx_img3.png", "img3.png", "963", "596", "#4894d0", "" ] } ] } [/block] [block:html] { "html": "<div align=\"center\">\n\t<button id=\"subscribeToHTTPChrome\" class=\"btnChrome\">Try now!</button>\n</div>" } [/block]