Send Safari Push Notifications for Free

push notificaitons icon

Start sending for free, today. Trusted by top brands.

Sign Up »

A Comprehensive Guide to Safari Push Notifications

What are Safari Push Notifications?

Safari push notifications are clickable messages that are sent from a website. You get them on your Mac — even when Safari isn’t running. Safari Push Notifications work just like push notifications for mobile apps. They will include your favicon and notification text, which users can click to go right to your website.

Safari push notifications are concise, unobtrusive messages that appear at the top-right corner of the computer screen, alerting Mac users about a new message or a completed task. As a web developer, you can configure your website to send notifications to Mac users, even if you don’t have a native iOS app.

safari-push-notifications

 

A key point to be noted is that push notifications can be delivered to Safari on Mac not iphone. Notifications from websites don’t appear on ios.

There are two kinds of notifications for websites:

  • Safari Push Notifications, which is an Apple-exclusive technology and triggered remotely using Apple Push Notification service (APNs).
  • Local Notifications, which are specified by a W3C standard and triggered locally using JavaScript.
 

How does Safari Push Notifications work?

 

Understand user control:

  how-does-safari-push-notification-work  

To best serve notifications to your users, you must first understand how OS X displays notifications. Safari (OS X v10.8+) users can allow websites to display banners and alerts in Notification Center. Through a JavaScript API, you can create notifications that appear and behave like notifications from native mobile apps

safari-local-notification

Safari push notifications don’t display the website domain, because the icon makes it clear which website it represents. More importantly, push notifications can be received even when Safari is closed.

 

Opting In to Notifications

Users must opt in to receive notifications. The opt-in process only occurs once per domain.

safari-local-notification-opting-in

Users can change their notification preferences at a later time as well.

Users can choose to allow or deny notifications from websites on a per-domain basis by selecting Notifications (under preference>settings>notifications). In the Notifications pane, users can grant permission for some websites to send notifications while denying permission to others.

safari-push-notifications-user-preferences

The user can also turn off notifications by service or across the system using  Do Not Disturb , a feature introduced in iOS 6 that will appear on the Mac in OS X Mavericks.

safari-push-notifications-adjust-apperence

 

More important question: Why does your user want to receive push notifications?

Push notifications are one of the most valuable capabilities of native apps, and this experience is now available on the web. To get the most out of Web Push Notifications, it needs to be timely, precise, and relevant at a user level.

Why-does-your-user-want-to-receive-push-notifications

Timely— I feel I need it and it matters right now

A timely notification is one that appears when users want it and when it matters to them the most.

Precise— It has specific information that’s good to know or act upon  

A precise notification is one that has specific information that can be acted on immediately.

Relevant— It’s from people or sources that matter to me, which make it personal

A relevant message is one about people or subjects the user cares about.

 

Configuring Safari Push Notifications

You can send Safari Push Notifications from your web server directly to OS X users by using the Apple Push Notification service (APNs).

Configuring-safari-push-notifications

To integrate push notifications with your website, you first present an interface that allows the user to opt in to receive notifications. If the user consents, Safari contacts your website requesting its credentials in the form of a file called a push package. The push package also contains notification assets used throughout OS X and data used to communicate to a web service you configure. If the push package is valid, you receive a unique identifier for the user on the device known as a device token. The user receives the notification when you send the combination of this device token and your message, or payload, to APNs.

Upon receiving the notification, the user can click on it to open a webpage of your choice.

 

What are APNs?

 

Apple Push Notification service (APNs) is the centerpiece of the remote notifications feature. It is a highly efficient service for propagating information to iOS (and, indirectly, watchOS), tvOS, and macOS devices. On initial launch, the user authenticates the IP connection with APNs from the user’s device. Over time, APNs deliver notifications using this persistent connection.

In addition to APNs and your app, another piece is required for the delivery of remote notifications. You must configure your own server to originate those notifications. Your server, known as the provider, has the following responsibilities:

  • It receives device tokens and relevant data from your browser.
  • It determines when remote notifications need to be sent to a desktop.
  • It communicates the notification data to APNs, which then handles the delivery of the notifications to that safari browser

Provider is responsible for originating remote notifications related to your apps. When you decide it is time to send a notification, provider packages the notification data into a JSON dictionary, which constitutes the payload to deliver to the device. You package that payload into an HTTP/2 request that includes a device token and other information to use for the delivery of the notification. Your provider then forwards that request to APNs, which then routes the payload to the appropriate user device.

 

Apple-Push-Notification-service

 

Configure Local Notifications:

As of OS X v10.8, webpages in Safari can post notifications to the system wide notification system known as Notification Center. Local notifications are dispatched by the WebKit Notification object and follow the implementation outlined by the W3C specification.

Requesting Permission:

Your website’s visitors could be running an older version of OS X, so first determine whether notifications are supported by their browser. Do this by making sure that the window.Notification object is defined.

requesting-permission

If the  window Notification object does indeed exist, you can continue to check for permissions by accessing the permission property. The  permission property can return three possible states:

  • default—The user has not yet specified whether he or she approves of notifications being sent from this domain.
  • granted—The user has given permission for notifications to be sent from this domain.
  • denied—The user has denied permission for notifications to be sent from this domain.
 

Creating and Interacting with Local Notifications:

The only required parameter is the title, which is a string. Available keys that can be included in the options object are as follows:

  • body—The notification’s subtitle.
  • tag—The notification’s unique identifier. This tag prevents duplicate entries from appearing in Notification Center if the user has multiple instances of your website open.

The notification is placed in a queue and is shown when it isn’t preceded by another notification. The subtitle is always the domain or extension name from which the notification originated, and the icon is always the Safari icon.

 

