Skip to main content

Push notifications in Web Apps via Service Workers

A push notification is a message that is “pushed” from backend server or application to user interface, e.g. (But not limited to) mobile applications and desktop applications.
Service workers are a great way to run some script in the background and not putting the load on your main business logic running on front-end.
 Your app does not have to be open in the browser, to get the notification. It mean that’s the real purpose of push notifications, notify the user about the content of your application.
                         Application server tells Google Cloud Messaging (GCM) server that there is something new content and GCM server then awakens the service worker which generates the push notification.

Register Service Worker



if ('serviceWorker' in navigator && 'PushManager' in window) {
  navigator.serviceWorker.register('software-worker.js')
  .then(function(reg) {
    registration = reg;
  })
  .catch(function(error) {
    return;
  });
} else {
  // Well Service Worker or Push Notifications 
  // aren't supported 
  // yet in your browser
}

Here is what  did in above snippet of code:
1. Checking if the browser supports service worker and push notifications.
2. Handle accordingly if the browser doesn’t support them.
3. If they do, register the service worker file and get the registration object.

Subscribe to Notifications from client



registration.pushManager.subscribe({
    userVisibleOnly: true,
    applicationServerKey: UInt8array Key
  })
  .then(function(subscription) {
    if (subscription) {
       // User is already subscribed
    }
  })
  .catch(function(err) {
    // User have declined request for Push notifications
  });
This is what doing above:
1. Using push manager service create the subscription.
2. You need to have application Server Key for this.
3. Once got the subscription object, send it to server.


Note: user Visible Only: true must be true, otherwise you will get an error in your browser console.

Push notifications handler



self.addEventListener('push', function(event) {
  event.waitUntil(
    self.registration.showNotification(Title, {
      body: Body,
      icon: Icon
    })
  );
});

It will trigger every time, your service worker will be awakened by GCM server.
And that’s it, you have an active service worker that will push notifications to the user every time GCM server will call it.


This post’s scope was only to cover the use of service workers in push notifications


                






















Comments

Popular posts from this blog

Pay Per Click by AppWorks Technologies Pvt Ltd

24 Must Have WordPress Plugins for Business Websites- Part 1

1. OptinMonster OptinMonster is the most popular conversion rate optimization software. It allows you to convert abandoning website visitors into email subscribers. If you want to grow your email list, then this is a must have WordPress plugin in 2017. Read these  case studies  to see how much success other businesses are having by using OptinMonster. 2. WPForms As a business owner, allowing your customers to contact you should be your top priority. WPForms is the most beginner friendly contact form plugin for WordPress. This drag & drop online form builder allows you to easily create contact forms, email subscription forms, order forms, payment forms, and other type of online forms with just a few clicks. We use it on WPBeginner and all of our other sites. There’s a free  WPForms Lite version  available for those who are looking for a simple solution. If you want more advanced features, then get the Pro version. Use this  WPForms coupon  to get 10% off your purcha

ERP Management System (Appworks Technologies Pvt Ltd)