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:

  1. Create a Certificate Request
  2. Setting up Website Push ID for APNS (Apple Push Notification Service)
  3. 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.
940
  • Enter an email address, a name, and then check the "Saved to disk" option. Click on "Continue".
613
  • Save the certificate signing request (CSR) with the given name, we will need it later to create the Website Push Certificate.
614

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".

2028
  • Enter a Description. e.g. 'Web Push for Safari'
2028
  • 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."

2028

STEP 3: Generating Web Push Certificate

  • Click on the Certificates section, then click "+" to see all available options.
2028
  • Click on Website Push ID Certificate and Continue.
2028
  • Next, select the Website Push ID you created earlier in Step 2 and hit Continue.
2028
  • 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.
2028
  • On the next screen you will see "Download Your Certificate". Download the SSL certificate.
2028

👍

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.
2060
  • While saving the certificate file, use the Personal Information Exchange (.p12) format.
2059
  • Next, you will be prompted to enter a password, enter vtap and click on "OK". This is mandatory.
400
  • Then click "Allow" and enter your Mac password to export the certificate to your Macbook.
379

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]


/* "use strict"; !function() { var t = window.driftt = window.drift = window.driftt || []; if (!t.init) { if (t.invoked) return void (window.console && console.error && console.error("Drift snippet included twice.")); t.invoked = !0, t.methods = [ "identify", "config", "track", "reset", "debug", "show", "ping", "page", "hide", "off", "on" ], t.factory = function(e) { return function() { var n = Array.prototype.slice.call(arguments); return n.unshift(e), t.push(n), t; }; }, t.methods.forEach(function(e) { t[e] = t.factory(e); }), t.load = function(t) { var e = 3e5, n = Math.ceil(new Date() / e) * e, o = document.createElement("script"); o.type = "text/javascript", o.async = !0, o.crossorigin = "anonymous", o.src = "https://js.driftt.com/include/" + n + "/" + t + ".js"; var i = document.getElementsByTagName("script")[0]; i.parentNode.insertBefore(o, i); }; } }(); drift.SNIPPET_VERSION = '0.3.1'; drift.load('udrm9k99ykdg'); */