Creating Safari Web Push Certificate
  • Documentation
  • /
  • Safari Certificate

Getting Push Notifications working on Safari may look a bit complicated at first, but following this step-by-step guide makes it a lot easier. Then there’s a huge reward at the end of this tutorial where you will open your website to another user base for re-marketing and getting repeat traffic.

Before we get started you need to have an active Apple Developer account to create a unique Push ID for your website. The entire process can be divided into 4 sections starting with a Certificate Request, then creating a Website Push ID, next the Web Push Certificate and then uploading the certificate to PushAlert.

STEP 1: Create a Certificate Request

In this step, we are going to create a certificate signing request which will be used later on.

  • Launch the Keychain Access app.
  • Click on Keychain Access > Certificate Assistant > then, Request a Certificate From a Certificate Authority.
  • Enter email address, a name and then check "Saved to disk" option. Click on Continue.
  • Save the certificate signing request (CSR) with the given name, we will need it later to create the Website Push Certificate.

STEP 2: Setting up Website Push ID for APNS

  • For this, you need to first login to the Apple Developer Console. Here, we are going to create a unique Website Push ID for push notifications.
  • In the Developer Console, click on "Website Push IDs" on the left and press the "+" sign to create a new Website Push ID.
  • First enter a meaningful Description.
  • Then enter an identifier, it follows reverse-domain name styling. So you should enter something like "web.com.mywebsite". (Note: "web" is added automatically to the identifier)
  • Click on Continue, check everything is in order and then click Register.

STEP 3: Generating Web Push Certificate

  • Click on All in the Certificates section, then click "+" to see all available options.
  • Click on Website Push ID Certificate and Continue.
  • Next, select the Website Push ID we created earlier in Step 2 and hit Continue.
  • Now we need the CSR file that was created in Step 1. Click on Continue and then browse to the file with the Choose file button, and hit Continue to upload.
  • On the next screen you will see "Your certificate is ready." Download the SSL certificate, this will be used to send notifications to your Subscribers.
  • Now we need to install and export the Certificate. For that, double click on the downloaded certificate, this will install the certificate in the Keychain Access app.
  • Let’s export the Certificate now. Open the Keychain Access app and click on Certificates in the category section.
  • Right click on the Website Push ID for which we had created the certificate, you will get a menu where you need to click on Export.
  • While saving the certificate file, use Personal Information Exchange (.p12) format.
  • Next, you will be prompted to enter a password, please leave it blank and click on "OK".
  • Then click "Allow" to export the certificate to your Mac. In the last step, we will upload this certificate to PushAlert.

STEP 4: Uploading Certificate to PushAlert

  • Go to the Safari Configuration page, Website Dashboard > Settings > Safari Configuration
  • Enter the Website Push ID, which was used to create the .p12 certificate in previous step.
  • Click on Choose File, browse to the certificate and upload.
  • Enter your website name in the next field for e.g. "My Website" (without quotes)
  • APNS requires sub-domains to be mentioned separately from the main domain where you want Push Notifications to be enabled. You can mention all your subdomains in the next field separated by comma for e.g. blog, mysubdomain
  • Upload an icon which would be used on the subscription dialog with a recommended-size of 256x256 pixels.
  • Check the Preview to see that everything is in order and click on Save.

That’s it, we are all set now. Even though Safari takes a lot more steps to setup than Chrome or Firefox, the end result is a brand new audience for your Push Notifications.