Web traffic coming from Safari on MacOS currently represents 10% of web traffic for desktop users overall. Setting up web push notifications on this browser will allow you to broaden your audience and maximise your reach by including this new segment of users in your userbase.

If you already have Batch's web push set up on your website, all you need to do is follow these few extra steps to extend your web push configuration on Safari.

1. Check the prerequisites

Apple Web Push certificate(s)

Before you get started, you need to have an active paid Apple Developer subscription to create a unique Push ID for your website. Once that is done, you will need to generate a push certificate associated to a Website Push ID.

Note: If your integration scope covers several domains, please refer to this documentation.

Default icon

You need to prepare the icon that will be displayed on all of your Safari web push notifications. This needs to be a square PNG image with a size of 256x256 pixels.

Note: If you have a running web push integration on your website, you can resize and use the same default icon.

2. Configure Safari settings from the dashboard

For this step, you will need to go on Batch's dashboard in ⚙️ Settings → Push settings and set all parameters dedicated to Safari, this includes:

If you linked multiple domains to the same Batch app, please refer to this documentation.

3. Update Batch's Javascript tag on your website

After completing the previous steps, update Batch's Javascript tag.

SDK version

Replace any occurence of https://via.batch.com/v2/bootstrap.min.js by https://via.batch.com/v3/bootstrap.min.js.

Safari Object

Go on the dashboard's Integrate tab and copy the Safari object that has been generated specifically for your website settings. This object should be added to the BatchSDK Setup parameters.

batchSDK('setup', { 
apiKey: .. ,
subdomain: .. ,
authKey: .. ,
vapidPublicKey: .. ,
ui: .. ,

safari: { 'mywebsite.com': 'web.mywebsite.com', }

});

Custom prompt settings

In order to display Safari's native notification authorization prompt, you will need your users to perform an action on your site. This can be achieved through displaying Batch's custom prompt. You will need to customize the following prompt components in your tag:

  • A text explaining the purpose of the subscription request

  • A wording and color for both subscription CTA buttons

If you already have the custom alert set up for Mozilla Firefox, you can keep the same configuration for Safari by adding || navigator.userAgent.indexOf("Safari") !== -1 && navigator.userAgent.indexOf("Chrome") === -1) as shown below.

/* Use a specific configuration for Firefox and Safari browsers (custom prompt) */

if (navigator.userAgent.indexOf("Firefox") !== -1 || navigator.userAgent.indexOf("Safari") !== -1 && navigator.userAgent.indexOf("Chrome") === -1){

batchSDKUIConfig = {
alert: {
icon: .. ,
text: .. ,
positiveBtnStyle: {
"backgroundColor":.. ,
"hoverBackgroundColor": ..
},
positiveSubBtnLabel: .. ,
negativeBtnLabel: ..
}
}
}

4. Update Batch's SDK version in the service worker

If you are currently using a version of Batch's web SDK that is older than 3.0, you also need to upgrade Batch's Service Worker to reference a more recent version of the SDK.

In the batchsdk-worker-loader.js (at the root of your website), replace any occurence of https://via.batch.com/v2/bootstrap.min.js by https://via.batch.com/v3/bootstrap.min.js

Once these steps completed, you are all set to start collecting push subscriptions and sending web push campaigns to your Safari users. Note that these users will be automatically included in your web push campaigns with no additional targeting needed.

Did this answer your question?