Creating Safari Web Push Certificate
This document will guide you to create Safari certificates that will help you enable Web Push Opt-in on Safari Browser on macOS.
Before we start, you need to have an active paid Apple Developer subscription to create a unique Push ID for your website.
The document is divided into 3 Steps:
- Create a Certificate Request
- Setting up Website Push ID for APNS (Apple Push Notification Service)
- Generating Web Push Certificate
STEP 1: Create a Certificate Request
In this step, we are going to create a certificate signing request.
- Launch the Keychain Access app.
- Click on Keychain Access > Certificate Assistant > then, Request a Certificate From a Certificate Authority.
![Screenshot 2021-02-11 at 5.10.12 PM.png 940](https://files.readme.io/eebdc85-Screenshot_2021-02-11_at_5.10.12_PM.png)
- Enter an email address, a name, and then check the "Saved to disk" option. Click on "Continue".
![Screenshot 2021-02-11 at 5.17.27 PM.png 613](https://files.readme.io/9c3dea0-Screenshot_2021-02-11_at_5.17.27_PM.png)
- Save the certificate signing request (CSR) with the given name, we will need it later to create the Website Push Certificate.
![Screenshot 2021-02-11 at 5.20.51 PM.png 614](https://files.readme.io/88ee547-Screenshot_2021-02-11_at_5.20.51_PM.png)
STEP 2: Setting up Website Push ID for APNS (Apple Push Notification Service)
-
You need to first login to the Apple Developer Console. Here, we will create a unique Website Push ID for push notifications.
-
In the Developer Console, click on "Identifiers" and then click on "Register an App ID". Then select "Website Push IDs" from the "Register a New Identifier" list and click "Continue".
![safari-create-website-push-id.png 2028](https://files.readme.io/9e67b56-safari-create-website-push-id.png)
- Enter a Description. e.g. 'Web Push for Safari'
![1.png 2028](https://files.readme.io/24c74a2-1.png)
-
Then enter an identifier, which 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."
![2.png 2028](https://files.readme.io/f3e44d1-2.png)
STEP 3: Generating Web Push Certificate
- Click on the Certificates section, then click "+" to see all available options.
![3.png 2028](https://files.readme.io/cc4a472-3.png)
- Click on Website Push ID Certificate and Continue.
![safari-select-website-push-id-certificate.png 2028](https://files.readme.io/984def9-safari-select-website-push-id-certificate.png)
- Next, select the Website Push ID you created earlier in Step 2 and hit Continue.
![safari-choose-website-push-id.png 2028](https://files.readme.io/431ac6b-safari-choose-website-push-id.png)
- Now we need the CSR file that was created in Step 1. Browse to the file with the Choose file button, and hit Continue to upload.
![safari-upload-csr-file.png 2028](https://files.readme.io/9ef6784-safari-upload-csr-file.png)
- On the next screen you will see "Download Your Certificate". Download the SSL certificate.
![6ea302e-safari-download-push-id-certificate.png 2028](https://files.readme.io/12163ca-6ea302e-safari-download-push-id-certificate.png)
The SSL certificate will be used to send notifications to your Subscribers.
Now we need to install and export the Certificate.
- 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, and you will get a menu where you need to click on Export.
![safari-export-website-pushid-certificate.png 2060](https://files.readme.io/1793a5d-safari-export-website-pushid-certificate.png)
- While saving the certificate file, use the Personal Information Exchange (.p12) format.
![safari-save-created-certificate.png 2059](https://files.readme.io/7736796-safari-save-created-certificate.png)
- Next, you will be prompted to enter a password, enter vtap and click on "OK". This is mandatory.
![safari1.png 400](https://files.readme.io/a1863a8-safari1.png)
- Then click "Allow" and enter your Mac password to export the certificate to your Macbook.
![safari2.png 379](https://files.readme.io/2ffa9c6-safari2.png)
STEP 4: Share the Certificate with iZooto
Share the Certificate
Once the above steps are followed, you will need to share this certificate with [email protected]
Updated 12 months ago