Understand HTML5 Browser Push Notifications through an example & demo
One of the technological gaps between HTML5 / browser based apps on one side and native apps on the other has been the ability to send push notifications. Until 2 years ago, HTML5 applications were not able to send browser notifications. That is no longer the case. HTML5 Browser Push notifications let your HTML5 web app extend beyond the browser, and enables developers and marketers to engage with their users even when they are not on the website - just like native apps. To demonstrate how HTML browser push notifications works, we have created an example demo for you. Inside the dialpad on this page, you will see four buttons - each corresponding to a sample scenario. Please go ahead and click on one of the buttons to see how website push notifications work.
To enable HTML5 push notification example in your web app, we recommend you take a look at our API comparison table further below to see which one best suits your requirements.
Additional HTML5 Push Notification Examples:
Step-by-step Breakdown of HTML5 Push Notifications Example
- Step 1: Subscriber Opt In: HTML5 Push can only start when a site visitor is actively prompted to accept receiving push notifications from the HTML5 app. This is an HTML5 requirement and it cannot by skipped or bypassed. Once the user "Allows" for HTML5 to receive push, the subscriber end point information is sent to browser push API company that stores this endpoint information for you. Think of the end point as an address for this visitor.
- Step 2: As you saw in our HTML5 Push Notification Demo above, once you accepted to receive push message, you were able to receive the push message outside the HTML5 container. This demonstrates that HTML5 push notifications work just like a native app push.
Key components of HTML5 push notification demo
An HTML5 push notification basically consists of following 3 key components and is identical to native app push message:
- 1- Notification Title (the headline of the push message)
- 2- Notification Message (the second line in the push message)
- 2- Destination URL (The URL you visit if you click on the push message)
Why should I use an API for HTML5 Push Notifications? Can I not develop my own API?
The HTML5 standard around push notifications is currently evolving. Each browser manages HTML5 push events slightly differently and being able to create the necessary infrastructure and interconnect with browser gateways is not straight forward. You can certainly create your own HTML5 push notifications infrastructure but our strong recommendation for most companies is to leverage one of the existing API providers that have already spent years developing and stabilizing their HTML5 Push APIs.