{"__v":20,"_id":"55af4b93826d210d00041e29","category":{"__v":1,"_id":"5540e6445cf9682100d61afd","pages":["55af4b93826d210d00041e29"],"project":"5540ce1b31827a0d007ab1cc","version":"5540ce1c31827a0d007ab1cf","sync":{"url":"","isSync":false},"reference":false,"createdAt":"2015-04-29T14:10:12.065Z","from_sync":false,"order":12,"slug":"safari","title":"Safari"},"parentDoc":null,"project":"5540ce1b31827a0d007ab1cc","user":"55a79a4d4a33f92b00b7a111","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":"2015-07-22T07:51:47.993Z","link_external":false,"link_url":"","githubsync":"","sync_unique":"","hidden":false,"api":{"results":{"codes":[]},"settings":"","auth":"required","params":[],"url":""},"isReference":false,"order":0,"body":"To integrate Safari push notifications into your website, follow these simple steps:\n[block:api-header]\n{\n  \"type\": \"basic\",\n  \"title\": \"1. Registering with Apple\"\n}\n[/block]\n**1.1.** To send push notifications,first register in [Certificates, Identifiers & Profiles section](https://developer.apple.com/account/overview.action) of Member Center.\n[block:image]\n{\n  \"images\": [\n    {\n      \"image\": [\n        \"https://files.readme.io/MW2wios3QCSIoK7P4bQa_1.png\",\n        \"1.png\",\n        \"1136\",\n        \"862\",\n        \"#895a4d\",\n        \"\"\n      ]\n    }\n  ]\n}\n[/block]\n**1.2.** Registration requires an iOS developer license or Mac developer license.\n[block:image]\n{\n  \"images\": [\n    {\n      \"image\": [\n        \"https://files.readme.io/D6LIuqAJS5aimOlwOwae_2.png\",\n        \"2.png\",\n        \"1136\",\n        \"862\",\n        \"#364b63\",\n        \"\"\n      ]\n    }\n  ]\n}\n[/block]\n**1.3.** Add a new certificate.\n[block:image]\n{\n  \"images\": [\n    {\n      \"image\": [\n        \"https://files.readme.io/gxJrqYRJKklejvsOI1TQ_3.png\",\n        \"3.png\",\n        \"1136\",\n        \"862\",\n        \"#8d5438\",\n        \"\"\n      ]\n    }\n  ]\n}\n[/block]\n**1.4.** Choose **Website Push ID Certificate** and click Continue.\n[block:image]\n{\n  \"images\": [\n    {\n      \"image\": [\n        \"https://files.readme.io/qNzKVUERRaaREl3LRpZE_4.png\",\n        \"4.png\",\n        \"1136\",\n        \"1088\",\n        \"#64a6f9\",\n        \"\"\n      ]\n    }\n  ]\n}\n[/block]\n**1.5.** To register, enter the following information:\n\n**Identifier (Website Push ID).** Your unique reverse-domain string, such as web.com.example.domain (must start with web.).\n\n**Website Push ID Description.** The name used throughout the Provisioning Portal to refer to your website. Use it to label your Website Push IDs into a more human-readable format for your own convenience.\n\n**1.6.** Afterwards, download the push notification certificate.\n[block:image]\n{\n  \"images\": [\n    {\n      \"image\": [\n        \"https://files.readme.io/DgXyAh9lRneiQSj29N8v_5.png\",\n        \"5.png\",\n        \"1136\",\n        \"871\",\n        \"\",\n        \"\"\n      ]\n    }\n  ]\n}\n[/block]\n\n[block:callout]\n{\n  \"type\": \"info\",\n  \"title\": \"Note\",\n  \"body\": \"The certificate you download from Apple is a **.cer** file. To get the **.p12** file necessary to configure Pushwoosh, you must export a private key. See [Exporting Private Key part](http://docs.pushwoosh.com/docs/apns-configuration#4-exporting-private-key) of the iOS Configuration Guide.\"\n}\n[/block]\n\n[block:api-header]\n{\n  \"type\": \"basic\",\n  \"title\": \"2. Configure the Safari section in your Pushwoosh Control Panel\"\n}\n[/block]\n**Website Name:** name of your website that will be displayed in the notification title.\n\n**Allowed domains:** an array of websites allowed to request permission from user, one domain per line.\n\n**URL Template:** target URL to go to when the notification is clicked. Use %:::at::: as a placeholder for arguments you fill in when delivering your notification. This URL spelling must contain http or https; otherwise, it is invalid.\nExample: `https://yourwebsite.com/%@`\n\n**Website Icon:** upload your website icon to Pushwoosh. *The icon must be 256×256 pixels*, Pushwoosh will automatically resize it for all other UIs.\n\n**Key file:** upload the **.p12** certificate file that you downloaded in step **1.6.**\n\n**Private key password:** input the certificate password.\n[block:image]\n{\n  \"images\": [\n    {\n      \"image\": [\n        \"https://files.readme.io/D1ZTxVXkSZq8dk0R7pin_Pushwoosh___Applications___Pushwoosh_Website_Safari_Push___Configure.png\",\n        \"Pushwoosh___Applications___Pushwoosh_Website_Safari_Push___Configure.png\",\n        \"628\",\n        \"976\",\n        \"#4990b1\",\n        \"\"\n      ]\n    }\n  ]\n}\n[/block]\nThe push package with the icon set, website JSON dictionary and manifest file, that Safari requests from the server will be automatically generated by Pushwoosh, and you can download it whenever you need.\n[block:callout]\n{\n  \"type\": \"warning\",\n  \"title\": \"Important!\",\n  \"body\": \"When a user is asked for permission to receive push notifications, Safari asks your web server for a *push package*. The package contains data used by the notification UI, such as your website name and icon, as well as a cryptographic signature that verifies that your notification is coming from a trusted source: you. **Push package with all its content is downloaded ONLY ONCE by each subscribed users upon registration**, and cannot be force-updated on devices. Consider this when launching Safari push notifications for your website in production.\"\n}\n[/block]\n\n[block:api-header]\n{\n  \"type\": \"basic\",\n  \"title\": \"3. Service-side\"\n}\n[/block]\n\n[block:callout]\n{\n  \"type\": \"success\",\n  \"body\": \"The server-side integration of Safari Web Push notifications is described in [**Web Push SDK 3.0 Guide**](http://docs.pushwoosh.com/docs/web-push-sdk-30)\"\n}\n[/block]","excerpt":"","slug":"safari-website-notifications","type":"basic","title":"Safari Website Notifications"}

