Buttons. You can also make use of emojis in push notifications to express
yourself better. It is important to understand features of Web Push
Notifications like Banner Image and Call To Action Buttons are only available
for Chrome. Here is a breakdown of how each of these elements-
1. Website Domain: The website domain which has sent the notification.
2. Call to Action Buttons: You can add up to 2 CTA Buttons in a
notification. CTA Buttons are only supported by Chrome. Firefox and
Safari are yet to extend support to this. These buttons can be used to
trigger different actions. For instance - taking the user to a landing
page, sending out a social message (Tweet), triggering the Play Store
or opening the dialler app.
3. Icon: You can add an icon to your notification to build a better recall.
The default icon is bell icon. Users are nowadays bombarded with
notifications, hence it becomes essential to let your users know when
your push notification pops up. Adding your logo helps users in building
a brand recall. The recommended icon should be 100*100px and
should be less than 20kb in size.
4. Banner Image: Banner size images were introduced on notifications
with Chrome 56. This was one of the most awaited features and rightly
so - visuals help you amplify your message by as much 189%. While
the copy of your notification should be eye catchy, adding a
banner/large image contextual to your notification content will increase
your chance of getting that click.
Recommended Dimensions : 360*240px. Size of the banner image should be
less than 240kb or less. Check out this notification preview guide to know
more about how notification looks across different devices.
2.2 How exactly are push notifications delivered to the user's device?
There are three actors involved with delivering a push notification, along with
a fourth, optional, component for advanced functionality.
1. Push Notification Service: Each browser, including Chrome, Safari
and Firefox have their own notification delivery service. Chrome uses
Google Cloud Messaging ( and now Firebase Cloud Messaging ), Safari
uses Apple Push Notification Service ( APNS ) and Firefox uses MDN
servers.
2. Service Worker Registration: Developer must register the service
worker on the browser. This is only for Chrome and Firefox. Safari while