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.
Since Apple supports Web push standard protocol starting from version 16.1 in macOS Ventura (released in October 2022), if you already have Batch's web push set up on your website, you already can send notifications to users using macOS Ventura or higher.
However, if you want to extend your web push configuration on previous versions of Safari, all you need to do is follow the few extra steps below.
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 link 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 occurrence 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 by 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 colour 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 occurrence of https://via.batch.com/v2/bootstrap.min.js by https://via.batch.com/v3/bootstrap.min.js
Once these steps are 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.
This article belongs to Batch's FAQ. Need more help? Find insightful articles, documentation, case & market studies, guides, and even more in our website's Resources section on batch.com and our blog.