Safari Website Notifications


To integrate Safari push notifications into your website, follow these simple steps: [block:api-header] { "type": "basic", "title": "1. Registering with Apple" } [/block] **1.1.** To send push notifications,first register in [Certificates, Identifiers & Profiles section](https://developer.apple.com/account/overview.action) of Member Center. [block:image] { "images": [ { "image": [ "https://files.readme.io/MW2wios3QCSIoK7P4bQa_1.png", "1.png", "1136", "862", "#895a4d", "" ] } ] } [/block] **1.2.** Registration requires an iOS developer license or Mac developer license. [block:image] { "images": [ { "image": [ "https://files.readme.io/D6LIuqAJS5aimOlwOwae_2.png", "2.png", "1136", "862", "#364b63", "" ] } ] } [/block] **1.3.** Add a new certificate. [block:image] { "images": [ { "image": [ "https://files.readme.io/gxJrqYRJKklejvsOI1TQ_3.png", "3.png", "1136", "862", "#8d5438", "" ] } ] } [/block] **1.4.** Choose **Website Push ID Certificate** and click Continue. [block:image] { "images": [ { "image": [ "https://files.readme.io/qNzKVUERRaaREl3LRpZE_4.png", "4.png", "1136", "1088", "#64a6f9", "" ] } ] } [/block] **1.5.** To register, enter the following information: **Identifier (Website Push ID).** Your unique reverse-domain string, such as web.com.example.domain (must start with web.). **Website Push ID Description.** The name used throughout the Provisioning Portal to refer to your website. Use it to label your Website Push IDs into a more human-readable format for your own convenience. **1.6.** Afterwards, download the push notification certificate. [block:image] { "images": [ { "image": [ "https://files.readme.io/DgXyAh9lRneiQSj29N8v_5.png", "5.png", "1136", "871", "", "" ] } ] } [/block] [block:callout] { "type": "info", "title": "Note", "body": "The certificate you download from Apple is a **.cer** file. To get the **.p12** file necessary to configure Pushwoosh, you must export a private key. See [Exporting Private Key part](http://docs.pushwoosh.com/docs/apns-configuration#4-exporting-private-key) of the iOS Configuration Guide." } [/block] [block:api-header] { "type": "basic", "title": "2. Configure the Safari section in your Pushwoosh Control Panel" } [/block] **Website Name:** name of your website that will be displayed in the notification title. **Allowed domains:** an array of websites allowed to request permission from user, one domain per line. **URL Template:** target URL to go to when the notification is clicked. Use %@ as a placeholder for arguments you fill in when delivering your notification. This URL spelling must contain http or https; otherwise, it is invalid. Example: `https://yourwebsite.com/%@` **Website Icon:** upload your website icon to Pushwoosh. *The icon must be 256×256 pixels*, Pushwoosh will automatically resize it for all other UIs. **Key file:** upload the **.p12** certificate file that you downloaded in step **1.6.** **Private key password:** input the certificate password. [block:image] { "images": [ { "image": [ "https://files.readme.io/D1ZTxVXkSZq8dk0R7pin_Pushwoosh___Applications___Pushwoosh_Website_Safari_Push___Configure.png", "Pushwoosh___Applications___Pushwoosh_Website_Safari_Push___Configure.png", "628", "976", "#4990b1", "" ] } ] } [/block] The push package with the icon set, website JSON dictionary and manifest file, that Safari requests from the server will be automatically generated by Pushwoosh, and you can download it whenever you need. [block:callout] { "type": "warning", "title": "Important!", "body": "When a user is asked for permission to receive push notifications, Safari asks your web server for a *push package*. The package contains data used by the notification UI, such as your website name and icon, as well as a cryptographic signature that verifies that your notification is coming from a trusted source: you. **Push package with all its content is downloaded ONLY ONCE by each subscribed users upon registration**, and cannot be force-updated on devices. Consider this when launching Safari push notifications for your website in production." } [/block] [block:api-header] { "type": "basic", "title": "3. Service-side" } [/block] [block:callout] { "type": "success", "body": "The server-side integration of Safari Web Push notifications is described in [**Web Push SDK 3.0 Guide**](http://docs.pushwoosh.com/docs/web-push-sdk-30)" } [/block]