{"__v":19,"_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 in your website, you should follow these simple steps:\n[block:api-header]\n{\n  \"type\": \"basic\",\n  \"title\": \"1. Registering with Apple\"\n}\n[/block]\n**1.1.** In order to send push notifications, you are required to register in the [Certificates, Identifiers & Profiles section](https://developer.apple.com/account/overview.action) of the Member Center first.\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 the 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 the **Website Push ID Certificate** option, 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.** During the registration process you will have to include the following information:\n\n**Identifier (Website Push ID).** Your unique reverse-domain string, such as web.com.example.domain (the string must start with web.).\n\n**Website Push ID Description.** This is 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 benefit.\n\n**1.6.** After you have successfully entered this information, 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. In order to get the **.p12** file that will be needed for configuration in Pushwoosh, you have to export a private key. Please refer to [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:** the name of your website that will be displayed in the title of the notification\n\n**Allowed domains:** An array of websites that are allowed to request permission from the user, one domain per line.\n\n**URL Template:** The 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 must use the http or https scheme; 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 have 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 request 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 that is 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 2.0 Guide**](http://docs.pushwoosh.com/docs/web-sdk-20)\"\n}\n[/block]","excerpt":"","slug":"safari-website-notifications","type":"basic","title":"Safari Website Notifications"}

Safari Website Notifications


To integrate Safari push notifications in your website, you should follow these simple steps: [block:api-header] { "type": "basic", "title": "1. Registering with Apple" } [/block] **1.1.** In order to send push notifications, you are required to register in the [Certificates, Identifiers & Profiles section](https://developer.apple.com/account/overview.action) of the Member Center first. [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 the new certificate. [block:image] { "images": [ { "image": [ "https://files.readme.io/gxJrqYRJKklejvsOI1TQ_3.png", "3.png", "1136", "862", "#8d5438", "" ] } ] } [/block] **1.4.** Choose the **Website Push ID Certificate** option, and click Continue. [block:image] { "images": [ { "image": [ "https://files.readme.io/qNzKVUERRaaREl3LRpZE_4.png", "4.png", "1136", "1088", "#64a6f9", "" ] } ] } [/block] **1.5.** During the registration process you will have to include the following information: **Identifier (Website Push ID).** Your unique reverse-domain string, such as web.com.example.domain (the string must start with web.). **Website Push ID Description.** This is 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 benefit. **1.6.** After you have successfully entered this information, 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. In order to get the **.p12** file that will be needed for configuration in Pushwoosh, you have to export a private key. Please refer to [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:** the name of your website that will be displayed in the title of the notification **Allowed domains:** An array of websites that are allowed to request permission from the user, one domain per line. **URL Template:** The URL to go to when the notification is clicked. Use %@ as a placeholder for arguments you fill in when delivering your notification. This URL must use the http or https scheme; 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 have 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 request 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 that is 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 2.0 Guide**](http://docs.pushwoosh.com/docs/web-sdk-20)" } [/block]