How to Set 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 account

and a developer account (paid).

Developer account

Step1. Registration of Web Push ID

1. In your developer account go to Website Push IDs and add a new Push ID.

Website Push IDs

Add a new Push ID

2. Fill in Description and ID 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).

Description and ID fields

3. Click Register to confirm registration.

Confirm registration

4. Click Done.

Click Done

Once you've confirmed registration, the new ID will appear on the Web Push IDs list.

Web Push IDs list

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.

Request a Certificate From a Certificate Authority

2. Fill in the User's Email Address and Common Name fields, and select Saved to disk.

User's Email Address and Common Name fields

3. Click Save.

Click Save

Step 3. Certificate Generation

1. In your developer account, go to iOS Certificates and click “+”.

iOS Certificates

2. Choose Website Push ID Certificate.

Website Push ID Certificate

3. Select the Website Push ID you’ve created.

 Select the Website Push ID

2. Click Continue.

Click Continue

3. Upload the file generated via Keychain Access.

Upload the file

4. Download the certificate.

Download the certificate

Step 4. Certificate .p12 Export

1. Double-click the downloaded file. In opened Keychain Access, go to My Certificates and select the necessary certificate.

My Certificates

2. Right click the certificate accordion and select Export. In File Format, select Personal Information Exchange format (.p12).

File Format

3. In the file generation window, you can add an additional password to the.p12 certificate file.

Additional password

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

Keys > All

2. Click “+.”

 Click “+”

3. Select Apple Push Notifications Service (APNs).

Apple Push Notifications Service (APNs)

4. Check the information to confirm key configuration.

Confirm key configuration

5. Download the .p8 certificate.

Download the .p8 certificate

How to Set Up Safari Web Pushes in eSputnik

1. In your personal account, go to Settings > Web Push.

Settings > Web Push

2. If you add Safari to the existing website, select it from the list (1). If you don't have a website, click Add website (2).

Web push settings

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

3. In the section For Safari, upload files .p8 and p.12.

For Safari

4. Leave the Key file password field empty if you didn't create a password for it.

Key file password

5. In the Key ID field, insert the corresponding ID from your developer account > Keys > All.

Key ID

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.

Safari icon

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

Web push sample for Safari

Any Questions?
We’re always happy to help!
Request a Callback
Fill in the form, and our specialists will call you back as soon as possible.
Request a Callback
Chat Support
We’re waiting for your questions!
Send a Chat Message
Email
Contact the eSputnik support team
Send an Email