How to build an awesome browser push notifications:

There are several possible ways you use safari push notifications for your business. If you run a business online, you can leverage the power of safari push (or, browser push notifications) and grow your business. While web push gives you an edge and enables you to talk in a better way, it also provides you with an immense number of benefits to help you drive more revenues from your business. Check out several benefits that web push offers.

 

Safari Push Notifications For eCommerce:

 

Go mobile but without an app:

Mobile apps have been enjoying a potential free channel i.e. push notification. However, does this mean you have to wait till your app is finally out? After all, an app pretty much guarantees all your consumers under one roof ready and waiting for some timely push notifications to swing their way.

But what if you have a website (desktop/mobile) already up and running while you’re still building your app? I mean, it rarely happens that someone puts an app out without already having a website up and functioning.

 

Drive more sales:

This is an ultimate goal for any business. You have lost 68.81% of your sales in 2015 (This value is an average calculated based on these 34 different studies containing statistics on e-commerce shopping cart abandonment.) Source: http://baymard.com/lists/cart-abandonment-rate

Browser push notification helps curb cart abandonment rate by pushing instant deals & notifications to users who left unordered items in the cart.

Imagine this: User A wants to buy a new dress. She’s added it to the cart but could not complete the transaction. Maybe her phone rang and the dress totally slipped her mind. She does not open emails very frequently because it is already spammed with promotional emails. Considering SMS again is a poor option. But browser push notification lands in front of her the next time she opens her browser with a link back the product page in this case the dress that’s she’s let behind. You just brought her back to the transaction page without spamming .

There are several other use cases for e-commerce businesses like:

  • a. Product category drop-off (user dropped off from mobile category)
  • b. Product drop-off (user dropped-off from blue t-shirt page)
  • c. Comparison page (user dropped off after comparing two products)
  • d. Cart abandonment
  • f. Drop-off after liking a product
 

Re-engage your users like never before:

As far as browser push is concerned, the genius is in the simplicity for both the marketer and the user. You don’t need a lot of user details to start sending notifications and can keep re-engaging them even when they leave your website without collecting any personal information. Similarly, all it takes for the user to start receiving these notifications is a simple click of the opt-in button on their browser. They don’t need to provide tones of information and are also spared the grief of receiving irrelevant emails and messages a dime a dozen.

You can touch base with your inactive users by notifying them with personalized notifications. Send notifications with deals, or offer updates basis their interest & on-site behavior. Build relationships & improve your earnings. For example- Re-engage with the users who have not visited your website in the past week. Share unique coupon codes, product details or visited categories to get them back!

 

Timely updates

Business is all about winning the moments that matter. In this case, it is “Right Person, Right Message, Right Time, Every Time” (RRRE) . Reaching out to your audience with a channel that serves the core theory of RRRE is an ultimate goal of any marketer and customer acquisition manager.

Let’s consider that you need to send a time-limited deal or announce a sale. You can use web push notifications and instantly reach your users on their desktop, mobile or tablet with push notifications, even when they are not on your website.

 

Keep your customers informed

Want to inform your users about the product delivery and asking for feedback. Chrome push notifications make it an easy process. This entire process is hustle free and instant. Eg. Maybe informing about the product delivery status.

 

Safari Notifications Vs Chrome notifications – How are they different?

Safari-vs-chrome-Push-Notification

Apps like Vizury help you to send dynamic browser push notifications to Chrome and Safari both with less hurdle and more optimization. Even though these are two different and API calls to send chrome and safari push but Vizury enclose both of these technologies along with other (Mozilla or Firefox push notification) in one platform.

But how does these two differ from each other?

 

Opting-in for web push:

Users must optin for web push in both cases; chrome and safari. The UI experience slightly vary for these two users. Safari users get ‘Allow/Disallow’ notifications from a particular site, as seen below. This is a modal dialog, which requires the user action. This question can be asked only once. After that, the user must change their choice in Safari->Settings->Notifications.

Safari-vs-chrome-Push-Notification-optin-process

In Chrome, a permissions dialog/bar appears just below the browser controls. It asks for permissions to send web notifications from that site.

Here the user can allow, block, ignore, or close (click the ‘x’). In the last two cases, you can re-prompt the user on subsequent page views.

 

Notifications Design:

Notifications have been placed nicely with intelligent analysis. These notifications should not hinder your user experience.

Safari-vs-chrome-Push-Notification-user-experience

 

Notification Storage Center:

Notifications that are not read immediately are stored in different ways on by the two browsers.

Safari has a built-in notification center. You can access to it via ‘hamburger’ on the upper right of the screen. It can store approximately 6 notifications for each site.

Chrome shows a list of unread notifications when you click the ‘bell’ icon toward the center at the top of the screen.

 

Browser and OS Integration:

The only prominent difference between Chrome and Safari is that Safari browser is built on OS X. That is the reason. Safari push notifications are always on, even when Safari, itself, is turned off.

While Chrome push does not require that a registered website be open in a tab or window, the Chrome browser application must be running for notifications to be received by the subscriber.

But these days a computer with a running browser is very rare.

As Chrome is not tied up with the operating system that is the reason; why Chrome is live on Windows, Mac OS, Linux, and Android so far–while Safari Web Push is only on Mac OS desktop.

 

Security:

Chrome and Safari both have nice security models, which \prevent malware activities on your push notifications.

The key difference is that Apple controls the push ecosystem on their devices end-to-end, so they can use fairly subtle trust mechanisms. Google relies directly on HTTPS/SSL (Secure Socket Layer).

 

Learn More about push notifications