Setting Up Web Pushes for Safari

Safari Push Notifications are triggered remotely using Apple Push Notification service (APNs), even when the Safari browser isn’t running. Web pushes work just like app push notifications. To set up web pushes for Safari, you need to have an Apple account

Apple ID account sign-in page with an Apple ID input field

and a developer account (paid).

Apple Developer Program overview page with an Enroll button
šŸ“˜

Note

Voluntary Application Server Identification (VAPID) allows sending web pushes to Safari versions 16+.

If you are using VAPID and don't need to send pushes to older Safari versions, you can skip the manual below.

Step 1. Registration of Web Push ID

  1. In your developer account go to Identifiers and select Website Push IDs.
Apple Developer Certificates, Identifiers and Profiles page with Identifiers highlighted in the sidebar and the Website Push IDs filter highlighted
  1. Select Website Push IDs and click Continue.
Register a new identifier page with the Website Push IDs option selected and highlighted
  1. Fill in Description and Identifier fields, and click Continue.
    • Description. Your service name for the Provisioning Portal which labels your Website Push IDs with a more human-readable description.
    • Identifier. Your unique reverse-domain string that must start with web (for example, web.com.example.domain).
Register a Website Push ID page with the empty Description and Identifier fields highlighted

The new ID will appear on the Web Push IDs list.

Website Push IDs list showing a new identifier named my home climate highlighted

Note. Your certificate may be revoked by Apple if you violate any of the push notification service rules and provisions. Thus, you’ll be unable to send new notifications. In case of unauthorized violation, you can personally revoke your certificate at your developer account → Certificates → Identifiers & Profiles.

Step 2. Certificate Request in Keychain Access for MacOS

  1. Open Keychain Access. It's standard for all Apple devices. In the menu, choose Certificate Assistant → Request a Certificate From a Certificate Authority.
Keychain Access menu with Certificate Assistant submenu open and Request a Certificate From a Certificate Authority highlighted
  1. Fill in the User's Email Address and Common Name fields, and select Saved to disk.
Certificate Assistant Certificate Information window with the User Email Address field highlighted and Saved to disk option selected
  1. Click Save.
Certificate Assistant Save As dialog with the certificate signing request filename highlighted

Step 3. Certificate Generation

  1. In your developer account, go to iOS Certificates and click Create a certificate.
Apple Developer Certificates page with the Create a certificate button highlighted
  1. Choose Website Push ID Certificate and click Continue.
Create a New Certificate page with the Website Push ID Certificate option selected and highlighted
  1. Select the Website Push ID you’ve created and click Continue.
Create a new Website Push ID Certificate page with the Website Push ID field and Continue button highlighted
  1. Upload a Certificate Signing Request.
Create a new Website Push ID Certificate page with the Choose File button highlighted for uploading a Certificate Signing Request
  1. Download the certificate.
Download Your Certificate page with certificate details and the Download button highlighted

Step 4. Certificate .p12 Export

  1. Double-click the downloaded file. In opened Keychain Access, go to My Certificates and select the necessary certificate.
Keychain Access Certificates tab with the my home climate private key selected under the Website Push ID certificate
  1. Right-click the certificate accordion and select Export.
Keychain Access context menu for the private key with Export my home climate highlighted
  1. In File Format, select Personal Information Exchange format (.p12).
Keychain Access export dialog with the File Format field set to Personal Information Exchange (.p12) highlighted
  1. In the file generation window, you can add an additional password to the .p12 certificate file.
Keychain Access dialog for entering a password to protect the exported certificate, with empty Password and Verify fields

You can leave these fields blank and click OK. Next, click Allow and enter your Mac password to export the certificate to your computer.

Step 5. .p8 Certificate Download

The .p8 extension is a text file with keys that are used to execute JWT content for APNs messages.

  1. In your developer account, go to Keys and click Create a key.
Apple Developer Keys page with the Create a key button highlighted
  1. Select Apple Push Notifications Service (APNs).
Register a New Key page with the Apple Push Notifications service (APNs) option enabled and highlighted
  1. Register a new key.
Register a New Key page with the Register button highlighted
  1. Download the .p8 certificate.
Download Your Key page with key details and the Download button highlighted

The new key will appear in the Keys list.

Apple Developer Keys list with the Climate key highlighted

How to Set Up Safari Web Pushes in Reteno

  1. In your personal account, go to Settings → Web Push.
Reteno account dropdown menu open with Settings highlighted, shown over the Web Push settings page
  1. If you add Safari to the existing website, click on its link (1). If you don't have a website, click + Connect website (2).
Web Push settings page with an existing website link numbered 1 and the Connect website button numbered 2

For a new website, fill in all the fields. If the site already exists, fill out For Safari.

  1. In theĀ Legacy browsers support section,Ā upload files .p8 and p.12.
Legacy browsers support section with the Change key file (.p8) and Change certificate file (.p12) buttons highlighted
  1. In the Key ID field, insert the corresponding ID from your developer account → Keys → All.
šŸ“˜

Note

Safari icons should be not less 256x256px, JPEG, PNG, up to 200KB. Images should be square. Unlike other browsers, the icon for Safari is installed once and cannot be changed. If you change the icon, old subscribers will receive notifications with the old image, and new ones with the new one.

Default icon for web push notifications section showing a bell icon and the Change image button

Once you’ve saved all the settings, enter your website in Safari and see a web push permission prompt.

Safari push notification permission prompt for mysite.com with Don't Allow and Allow buttons

Did this page help you?