A guide to building browser notifications

This article is brought to you by Usersnap – a visual feedback & bug tracking tool, used by software companies like Facebook, Google, and Microsoft.

As more and more of our beloved apps run solely in the browser, we as users are beginning to rely on browser notifications to get updates on new activities.

In this article, I’m going to provide you with the best practices for developing and designing web push notifications.

[otw_is sidebar=otw-sidebar-1]

Why push notifications?

Push notifications started out as a mobile phone feature but recently they have begun to be seen on web browsers.

Why? Because they’re great both for users and businesses.

With opt-in or –out capabilities, web push notifications enable users to stay up-to-date on their favorite sites and provide web developers like you the opportunity to engage with users via content customized to their usage and interest.

There are two main technologies which allow web developers and designers to connect with their users and boost the overall UX of the site: Push API and Notification API. Let’s take a look in a little more detail at these complementary APIs.

Push APIs

A Push API allows website applications scripted access to server-sent notifications at any time. These push messages contain the data which is sent to the web app and appears via a Notification API on the user’s screen.

Push APIs connect both with service workers and the application server before delivering the data to the Notification API. They also retried any user response to the notification and process, alongside a service worker, the necessary reply or future action.

One of the great assets of a Push API is that it works regardless of whether the website is open or loaded, maximising your ability to engage with users who had opted in to receiving the push notifications.

When there’s an update or new content out, your Push API can ensure site users are aware immediately and encouraged to visit because the service worker is downloaded directly into the browser and runs constantly in the background.

Which browser does support what?

Google Chrome’s Cloud Messaging can be set up easily for both web apps and mobile phones and is one of the most user-friendly ways to enter the world of Push APIs.

Firefox too has the capability to carry Push APIs. Technology to enable Push APIs is currently in development for Internet Explorer but not yet supported by Microsoft. Safari has its own built in software to offer push notification options. It will take some time to set up but new websites and existing ones should all take advantage of this new technology.

[otw_is sidebar=otw-sidebar-2]

Notification APIs

Working in tandem with Push APIs, the function of a Notification API is to deliver the tangible message to the user either browsing a site or subscribe to updates. They also capture any response and send this information back to the Push API.

They work alongside services workers and Push APIs and all function in an interconnected web to deliver the end notifications. Users must give their permission for Notification APIs to become visible. Notification APIs are automatically configured to be in default mode, otherwise known as denied. Only once granted has been selected by a user, can the notifications appear on the browser or web app.

The entire push notification system is built around the use of service workers. A service worker also enables the visible notification to be presented and is constantly communicating with the Notification APIs in the background to ensure messages are displayed immediately. When a message is needed, the service worker will retrieve the necessary data from the application server. These messages must be eye-catching and engaging because of the vast amount of advertising and notifications, in general, the public are endlessly exposed to.

The Technical Side – Service Workers

Service workers operate behind the scenes for these APIs and are triggered when information from the server is sent to them. Once downloaded, activated and installed for each user, service workers access URLs and re-download every 24 hours to override any bad scripts and ensure it is up to date. The fact that these service workers are running constantly in the background is the reason why Push and Notification APIs can reach users even when they are not browsing.

The service workers are JavaScript files triggered by the Push API and, once downloaded, you as the developer can decide how a Notification API delivers the information to the user.

Service workers can be programmed to return a number of responses depending on the content of the push message received. Every user who subscribes will receive their own unique service worker which stores all of the necessary data and an encryption key. In return, the service workers will gain access to the user’s endpoint or device token subsequently stored in the server for future reference. There is a capability URL exclusive to each subscriber which acts as the endpoint and prevents other applications sending push notifications via your app.

Beware though, the use of service workers can have a negative impact on a device’s battery life and other resources. Due to the relatively new nature of the technology, browsers deal with this problem in a number of ways. Some limit the number of push messages each application can receive (e.g. Firefox) whilst others require notifications to pop up for every push message which is sent (e.g. Chrome). Firefox disallows service workers to be used when the private browsing mode is activated.

Both services workers and Push APIs require HTTPS to run because modified requests from multiple networks would leave the whole system vulnerable to attacks. When developed correctly, they work asynchronously with each web page to improve the overall experience for users.

[otw_is sidebar=otw-sidebar-3]

Why use browser notifications?

You collect emails, right? So why even bother? What are the benefits of using push notifications for web apps? Firstly, they enhance the overall UX and they offer a new way of marketing both products and the site itself. You no longer need contact details such as an email address to reach potential customers because if they give your service workers permission, you have the ability to reach them whenever you want. This is also very helpful when attempting to re-engage potential or previous users.

It’s also key that these notifications can be delivered without the browser and web page even being open.

This development in notifications, in theory, made it unnecessary for companies to develop and invest in mobile apps because the browser can perform in exactly the same way and with the same benefits.

The browser notifications are instant and don’t require the user to engage with you before you can connect with them. Although the trend for the last few years has been an increasing shift over to mobile usage, mobile websites still reach more users than mobile apps.

Web push notifications are also compatible with desktops, laptops, tablets, and mobiles, making their inclusion in your next website a nice-to-have for any client wanting to easily, successfully and frequently engage with their users.

Notifications have a much higher opt-in rate than emails because, for the lay user, it appears less of an intrusion than handing out personal information such as an email. Therefore, if deployed successfully, Push and Notification APIs can achieve impressive subscription rates. They also reach up to thirty times greater conversion rates than emails and a 10% lower opt-out rate, proving their overall impact on the UX.

Finally, notifications are instant so there’s no more sitting around waiting for email responses because users can engage at once or simply move onto a different site. They also don’t end up in spam folders or bounce back if the user has changed email addresses because the service worker is embedded within their browser.

The most effective way to use Push and Notification APIs

Remember: Always put your user experience first. Google also published this Google Doc on the best practices for push notifications.

Therefore, your browser notifications must do this in order to benefit your site in any way. We think the most effective way to use our newly developed ability to notify and interact with users in this manner is in the following formats:

• Marketing – new products out? Send a notification to let your customers know. But remember to personalize who you’re targeting to avoid stimulating opt-outs after irrelevant notifications.
• Upgrades to your website – show off your new features as soon as possible via a tempting notification. Again, know your target market.
• Reminders – if customers have expressed interest in a product or event, send regular reminders to re-engage them.
• Delivering time-sensitive messages – special offers, price drops etc. can be delivered, read and clicked on in seconds.
• Clear, short copy – whatever you’re communicating, make sure it is well-written, engaging and going to capture the user’s attention.
• Remember your time zones – make sure your notifications are arriving at an appropriate time for users around the globe.

It’s always exciting when a breakthrough technology emerges onto the scene. Although browser notifications are being implemented across the web, there are still changes and improvements which need to be made over the coming months and years.

Browsers in particular, will be updating the way they deal with service workers and APIs. Nevertheless, I suggest you try out this mobile-based technology for your next website and wow your client with their increased user engagement stats and higher overall usage, the goal for any business or web developer!

[otw_is sidebar=otw-sidebar-4]