Safari Push Notifications Explained
In the next few minutes, we will take you through simple steps that you need to take to successfully integrate safari push notifications to your web applications. Before we dive into the details, let's make sure we all understand how safari push notifications work. In order to demonstrate the concept, we have created a demo on this page with four buttons - each for an example usecase. If you are not already viewing this page on a Safari browser, we recommend you switch over to Safari browser and try clicking on one of these Safari Push demo buttons. Once you do that, you will receive a web push notifications on your Mac OS. Note that iOS currently does not support Safari Push Notifications.
Step 1: Select a Safari Push Notification API
In order to integrate Safari Push to your website, you will need to select one of the available APIs. Note that not all APIs support Safari - and not all cost the same. We have therefore created a comprehensive comparison table to help you select one that best fits your need in terms of features, pricing and ease of integration. Please take a moment to review our ranking factors before we move on to Step 2.
Step 2: Safari Push Notification for HTTP sites
If your site in a non-secured HTTP site, Step 2 will be the last step for you. With companies such as Webpushr, all you will need to do to is upload a 256px by 256px icon in PNG format. This icon will be displayed as part of your Safari push notification.
The reason it is a straightforward integration for HTTP sites is because the best Web Push API providers (such as Webpushr) will create a secure (HTTPS) and custom subdomain on your behalf. This is necessary because Apple does not support Safari push on non-HTTPS sites at all. Once a secure HTTPS subdomain has been created, it is then used to collect subscriber information (through a pop window at the time of user optin) as well as to send notifications to your visitors. Pretty straight forward, eh?
Step 3: Create a Safari Push P12 Certificate. (HTTPS Sites Only)
If your site is HTTPS, you WILL need a P12 certificate that is issued directly by Apple to complete your Safari push. This is needed even if you are using one of the APIs mentioned above. Getting a P12 certificate is simple and we estimate it to be a ~30 minute effort which includes testing. Follow the following steps to get a P12 certificate:
Step 4: Create an Apple Developer Account
In order to get a P12 from Apple for your site, you first need to create an Apple Developer Account. We recommend you sign up as a sole proprietor/single person business as that would decrease your fee to just $99 per year. You will be paying this annual enrollment fee to Apple directly.
Step 5: Create a P12 certificate to enable Safari Push Notifications
Now that you have your own Apple Developer account and it has been verified (sometimes it can take upto a week for Apple to verify your account before you can start creating certificates). Follow the steps shown below to create your own P12 certificate and start sending web push notification.
Make sure you select "Website Push ID" from the options
Enter reverse domain style name for your site ID. Example, if your domain is example.com, the reverse-domain style ID will be web.com.example
Once you have create site ID, move on to create a certificate now.
Make sure to select "Website Push ID Certificate" from the options.
Select the Site ID from the drop down - the one you just created for your website.
Time to now create a Certificate Signing Request (CSR). You now need to use KeyChain App on your Mac.
Open KeyChain App on your Mac and click on "Request a Certificate From a Certificate Authority" as shown below.
Make sure you enter the same e-mail address as you used to sign up to Apple Developer's Account. Save the CSR to your Mac
Upload the CSR to your Apple Developers' Account and download the certificate file
Doubleclick the downloaded certificate to see it in KeyChain App. Right click to export it to your Mac as shown below
Make sure you are downloading it as .p12 format as shown below
Leave the password field blank. You now have your own .p12 certificate file.