Push API Tutorial

-

The Push API allows a web app to receive messages pushed by a server, even if the web app is not currently open in the browser or not running on the device.



What is Push API?

The Push API is a recent addition to the browser APIs, and it’s currently supported by Chrome (Desktop and Mobile), Firefox and Opera since 2016. Microsoft Edge supports it in Preview version and Safari already has its own implementation.

Why should we use Push API?

You can send messages to your users, pushing them from the server to the client, even when the user is not browsing the site. This lets you deliver notifications and content updates, hence better customer engagement. This was one of the missing components of mobile web when compared to Native apps and along with this, offline support as well.

How does it work?

When a user visits your web app, you can trigger a panel asking permission to send updates or receive offers or notifications. A Service Worker is installed, and operating in the background listens for a Push Event. So when there is a new offer or any update that you want to notify, your server sends the notification to the client, and the Service Worker, if given permission, receives a the push event. The Service Worker reacts to this event by triggering the notification.

How do we get started?

The first step towards doing it is getting user's permission to receive updates or offers from the web app. There are multiple check points in this stage:
  • checking if service workers is supported or not
  • checking if push api is supported or not
  • checking if service workers is installed and up and running
  • request for permission from user
  • once we get permission subscribe to notifications
  • once you subscribe get the Push Subscription object and send it to the server

How does server side work?

Till now we have primarily talked about how client interacts with this browsers api, now we are gonna look at how server's side work.

Here are the steps involved:
  • Once server receives the Push Subscription object, it then validates and then saves to DB or if there is an error then it returns with alert.
  • If server registers the subscription successfully then it can push a notification to all the subscribers or to any one particular subscriber based on subscriber id.
  • In subscription status is 410 then that user is no longer subscribed to your app, you need to remove that user from DB.

The code stub for the same will be followed soon after this post.
Thanks for dropping by !! Feel free to comment to this post or you can drop an email at naik899@gmail.com

This post was first published on Push API Tutorial | Ravindra Naik

Comments

Post a Comment

Popular posts from this blog

Create a calendar invite (ics file) in ASP NET

-
Creating a calendar invite (ics file) and attaching a email via service or sending an email with downloadable calendar invite is what we are going to learn in following posts. In this post, I will show how you can use ICal library from Nuget and create a calendar invite. The calendar begins with the keyword  BEGIN:VCALENDAR  and ends with  END:VCALENDAR . In between the calendar you can add as many events as you want beginning each event with  BEGIN:VEVENT  and ending with  END:VEVENT . There is a catch when adding multiple events to a calendar, and that is the type of METHOD you use. With METHOD:PUBLISH, you can add multiple events and upon opening the iCal with MS Outlook it will create a new calendar, separate from your main Exchange calendar. METHOD:REQUEST creates a calendar invite, so you can only include one event and upon opening with MS Outlook it will ask you to accept the event and add it to your main Exchange calendar. With this method you have to include the organizer
Read more

Serve GZip CSS and JS from AWS S3

-
Amazon Simple Storage Service (Amazon S3) is an object storage service that offers industry-leading scalability, data availability, security, and performance. This means customers of all sizes and industries can use it to store and protect any amount of data for a range of use cases, such as websites, mobile applications, backup and restore, archive, enterprise applications, IoT devices, and big data analytics. If you are looking to gzip  your static JS and CSS when hosting on S3, however, it’s not obvious how to do so, and results often bring up other AWS hosting services as well. Here’s the quick and simple way to serve gzipped JS and CSS from AWS S3. S3 needs those files compressed before they are uploaded, it can’t do the actual gzipping for us. This is done with a simple command, which I recommend be added as a script to your build step, or your continuous integration process. gzip -9 /filepath/bootstrap.js or gzip -9 /filepath/bootstrap.css The -9 denotes that we want the
Read more