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.
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.
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.
|Browser||Support browser notification?|
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.
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.
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!
User offboarding: How to end relationships with your users!
There’s a ton of great content out there on how to onboard new users, how to treat them well, and how to make sure that they understand your product, its benefits, and become paying customers. However, there’s less information available on how you should treat your users who want to end the relationship with you.…
24 Amazing Web Design Blogs You Should Follow This Month!
A while ago, I published this collection of great web development blogs for developers. Since then, some web designers have approached us and suggested further blogs, specifically, web design blogs worth following in 2016. So this time, it’s all about web design. We’ve collected some of the best web design blogs around for you. Now…
5 Tips for an Appealing UI on Your Website
An appealing user interface can have a significant impact on the success of your application. The challenge for web designers is thinking about how users are navigating the UI and which actions they expect to happen. This involves evaluating the skills and technical know-how which they can expect from their users. We will give you a…
16 Conferences in 2017 That no Developer Wants to Miss
Get website feedback. Keep clients happy. Repeat.
Let clients draw directly in the browser.
Fix bugs in minutes with screenshot & metadata.
Trusted by 1000+ customers worldwide.