How to implement web push notifications in Safari

Web Push Notifications are a powerful tool for keeping users engaged and informed, even when they are not actively browsing a website. Safari, the browser developed by Apple, has supported Web Push Notifications since version 16. This support is available on macOS, iOS, and iPadOS, allowing developers to send notifications directly to users' devices. However, the implementation of Web Push Notifications in Safari has some peculiarities compared to other browsers, such as Chrome or Firefox.

Specific Features of Web Push Notifications in Safari

1. Limited Support for Proprietary Push Services:
   Safari uses the Apple Push Notification Service (APNs) to manage push notifications, instead of the standard Web Push service used by other browsers. This means that developers must register their site on the Apple Developer Center and obtain an authentication certificate to use push notifications.

2. User Permission:
   In Safari, permission to receive notifications is managed through a dialog box that is only displayed in response to a direct user interaction, such as a click or touch. It's important to note that this dialog cannot be automatically invoked, so the user experience must be carefully designed to prompt the user to allow notifications.

3. Custom Notification Badges and Icons:
   Safari allows the use of custom badges and icons within notifications, offering a way to make notifications more recognizable and consistent with the site's branding. However, it's essential to follow Apple's guidelines to avoid notifications being considered spam or unwanted.

4. Focus on the Apple Ecosystem:
   As part of the Apple ecosystem, Web Push Notifications in Safari can integrate with native iOS and macOS features, such as Focus mode, which limits notifications during times of concentration or rest.

Steps to Implement Web Push Notifications in Safari

Implementing Web Push Notifications in Safari requires specific steps, including setting up an Apple Developer account, registering the site, and managing user permissions. Here’s a detailed guide on how to proceed:

1. Registering the Site on Apple Developer Center:
   The first step is to register your website on the Apple Developer Center. This includes creating a Web Push ID, necessary to uniquely identify the site that will send notifications. Additionally, you will need to obtain an APNs authentication certificate.

2. Configuring the Site Manifest:
   You need to create a manifest.json file specifying the details of the notifications, such as the icon, application name, and push service information. Safari uses this file to understand how to present notifications to the user.

3. Requesting User Permissions:
   To ask the user to allow notifications, you must use the JavaScript API Notification.requestPermission(). This method should be called in response to a user action, such as a button click. The API will return a promise that resolves to the permission status (granted, denied, or default).

4. Registering the Service Worker:
   Safari requires the registration of a Service Worker, responsible for handling background notifications. The Service Worker must be registered with a JavaScript script that defines how to manage notification events.

5. Handling Push Events:
   Once the Service Worker is registered, you can handle push events using the push event. This event is triggered when a notification arrives from the server.

6. Integrating with the Server to Send Notifications:
   Finally, the server must be configured to send push notifications via APNs using the certificate obtained during site registration. It’s crucial to ensure that the server is correctly configured to authenticate with APNs and send notifications in the required format.

Conclusion

Web Push Notifications in Safari offer a unique opportunity to engage users on Apple devices. However, they require specific configuration and implementation, which differs from other browsers, mainly due to the integration with the APNs service. By carefully following the outlined steps, you can correctly implement notifications and fully leverage Safari's potential to engage users.